Refactoring(리팩토링)

younghyun·2022년 2월 10일

Code Refactoring

코드 가독성과 확장성 좋게 만드는 작업. 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록, 내부 구조를 변경하는 기법.
유지보수를 용이하게 하기 위해서는 코드의 가독성과 확장성이 좋아야 함.
개발자 도구 활용해서 의미없는 속성 골라내는 것도 좋은 방법

장점
장기적으로 보면 리팩토링 하는 게 전체 프로젝트 시간을 아낄 수 있음

console.log 지우기!

id ・ class명, 변수명, 함수명 직관적으로 짓기

개발자가 보내는 시간 중 코드를 짜는 시간은 10% 밖에 안됨. 90% 시간은 모두 코드를 읽고 해석하면서 시간을 보냄. 내가 짠 코드를 미래의 내가, 그리고 협업하는 다른 팀원들이 읽기 쉽게 만드는 일은 가장 기본이면서 가장 중요한 일.

들여 쓰기

semantic tag사용

Semantic Tag를 이용해서 HTML을 작성하면 SEO 최적화, 접근성 향상, 가독성 높은 코드 등의 이점을 얻을 수 있음.

종류
<form>, <table>, <img>, <header>, <nav>, <aside>, <section>, <article>, <footer>, <details>, <figcaption>, <figure>, <time>, <summary>, <main>, <ul>, <li>

img태그 alt속성

alt 속성은 중요하기 때문에 src 속성보다 먼저 작성.

순서
alt > class > src

사용 이유

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

Self Closing Tag

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

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

종류
<br />, <hr />, <img />, <meta />, <link />, <input />

CSS 속성 순서

레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성

사용이유

CSS 속성은 작성 순서는 성능향상이나 적용 순서에 유의미한 영향을 주지는 않음
우리가 작성한 수많은 css 속성들이 규칙없이 뒤섞여 있다면, 원하는 속성이 어디에 있는지, 이 선택자에 어떤 속성이 적용되고 있는지 한눈에 파악하기 힘들어짐.
CSS는 서로 영향을 미치는 구조로 이루어져 있고, 이 연관관계가 코드가 길어질수록 복잡해짐. 이러한 이유로, CSS 유지보수가 Javascript 유지보수보다 힘듦.

권장 순서

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 선택자들 사이 한줄 띄우기

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

.login-btn {
  height: 2.5rem;
  margin: 0.625rem 0px;
  border: 0;
  border-radius: 0.3125rem;
  background-color: var(--disabled);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9375rem;
}

.find-password {
  margin: 3.75rem 0 1.25rem 0;
  color: #00376b;
  text-align: center;
  font-size: 12px;
}

.enabled-btn {
  background-color: var(--enabled);
  cursor: pointer;
}

.disabled-btn {
  background-color: var(--disabled);
  cursor: default;
}

불필요한 style 속성 작성 지양

block 요소에 불필요하게 display:block; 을 부여. block 요소에 불필요하게 width:100% 를 부여.

참고 자료 : CSS Default Values Reference

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

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

이유

레이아웃을 구성할 때 부모요소의 크기를 고정적으로 정해둔다면, 자식요소의 크기가 변함에 따라서 부모요소의 크기가 유동적으로 변하지 않음.
이런 상황에서 만약 자식요소의 크기가 변해야 한다면, 부모요소의 CSS도 같이 수정해줘야 하는 불편함이 있음.
이런 구성이 겹겹이 쌓인다면 추후에 CSS 유지보수가 매우 힘들어짐.
CSS 유지보수가 Javascript 유지보수보다 힘듦.

// bad
.feedList {
  height:100vh;
}

.feed{
  height:300px;
}

// good
.feedList {
  padding-top:20px;
}

.feed{
  height:300px;
}

bad예시는 여러 feed들을 감싸고 있는 feedList에 고정height를 부여함. feedList가 안에 feed가 몇 개나 생성될 지 모르기에 feedList 크기는 feed의 개수에 따라서 유동적으로 조정되어야 함.
하지만 feedList는 고정 height를 가지고 있으므로, 자식요소의 크기에 따라서 부모의 크기가 유동적으로 조정이 안되고 있음.

good의 예시를 보면 feedList에는 고정 height를 부여하지 않음. 이 경우에는 feedList의 크기가 자식요소의 크기만큼 자동으로 조정됨.
feedList의 높이가 내부의 자식요소의 높이 + 20px(padding-top 값) 로 유동적으로 변함.

참고도서 : 리팩토링 2판 ( 저자: 마틴 파울러 )