westagram cloning project -1

연정·2021년 10월 18일
CSSJavaScripthtmlproject
0

Personal Projects

목록 보기
1/6
post-thumbnail

본격 팀프로젝트에 들어가기 전, 이론과 레플릿으로만 배운 html & css & javascript 활용에 익숙해지도록 instagram cloning 프로젝트를 진행하였다.
(a.k.a westagram project)

구현 내용

  • HTML & CSS 를 활용하여 instagram 디자인 중 일부를 구현
    (로그인 페이지 & 피드가 있는 메인 페이지)
  • Javascript를 활용하여 이벤트 구현
    로그인 페이지 : ID & PW 모두 한 글자 이상 입력해야 버튼 활성화되는 기능 구현
    메인 페이지 : 게시버튼 클릭 혹은 엔터키 누를 경우 피드에 댓글 추가 및 삭제되는 기능 구현
  • 개발자도구를 활용하여, 디자인 구성의 효율성을 검토하고 Javascript로 구현한 이벤트가 잘 동작하는지 확인
  • Git과 GitHub를 활용하여 commit & PR 진행
  • 전체적인 코드 리팩토링 진행

구현 결과

1) 로그인 페이지

코드 및 셀프리뷰

1) 로그인 페이지

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>Westagram</title>
    <link href="login.css" rel="stylesheet"/>
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"/>
</head>

<body>
    <main class="loginOuterBox">
        <div class="loginInnerBox">
            <h1>Westagram</h1>
            <form class="loginForm">
                <input id="id" type="text" placeholder="전화번호, 사용자 이름 또는 이메일"/>
                <input id="pw" type="text" placeholder="비밀번호"/>
                <button id="loginBtn" type="button">로그인</button>
            </form>
            <a href="">비밀번호를 잊으셨나요?</a>
        </div>
    </main>
    <script defer src="login.js"></script>
</body>
</html>

HTML Self-Review :)
Semantic tag를 사용하는 것이 좋다는 것을 알면서도 익숙하지 않았던 터라, 처음 코드를 작성했을 때는 대부분의 태그가 div span 태그였다. 리팩토링 과정에서 대표적인 Semantic tag의 리스트를 옆에 켜두고 최대한 바꾸려고 노력한 결과 위와 같은 코드로 정리되었다.

  • Heading은 최대한 h1~h6 태그를 활용하는 습관을 들이자.
  • 디자인에 필요하지 않은 div 태그 사용은 피하자.
  • 사용자가 직접 작성하고 해당 내용을 데이터화 해야 하는 경우에는 form 태그의 사용을 고려해보자. form 태그는 추후 event 구현 시 효과적으로 사용될 수 있다.
  • Javascript 파일과 연결하는 script 태그의 위치에 신경쓰자.
    (body 태그 내 가장 하단에 배치한 이유는 페이지 구성이 끝난 뒤 이벤트를 적용할 수 있게 하기 위함이다. 페이지가 무거울 경우, 사용자에게 페이지 먼저 보여준 뒤 디테일한 이벤트를 적용할 수 있도록! 하지만 경우에 따라 달라져야 한다!!)
  • img 태그에서 alt 속성은 SEO적인 측면에서 중요한 역할을 하기 때문에 src보다 우선적으로 적어주는게 좋다고 한다.
CSS

* {
    box-sizing: border-box;
}

html, body, .loginOuterBox {
    height: 100%;
}

.loginOuterBox {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.loginInnerBox {
    padding: 35px;
    border: 1px solid rgb(230,230,230);
}

.loginInnerBox h1 {
    margin-top: 0;
    margin-bottom: 50px;
    font-family: 'Lobster', cursive;
    font-size: 50px;
}

.loginForm input {
    display: block;
    width: 300px;
    height: 40px;
    margin-bottom: 7px;
    padding-left: 10px;
    border: 1px solid rgb(239,239,239);
    border-radius: 3px;
    background-color: rgb(250,250,250);
}

.loginForm input:focus {
    outline: 1px solid rgb(220,219,219);
}

#loginBtn {
    width: 300px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 120px;
    border: none;
    border-radius: 5px;
    background-color: rgb(198,222,250);
    color: white;
    font-weight: bold;
}

.loginInnerBox a {
    text-decoration: none;
    color: rgb(18,51,101);
    font-size: 12px;
}

CSS Self-Review :)

  • 최초 코드 작성부터 리팩토링까지 id & class명에 많은 신경을 썼다. 다른 사람이 봐도 금방 알아볼 수 있는 이름으로 짓는게 생각보다 어렵다는 걸 느낌.
  • 리팩토링에 대한 가이드 중 Bottom-up 방식으로 레이아웃을 구성해야 한다는 내용이 있었다. 작은 콘텐츠에 고정 사이즈를 부여하고 padding과 margin 값을 활용하여 외부 콘텐츠의 사이즈를 조정한다는 내용인데, 코드의 유지보수에 굉장히 좋은 방법이라고 한다. 이 부분을 반영하기 위해 코드 전체를 수정..ㅠ 내부 콘텐츠인 input과 button 태그에 width를 부여하고 눈에 보이는 외부 사각형을 컨트롤 하는 loginInnerBox 태그에 padding 값을 부여하여 사이즈를 컨트롤하였다.
  • CSS 속성들의 가독성을 위해서는 암묵적으로 지켜야 하는 순서가 있다고 한다. 그 내용에 따라 전체 코드의 순서 변경.

CSS 속성 순서 (영향을 많이 주는 순서대로 / 인접 속성끼리는 묶어서)
1. Layout property (position, display, float, clear)
2. Box model property (width, height, margin, padding)
3. Visual Properties (color, background, border, box-shadow)
4. Typography Properties (font-size, font-family, text-align, text-transform)
5. Misc Properties (cursor, overflow, z-index)

로그인 페이지에서 구현한 이벤트는,
ID와 PW input 부분에 1글자 이상 텍스트가 입력되어야만 버튼이 활성화되고, 만약 둘 중 한군데라도 텍스트가 지워지면 다시 버튼이 비활성화 되는 이벤트이다.
버튼의 활성화는 구글링을 통해 disabled 속성을 이용하였다.

로그인 버튼 클릭이벤트도 구현하고 싶었으나, 아직 스스로의 미개함을 깨닫고 하나의 이벤트를 이해하는 것에 집중하기로 했다.

Javascript 

"use strict";

const inputs = document.getElementsByClassName('loginForm')[0];
const loginBtn = document.getElementById('loginBtn');

function handleInput (){
    const idValue = document.getElementById('id').value;
    const pwValue = document.getElementById('pw').value;
    
    if (idValue.length > 0 && pwValue.length >0){
        handleBtn(true);
    } else {
        handleBtn(false);
    }
}

function handleBtn (value){
    loginBtn.disabled = value ? false : true;
    loginBtn.style.backgroundColor = value ? '#4192ef' : '#c6defa';
    loginBtn.style.cursor = value ? 'pointer' : 'default';
}

const init = () => {
    inputs.addEventListener('input', handleInput);
}

init();

Javascript Self-Review :)
첫 실전 Javascript라, 솔직히 혼자서 저 코드를 작성했다고 말하긴 어렵다. (거의 멘토님의 가이드를 따라했다고 보는게 맞다) 하지만 위의 코드를 몇 번씩 다시 작성해보면서 어떤 방식으로 코드가 작성되었는지 이해하고 스스로의 것으로 만들기 위해 노력했다. DOM에 대해서 조금 더 공부할 필요가 있다!

  • 코드 처음에 작성된 "use strict"는 조금 더 빡빡한 기준으로 코드를 검사하겠다는 의미라고 한다.
  • 하나의 function은 하나의 역할만 가지고 있는게 Clean code라고 한다.
  • if문을 단순화시킬 수 있는 삼항연산자*를 활용하여 코드를 작성해보았다.
    삼항연산자 = 조건문 ? 조건이 참이라면 실행할식 : 조건이 거짓이라면 실행할 식;

Refactoring Check List

[공통 내용]

  • id class명 / 변수명 / 함수명을 다른 사람도 알아볼 수 있도록 짓기
  • 가독성을 위한 들여쓰기 지키기

[HTML]

  • 최대한 Semantic tag를 사용하도록 노력
  • img 태그의 alt 속성을 우선 적는 습관 들이기
  • Self closing tag의 / 잊지말기

[CSS]

  • 순서에 맞게 CSS 속성 정리하기
  • CSS 선택자들 사이 한줄 띄우기
  • 불필요한 style 속성 줄이기
  • 레이아웃은 bottom-up 방식으로!

[Javascript]

  • 테스트가 완료된 console.log 삭제
profile
연정
성장형 프론트엔드 개발자
다음 포스트

westagram cloning project -2

0개의 댓글