패스트캠퍼스X야놀자 프론트엔드 부트캠프 과제 리팩토링(1)

https://fastcampus.co.kr/b2g_MegabyteSchool_frontend

패스트캠퍼스 X 야놀자 : 프론트엔드 개발 부트캠프 | 패스트캠퍼스

패스트캠퍼스 X 야놀자 프론트엔드 첫 번째 과제로 HTML과 CSS를 활용한 클론코딩을 수행했다. 
23.07.24~23.07.28 까지 JS를 제외한 HTML과 CSS 위주로 내가 고른 웹 사이트를 똑같이 구현해보는 시간을 가졌다

1. 과제 내용 

1) 과제 설명

: 주어진 기간 동안 원하는 사이트를 골라 똑같이 사이트를 구현하는 클론코딩 과제였는데 내가 구현하고자 했던 사이트는 인터파크 사이트이다. flex와 grid를 활용할 수 있는 사이트일 것 같아서 선택하게 되었다. 

https://www.interpark.com/

인터파크

2) 과제 요구 사항 

• 실제 사이트와 비교할 수 있게 실제로 서비스를 배포하고 접근 가능한 링크를 함께 첨부해야 한다.
• READ.md 파일 제공해야 한다.
• 시멘틱 태그를 최대한 활용해보자.
• BEM 방법론을 도입해보자. 
• 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보자.

3) 과제 구현 

: Flex와 Grid를 많이 사용 했고 그 중 Flex를 사용해서 수직, 수평 정렬을 하기 위해 노력 했다. 실제 깃허브 페이지로 배포한 링크는 다음과 같다.

https://jongsujin.github.io/fastcampusfirst/

KD0_진종수_클론코딩

2. 제출 후 느낀 점

"가야할 길이 멀다는 점과 내 실력이 부족하다는 점을 배웠지만 반대로 더 노력하면 성장할 수 있겠다" 

이 과제를 처음 접하고 나서 나름 자신감이 있었다. 그래도 이젠 HTML과 CSS에 익숙해졌겠지라는 생각으로 여유롭게 생각하면서 임했던 것 같다. 그러나 점점 진행하면서 내 생각대로 안되는 것들이 너무 많았고 그런 점들을 하나하나 고치고 생각하다보니 어느새 제출 기한이 다가옴을 느끼며 스스로에 대한 부족함과 겸손해야함을 다시 한 번 느꼈다. 

 

특히 Position 개념에 대해 막연하게만 알고 있었던 것 같다. 실제로 코드로 적용하려니 어떻게 해야할 지 감이 오지 않아 이 부분을 계속 검색하며 찾았던 것 같다. 또한 버튼의 구성과 여백 등 모든 부분을 실제 사이트와 동일하게 하려다 보니 생각보다 1px 단위가 굉장히 크고 중요함을 깨달았다. 프론트엔드 개발자의 덕목은 꼼꼼함이란 점 또한 다시 한 번 배웠다. 

 

3. 멘토님과 팀원들의 피드백

1) 주요 피드백 내용

 : 멘토님과 그룹스터디 팀원들이 함께 내가 날린 PR에 코드리뷰를 해주었다. 다른 사람들이 어떻게 했는 지 또 내 코드와 비교 했을 때 다른 점이 무엇인지 등에 대해 배울 수 있었고 팀원 분들이 굉장히 잘하셔서 많은 자극을 받게 되었기도 하다. 멘토님의 세심한 피드백을 통해 무엇이 문제인지 배울 수 있었고 아래 피드백을 참고하여 리팩토링을 할 수 있었다. 

• 네이밍규칙이 아쉽다. BEM 방법론 등을 참고해서 네이밍 규칙을 고려하면 좋겠다. 
• cursor 요소를 추가해서 버튼임을 알려줄 수 있게 해주면 더 좋았을 것 같다.
• id는 최대한 지양하되 같은 id를 쓰면 안된다. 
• JS를 사용하여 슬라이드 기능을 구현해보면 좋겠다.

4. 리팩토링 

그래서 23.08.07 과제에 대한 리팩토링을 하게 되는 시간을 가졌는데 위에서 언급한 피드백을 중심으로 달라진 점을 기존 코드와 비교하고자 한다. 

1) 네이밍 규칙 수정 

: 기존에는 camelCase를 사용해서 작성했는데 BEM 방법론이 통용된다는 점에 배웠고 이 부분을 토대로 네이밍 수정을 거쳤다. 

※  camelCase로 작성한 기존 코드 

<div class="headerContainer">
            <div class="logoSearchContainer">
                <div class="logoContainer">
                    <img id="logoIcon" src="/Y_FE_HTML_CSS/assets/icons/logo.svg" alt="logo">
                </div>
                <div class="searchContainer">
                    <input type="text" placeholder="해외여행 1등은 크다, 인터파크-다"/>
                    <img class="searchIcon" src="/Y_FE_HTML_CSS/assets/icons/btn_search.6cba72a7.svg" alt="search">
                </div>
            </div>
            <div class="signUp">
                <ul class="signUpList">
                    <li>로그인</li>
                    <li>회원가입</li>
                    <li>마이페이지<i class="fa-solid fa-chevron-down" style="color: #747474;"></i></li>
                </ul>
            </div>
        </div>

※  BEM 방법론으로 작성한 기존 코드 

 <div class="header__container">
            <div class="header__logo-search">
                <div class="logo-search__logo">
                    <img id="logoIcon" src="/Y_FE_HTML_CSS/assets/icons/logo.svg" alt="logo">
                </div>
                <div class="logo-search__search">
                    <input type="text" placeholder="해외여행 1등은 크다, 인터파크-다"/>
                    <img class="search__icon" src="/Y_FE_HTML_CSS/assets/icons/btn_search.6cba72a7.svg" alt="search">
                </div>
            </div>
            <div class="signUp">
                <ul class="signUp__list">
                    <li>로그인</li>
                    <li>회원가입</li>
                    <li>마이페이지<i class="fa-solid fa-chevron-down" style="color: #747474;"></i></li>
                </ul>
            </div>
        </div>

2) cursor 요소 추가 

: 기존에 추가하지 않았던 탭이나 바로 가기 등에 커서를 두었을 때 pointer를 입력하지 않았는데 이 부분을 수정했다.

 

※  cursor 요소를 작성하지 않았던 기존 코드  

.search__icon {
    position: absolute;
    width:32px;
    height:24px;
    top:10px;
    right: 10px;
}

※  cursor 요소를 추가한 새로운 코드  

.search__icon {
    position: absolute;
    width:32px;
    height:24px;
    top:10px;
    right: 10px;
    cursor: pointer;
}

.go-button button{
    border:1px solid #d9d9d9;
    border-radius:20px;
    width:200px;
    height:50px;
    font-weight: bold;
    background-color: transparent;
    cursor:pointer;
}

3) id를 class로 수정 완료

: 복붙하다 발생한 실수였지만 이러한 것들 또한 꼼꼼하게 보지 못한 점이 스스로에게 아쉬웠다. 한 번에 많은 코드를 과제 기한 얼마 남지 않고 새로 작성하다보니 시간에 쫓겼던 것 같다. 다음 부터는 자세히 살펴 봐야겠다.

 

※  id를 사용한 기존 코드  

 <div class="tabButton">
                    <button id="btn1">뮤지컬</button>
                    <button id="btn2">콘서트</button>
                    <button id="btn3">연극</button>
                    <button id="btn4">클래식/무용</button>
                    <button id="btn(5)">스포츠</button>
                    <button id="btn(5)">레저/캠핑</button>
                    <button id="btn(5)">전시/행사</button>
                    <button id="btn(5)">아동/가족</button>
                </div>

※  id를 class로 수정한 새로운 코드

div class="tab__button">
                    <button class="btn-9">뮤지컬</button>
                    <button class="btn-10">콘서트</button>
                    <button class="btn-11">연극</button>
                    <button class="btn-12">클래식/무용</button>
                    <button class="btn-13">스포츠</button>
                    <button class="btn-14">레저/캠핑</button>
                    <button class="btn-15">전시/행사</button>
                    <button class="btn-16">아동/가족</button>
                </div>

4) JS를 활용한 슬라이드 기능 구현 

: swiper 라이브러리를 활용해서 슬라이드 기능을 구현 했다. 버튼과 슬라이드에 들어갈 아이템들을 각각의 swiper-slide로 묶어서 구현해주었다. swiper 라이브러리는 상위 클래스 순으로 이름을 swiper-container -> swiper-wrapper -> swiper-slide로 해줘야 한다는 점이 특징이다

※  class 이름 수정한 새로운 HTML & Javascript 코드 

 <div class="main__container">
          <div class="slide__button">
            <div class="slide__button--prev">
                <i class="fa-solid fa-chevron-down fa-rotate-90" style="color: #747474;"></i></div>
            <div class="slide__button--next"><i class="fa-solid fa-chevron-down fa-rotate-270" style="color: #747474;"></i></div>
          </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                         <img src="/Y_FE_HTML_CSS/assets/pictures/1d4431974ff84e3185acc4a5488c7b3f.png" alt="slide-picture(1)"/>
                    </div>
                 <div class="swiper-slide">
                    <img src="/Y_FE_HTML_CSS/assets/pictures/5d475dc606c44ce6876be3640e1be7f7.jpg" alt="slide-picture(3)"/>
                 </div>
                 <div class="swiper-slide">
                    <img src="/Y_FE_HTML_CSS/assets/pictures/1d4431974ff84e3185acc4a5488c7b3f.png" alt="slide-picture(1)"/>
               </div>
            <div class="swiper-slide">
               <img src="/Y_FE_HTML_CSS/assets/pictures/5d475dc606c44ce6876be3640e1be7f7.jpg" alt="slide-picture(3)"/>
            </div>
                </div>
            </div>
        </div>

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 2, 
    spaceBetween: 0, 
    sldesPerGroup:2,

    fade:true,
    loop:true,
    loofFillGroupWithBlank:true,
    navigation: {
        nextEl: '.slide__button--next',
        prevEl: '.slide__button--prev'
    }
});

5. 느낀 점 및 새로 배운 개념들 

1) 느낀 점

: 리팩토링을 하고 나니 더욱 더 코드가 깔끔해진 것 같은 기분이 든다. 아직은 부족하지만 가독성과 편의성이 커짐이 느껴졌다, 또한 swiper 라이브러리 등을 통해 슬라이드 기능도 구현해본 경험이 굉장히 뿌듯했다. 많은 점을 배우게 되는 소중한 시간인 것 같아 앞으로 활동에 더 최선을 다하고 JS에 집중적으로 시간을 쏟아야 할 것 같다.

 

2) 새로 배운 개념들

- BEM방법론

: BEM, SMACSS, OOCSS 중 하나의 방법이며 Block, Element, Modifier를 뜻한다. "__" 와 "--" 로 구분한다. 

: Block 은 문단 전체에 적용된 element 또는 그것을 담고 있는 컨테이너를 뜻한다, 중첩 가능한 점이 특징

 ex) logo / search / footer / header / nav ... 

: Element : block을 구성하는 단위며 의존적이다. 자신이 속한 block 내에서만 의미를 가진다. 

ex) search-form : block , search-from__input : element 

: Modifier : block이나 element의 속성을 담당함. 상태 등을 나타낸다. 다양한 타입이 있다.

ex) tab__item tab__item--focused

   - 불리언 타입 : --focuesed 등 처럼 수식어가 붙음, true라고 가정하고 사용 한다. 

   - 키 - 밸류 타입 : 하이픈으로 성질 - 내용 작성 

: 장점은 클래스네임만으로 마크업 구조를 알 수 있고 쉽게 요소를 찾을 수 있으며 중첩 사용을 줄일 수 있다. 

그러나 단점은 클래스네임이 지나치게 길어질 수 있단 점이 특징이다. 

 

- position 속성

: 웹 문서 안 요소들을 어떻게 배치할 지 정하는 속성, 종류는 크게 다음과 같다.

static	요소를 문서 흐름에 맞추어 배치
relative	이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치 지정
absolute	원하는 위치를 지정해 배치
fixed	지정한 위치에 고정하여 배치
sticky	위치에 따라 동작 방식 달라짐. 요소가 임계점 이전에는 relative와 동일, 그 이후 fixed와 같이 동작함

static이 기본값이며 이것을 제외한 나머지 속성값들은 top,left,bottom, right와 같이 어느 위치에 요소 위치 시킬 지 지정 가능하다! 

1) static : position 속성의 기본값, 요소를 나열한 순서대로 배치하며 float 속성 제외 다른 속성은 사용 불가하다.

2) relative : static이었을 때 배치되는 위치를 기준으로 상대적 위치 지정한다. 

 ex) static일 때 기준 왼쪽으로 부터 60px , 위쪽으로 50px에 있다면 style="top:10px; left:20px" 을 적용하면

왼쪽으로 80px , 위쪽으로 60px 위치해 있는 형식이다. top~left 속성 모두 사용 가능하다.

3) absolute : 브라우저가 문서의 흐름과 상관 없이 top, left, bottom, right 속성 값을 이용해 요소 위치시키는 방법이다. 

이 때 기준이 되는 위치는 가장 가까운 부모 요소 혹은 relatvie 인 요소이다. 

4) fixed : absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정, 그러나 relative인 제일 가까운 부모 혹은 조상요소가 아닌 브라우저 창이 기준이다. 그래서 어디로 스크롤 해도 계속 고정되어 표시 됨

5) sticky : 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다 그 이상 넘게 되면 fixed 속성과 같이 동작하게 됨

 

"항상 부족하다 느끼는 이 마음가짐을 원동력으로 삼아 점점 더 발전하는 사람으로 기억되고 싶다. "

항상 최선을 다하고자 하지만 늘 핑계로 타협하는 현실을 다시 한 번 자극시켜준 좋은 과제가 된 것 같다. 남들보다 부족한 만큼 두 배로 더 노력해야겠다.