[패스트캠퍼스 X 야놀자 : 프론트엔드 개발 부트캠프] HTML/CSS 과제 리팩토링

현재 참여중인 패스트캠퍼스 X 야놀자 : 프론트엔드 개발 부트캠프의 과정 중 하나로 HTML/CSS 클론 코딩 과제를 수행하였다.

나는 인터파크 페이지의 클론 코딩을 진행하였고, Javascript는 사용하지 않고 HTML과 CSS로 구현가능한 범위내에서 과제를 수행하였다. (클론코딩 링크)

이후, 담당 멘토님에게 코드리뷰를 받았고 오늘 코멘트 남겨주신 내용을 바탕으로 코드 리팩토링을 진행하였다.

코멘트를 남겨주신 내용과 리팩토링 과정은 다음과 같다.

1. ID 선택자 대신 Class 선택자를 활용해 볼 것
   
   id선택자는 유연성이 없고 재활용이 불가능하기 때문에 가능하면 class선택자를 활용하는 것이 좋다.

2. Class 네이밍 시 케밥케이스와 카멜케이스를 섞어서 쓸 경우 어색함 뉘앙스를 주기 쉽다.
   
   content-today-bannerList와 같이 케밥케이스와 카멜케이스를 섞어서 쓸 경우 어색한 느낌을 주기 때문에, -나_로 이어서 적어주는 것이 좋다.

3. img 태그의 src 속성 등, 경로를 추가 할 땐 상대 경로로 추가 할 것
   
   배포 환경에 따라 절대경로로 경로를 줄 경우 제대로 파일을 가져오지 못하는 경우가 있다. 상대경로의 경우 같은 프로젝트일 경우 동일하기 때문에 배포 환경에 따른 이슈를 줄여 줄 수 있다.

4. 필요한 dom만 그렸는지 체크 (불 필요한 wrapper 체크 해보기)
   
   위 코드의 content-today 의 경우 따로 준 css 속성도 없을뿐더러 그 자식 요소에 div요소가 하나뿐이기 때문에 불필요한 wrapper이다. 이외에도, ul태그에 불필요하게 div를 감싸주는 경우도 많았다. 나의 코드에서 div에 준 CSS 속성을 ul에 주어도 무방하였기 때문에 속성을 옮겨주고 불필요한 wrapper는 삭제해 주었다.

5. 태그 선택자는 사용을 지양할 것
   
   브라우저는 CSS 선택자를 오른쪽에서 왼쪽으로 읽어나가며 DOM을 파싱한다. 이때, 태그 선택자의 경우 전체 코드에서 해당 선택자를 모두 찾는 과정이 들어가기 때문에 불필요한 연산을 수행하게 될 수 도있다. 따라서 태그 선택자의 사용을 지양하고 클래스 선택자를 활용 해야겠다.

6. 여러 선택자를 동시에 적용시키키 보다는 하나의 클래스를 만들어 여러 요소에게 할당 할 것
   
   같은 속성을 지정할 요소라면 하나의 클래스를 만들어 적용시키는 것이 불필요한 선택자 사용을 줄여줄 수 있고, 가독성 측면에서도 좋다.

7. 이외, 불필요한 속성, 정의 등이 있는지 체크해 볼 것
   
   이외, a태그에 pointer: cursor를 준다던가 필요하지 않는 position 속성을 주었다거나 하는 경우가 많아 지워주었다.

대부분, 나의 평소 코딩 습관에서 비롯된 코멘트가 많았던거 같다. ID, Class 부여 규칙, 네이밍 방법, wrapper 남발 등등 전 직장에서 빠르게 일을 끝내기 위해 크게 신경쓰지 않았던 부분들이었는데, 내가 다시 내 코드를 보았을때도 필요하지 않거나, 어색하게 코드를 작성하는 부분들이 많았던거 같아 반성하였다.