어느 덧 벌써, 패스트캠퍼스x야놀자 부트캠프를 진행한지 한달이 됐습니다.
몰랐던 많은 것들을 배우고 멘토님들에게 조언을 받으면서 성장도 많이 했지만 어려움도 겪었습니다.
한달 정도 되니 1차 과제를 HTML/CSS만을 이용해서 클론코딩을 진행하였고, 저는 당근마켓을 클론코딩 하기로 했습니다.
과제를 제출하고 멘토님들과 여러 부트캠프 수강생들의 코드리뷰를 받고 리팩토링 하기로 했는데요.
과정을 글로 남겨서 이전 코드와 리팩토링 후의 코드가 어떠한지 비교해보겠습니다.
과제 소개
클론한 사이트 : https://www.daangn.com/
과제 사이트 : https://kyungkyubae.github.io/Y_FE/
우선 저는 과제하면서 다음과 같은 부분을 중점으로 두고 클론코딩을 진행해봤습니다.
- 시맨틱 태그를 BEM규칙으로 CSS 네이밍하기
- 실제사이트의 레거시 코드활용보단 최신의 CSS Flex , Grid를 사용하기
중고나라 인기매물부분을 실제사이트에서는 Flex로 활용하였지만 본프로젝트에서는 Grid로 구현하였습니다. - JS가 필요한 부분은 되도록 생략하되 HTML/CSS로 구현할 수 있는 기능이 있다면 최대한 구현하기
HTML/CSS 없이는 구현을 못한다고 생각한 부분과 이유 : 헤더의 검색하기 인풋은 입력값을 주었을 때 검색하는 로직이 없다면 CSS,HTML 만으로는 구현 불가하다고 생각했습니다.
리팩토링
과제를 제출하고 보니 만들때는 보이지 않았던 문제들과 멘토님의 리뷰,그룹스터디 조원들의 조언을 받으면서
다음과 같은 리팩토링을 진행하였고,
어떠한 부분에서 안좋았는지 리팩토링 하고 나면 어떠한 부분에서 개선이 일어나는지 비교해보겠습니다.
기존코드
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/28bd22dfd8.js" crossorigin="anonymous"></script>우선 기존 코드에서 script파일을 body태그 최하단에 작성하지 않았고, head태그 안에서 사용하였습니다.
이렇게 될 경우 아래와 같이 렌더링이 실행되고, render-blocking resources 현상이 나는것을 알았습니다.
1.DOM 렌더링 중 위 element 만남
2.DOM 렌더링 멈추고 render thread에서 파일 다운로드 및 실행
3.DOM 렌더링 재개
그래서 이를 보완하기 위해 스크립트 파일을 비동기적으로 실행하거나,
body태그 최하단에서 사용하여 원하지 않는 DOM 렌더링중에 멈춰서 스크립트 파일을 읽지않도록 하였습니다.
수정코드
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="https://kit.fontawesome.com/28bd22dfd8.js" crossorigin="anonymous"></script>이전코드
<body>
<header>
<div class="header container">
<div class="header--left"> 과제 진행중에 클래스 네이밍을 BEM규칙을 사용하여 네이밍하기로 했습니다.
사용중 header의 왼쪽 오른쪽 부분을 위와 같은 방식으로 네이밍하려고 했으나,
header--left는 상태를 변경하는 네이밍으로 규칙에 적합하지 않은것 같아
header__name 형태로 리팩토링 하였습니다.
수정코드
<body>
<header>
<div class="header container">
<div class="header__navbar">헤드태그 무분별한 h1 사용
<section class="main__home--second container">
<img src="./img/home-second.png" alt="" class="home__img--second main__img">
<div class="home__content--second">
<h1 class="home__title--second">우리 동네<br>중고 직거래 마켓</h1>기존에 너무 무분별한 h1 태그를 사용한 것 같아서 heading level을 알아보고,
태그를 수정하였습니다.
다음은 heading level의 예시입니다.
-
중요도에 따라 6단계로 구분하며, h1 요소부터 h6 요소로 순서로 중요도가 부여된다. 헤딩을 부여한다는 것은 중요도에 따라 콘텐츠 순위를 매긴다는 것을 의미한다.
-
브라우저는 중요도가 높은 헤딩을 중요도가 낮은 헤딩보다 더 크고 굵은 글자로 표현하고 스크린리더는 헤딩 레벨을 통해 제목의 중요도를 청각적 위계로 표현한다. 특히 스크린리더는 헤딩에서 헤딩으로 건너뛸 수 있는 기능이 있기 때문에 본문을 일일이 읽지 않아도 원하는 내용을 찾아다닐 수 있다.
-
가장 중요한 콘텐츠의 제목에 h1 요소를 부여한다.
중요도에 따라 h2~h6 요소를 부여하며, 헤딩의 중요도가 차례로 이어질 수 있도록 한다.
에러해결 및 느낀점
리팩토링을 진행하면서 사용자의 입장에서는 기능에 문제가 없더라도 코드 내부적으로 많은 부분이 잘못되어있어서 가독성이나 다른 문제점이 생길 수 있는 부분이 많다는 것을 느꼈습니다.
또한 리팩토링을 하면서 코드를 내가 코딩했던 코드들을 다시보면서 내 코드를 내가 봄에도 많이 헷갈리는 부분을 느꼈고 이부분을 다시 겪지 않으려면 어떤 스타일의 코딩을 지향해야 가독성이 좋은지도 알았습니다.
무언가를 코딩하였을때 거기서 끝나는 것이 아니라, 꾸준히 리팩토링을 하고 문제점을 찾아야
수준높은 코딩이 될 것 같다고 느꼈습니다.
