Refactoring이란?

• 코드의 가독성과 확장성을 좋게 만드는 작업
• 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록, 내부 구조를 변경하는 기법

How?

id ・ class명, 변수명, 함수명

id ・ class, 변수명, 함수명에서 의미가 직관적으로 드러나게 작성해야 한다. 코드는 쓰는 경우보다 읽히는 경우가 훨씬 많다.

주석은 최소화

주석은 코드로는 도저히 설명할 수 없는 내용을 주석으로 처리하는 것이 좋다. javascript의 경우 기능 설명은 함수명으로 할 수 있다.

HTML

Semantic Tag의 사용

Semantic Tag를 이용해서 HTML을 작성하면 사람과 웹 브라우저 모두 읽기 편해진다. 따라서, SEO 최적화, 접근성 향상, 가독성 높은 코드 등의 이점을 얻을 수 있다.

img tag alt 속성

img 태그를 사용할 때는 아래와 같은 이유로 반드시 alt 속성을 부여해주어야 한다.

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

<img alt="logo" src="logo.png" />

CSS

CSS 속성 순서

CSS 속성은 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성해주는게 좋다.
권장되는 속성 순서는 아래와 같다.

• Layout Properties (position, float, clear, display)
• Box Model Properties (width, height, margin, padding)
• Visual Properties (color, background, border, box-shadow)
• Typography Properties (font-size, font-family, text-align, text-transform)
• Misc Properties (cursor, overflow, z-index)

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

.enabled-btn {
    cursor: pointer;
}
----------한 줄 띄우기----------
.disabled-btn {
    cursor: default;
}

불필요한 style 속성 작성 지양

예) block 요소에 불필요하게 width:100% 를 부여하는 것

참고: CSS Default Values Reference

레이아웃은 bottom-up 방식으로 구성

레이아웃을 구성할 때 부모요소의 높이를 미리 정해두고 자식요소의 크기를 정하는 top-down 방식이 아닌, 자식요소의 높이에 따라 부모요소의 높이가 유동적으로 결정되는 bottom-up 방식으로 구성해야 한다.