Refactoring

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

Refactoring의 목적

주기적인 리팩토링은 통해 깔끔한 코드를 만들고, 코드의 수명을 늘릴 수 있음

프로그램 업데이트 시 기존 코드를 수정하여 만드는데, 이 때 기존 코드가 정리되어있지 않으면 작업이 어려워진다. 그리고 손을 댈 수 조차 없을만큼 더러운 코드는 수명을 다하게 되기 쉽다.

실제 예시) 더러운 레거시코드 : 과거의 개발자들이 만든 손을 댈 수 없을 정도로 더러운 코드...

Refactoring 방법

좋은 코드를 쓰려면 좋은 코드가 무엇인지 알아야 한다
code review 과정을 거치며 좋은 코드에 대한 눈을 기를 수 있다

하지만 코드 리뷰 이전에 리팩토링 과정을 몇번 거쳐야한다
리팩토링을 하지않은 코드 리뷰는

1. 읽는 사람에게 짜증을 유발하고
2. 혼자서 한번만 더 생각해봐도 될 문제들을 지적받아 나에게 도움이 되지 않고
3. 좋은 토론의 기회가 사라지고, 실제 중요한 문제들을 놓치게 된다

→ 셀프 리팩토링을 한 이후에 코드 리뷰를 진행한다

리팩토링 가이드

1. console log 지우기

2. 이름 잘 짓기, id class 변수 함수명

   개발자가 코드를 짜는 시간은 10%, 90%는 코드를 읽고 해석

3. 들여쓰기 : 2칸(js) 잘 맞춰주기

4. HTML

• Semantic Tag 사용

• img tag alt 속성 : alt 속성은 중요하기 때문에 src 속성보다 먼저 작성하는게 좋습니다.

• Self Closing Tag은 항상 self closing으로 써라

5. CSS: CSS가 유지보수 더 힘듦.... 서로 영향을 미침

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

• 권장 속성 순서
  - Layout : position, float, clear, display
  - Box Model : width, height, margin, padding
  - Visual : color, background, border, box-shadow
  - Typo : font, text
  - Misc : cursor, overflow, z-index
  

• 불필요한 style 속성 작성 지양 : 디폴트 값 쓰지 않기

• 레이아웃은 bottom-up 방식으로 구성
  : 최하위 요소부터 height을 정해두고 부모요소의 높이가 유동적으로 결정되는 방식으로 구성하기 (부모요소 높이 고정하면 자식요소가 추가되거나 바뀌면 유동적으로 변화하지 않음)
  

• ✨ 안좋은 주석 없애기 : 코드를 설명하는 주석 등