[JavaScript] Self-Refactoring Checklist

안정현·2021년 4월 25일

JavaScript Self-Refactoring

리팩토링은 무엇인가?
소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법

리팩토링은 왜 하는가?
1) 유지보수가 쉽도록
2) 확장성 있도록
3) 불필요한 복잡함이 없이 가독성 향상 되도록

1. console.log 지우기

console.log는 테스트를 할 때는 필수적이지만 최종 결과물에는 들어가면 안된다.

코드의 가독성, 다른 팀원을 위한 기본적인 배려 차원에서 console.log를 지우는 것은 개발할때 가장 기본적인 컨벤션이다.

2. id, class 이름, 변수명, 함수명

요소(element)에 id 혹은 class 를 부여하는 경우 의미가 직관적으로 드러날 수 있도록 한다.

코드는 쓰는 경우보다 읽히는 경우가 훨씬 많다.
id, class를 비롯해 자바스크립트 변수명, 함수명을 짓는게 처음엔 쉽지 않기 때문에 지금부터 고민해서 작성하는 습관을 반드시 들이자.
네이밍은 각각이 어떤 의미를 나타내고 있는지 명확하고 직관적으로 이해가 되도록 가독성 있게 지어야 한다.
개발자가 보내는 시간 중 90%는 모두 코드를 읽고 해석하면서 시간을 보낸다고 한다.
따라서, 내가 짠 코드를 미래의 내가, 그리고 협업하는 다른 팀원들이 읽기 쉽게 만드는 일은 가장 기본이면서 가장 중요한 일이다.

3. Sematic tag의 사용

HTML에는 다양한 태그가 존재하며 그 중에서도 Semantic tag를 적절하게 사용하는 것이 가독성 측면에서도, SEO(검색엔진 최적화) 측면에서도 너무나 중요하다.

무조건적으로 div 태그를 남발하기 보다는 상황에 맞게 적절한 태그를 사용할 수 있도록 해야 한다.
HTML은 웹브라우저가 읽을 수 있는 문서를 작성하기 위해 사용한다.
문서는 명확히 어떤 정보를 나타내고 있는지 알 수 있어야 가치있는 문서라고 할 수 있다.
HTML에서는 Tag를 이용해서 문서의 각 부분이 어떤 의미를 지니고 있는지 표시(마크업)할 수 있다.

<article>
  <h1>HTML</h1>
  <p>
    HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고,
    우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
    이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다.
  </p>
</article>

이처럼 Semantic tag를 작성해서 사용하면 사람과 웹 브라우저 모두 읽기 편해진다.
검색엔진들 또한 우리의 문서가 어떠한 정보를 표시하고 있는지 명확히 알 수 있게되어 사용자가 "HTML" 이라는 단어를 검색했을 때 우리의 페이지를 검색결과에 노출시켜 줄 수 있다.

4. css 속성 순서

css 속성은 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성해 주는 것이 좋다.

css 속성 작성 순서는 성능향상이나 적용 순서에 유의미한 영향을 주지는 않는다.
하지만 우리는 수많은 css 속성을 작성하게 되므로, 이런 css 속성이 뒤죽박죽 섞여있다면 특정 속성이 어디에 작성되어 있는지 찾기가 힘들 것이다.
따라서, css 속성은 레이아웃에 영향을 많이 주는 순서대로 , 인접 속성끼리 묶어서 작성해 주는 것이 좋다.
권장되는 속성 순서는 아래와 같다.
(1) Layout Properties (position, float, clear, display)
(2) Box Model Properties (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)

5. Self Closing Tag

Self Closing이 가능한 Tag들은 Self Closing을 적용시킨다.

HTML Tag는 일반적으로 여는태그 <div> 와 닫는태그 </div> 로 이루어져 있다.
하지만, 열고/닫는 태그 없이 스스로 닫을 수 있는(Self Closing) Tag들이 있다.

<!-- Bad  -->
<input type="password"></input>

<!-- Good  -->
<input type="password" />

이런 태그들을 굳이 열고 닫으면 쓸데없이 가독성을 해칠 수 있다.
아래는 Self Closing을 적용할 수 있는 단일 태그들의 목록이다.
(1) <br>
(2) <hr>
(3) <img>
(4) <meta>
(5) <link>
(6) <input>

6. img alt 속성

img 태그에 들어가는 alt 속성은 아래와 같은 이유로 매우 중요하다.

이미지가 로딩되지 않을 경우 alt 속성에 적힌 값이 보여짐
시각장애인의 경우 alt 속성을 통해 어떤 이미지가 보여지는지 알 수 있음
SEO(검색엔진 최적화)에서 어떤 img인지 인식하는 코드는 alt 속성임

따라서, 위와 같은 이유로 alt 속성은 중요하기 때문에 src속성보다 먼저 작성하는게 좋다.

7. 들여쓰기

프로그래밍 언어에서 일정하게 규칙성 있는 들여쓰기는 가독성 측면에서 매우 중요하다.

들여쓰기가 없다면, 각 요소들(elements)이 어떻게 구분되어있는지 파악하기 어렵다.
또한, 들여쓰기가 각자 규칙성 없이 중구난방으로 되어 있다면 읽기 어렵다.
모두 균일한 너비로 들여쓰기가 되어 있다면, 각 요소들이 얼마나 nesting(내포화) 되어 있는지 파악하기 쉽다.
자바스크립트에서는 2칸 들여쓰기를 컨벤션으로 정하고 있다.

8. 다른 CSS 선택자들 사이 한줄 띄우기

각자 다른 css 선택자들 사이에는 한 줄씩 공백을 주는게 가독성 측면에서 좋다.

우리는 css 파일에서 수많은 선택자를 사용해서 html 요소를 특정하고 스타일을 입힌다.
수많은 선택자들이 공백없이 다닥다닥 붙어있다면 요소들이 구분되어 있는지 확인하기 쉽지 않다.

9. 불필요한 style 속성 작성 지양

불필요한 style 속성은 작성할 필요가 없다.

가장 흔히 하는 실수는 아래와 같다.
(1) block 요소에 불필요하게 display:block; 을 부여하는 것
(2) block 요소에 불필요하게 width:100% 를 부여하는 것
<div>, <article> 등 수많은 요소는 이미 display:block 을 default style로 적용하고 있다.

이러한 tag들에 display:block 을 선언해줘서 불필요한 코드를 작성하고, 그로 인해 가독성을 해칠 필요는 없다.