TIL. Refactoring

⏺ 리팩토링이란?

코드의 구조를 조직적, 체계적으로 향상시키는 과정이다. 리팩토링을 통해 코드의 가독성과 확장성을 갖추고, 이를 통해 지속적인 유지보수가 가능하게 하는 것이다.
결국 리팩토링을 통해 군더더기 없이 깔끔하고, 다른 개발자들에게도 명백한 코드를 갖추는 것이 목표라 할 수 있다.

❓깔끔한 코드란?

• 모든 테스트를 통과한다.
• 다른 프로그래머에게도 그 의미가 명백하다.
• 중복이 존재하지 않는다.
• 꼭 필요한 클래스만 가진다.
• 더 적은 비용, 시간으로 유지보수 할 수 있다.

✅ 리팩토링 체크리스트(Basic, HTML, CSS)

• 세션시간에 배웠던 리팩토링 체크리스트를 정리해둔다.
• JavaScript에 대한 리팩토링 체크리스트도 공부하고 추후에 추가해두어야겠다.

⏺ Basic

1. console.log 지우기

• 코드의 테스트를 위한 console.log는 꼭 지우자.
  (최종 코드에선 자리만 차지하는 불필요한 텍스트만 될 뿐이다.)

2. id ﹒ class명, 변수명, 함수명

• 직관적인 이름을 짓자.
• 코드의 기능을 파악할 때는 코드 하나하나를 정독하며 알기에는 시간이 없다. 각종 이름으로 기능을 유추하고 힌트를 얻어 코드를 읽는다면 코드를 파악하는 시간이 훨씬 줄어들 것이다.

3. 들여쓰기

• 규칙적인 들여쓰기는 가독성 측면에서 중요하다

⏺ HTML

4. Semantic Tag의 사용

• Semanticc Tag의 사용은 가독성뿐 아니라 SEO(검색엔진최적화) 및 접근성을 갖추기 위해 필수적이다.

5. img tag alt 속성

• 이미지가 로딩되지 않을 경우 alt 속성이 보이며, SOE와 시각적으로 페이지를 읽을 수 없는 계층을 위해 필수적으로 적어두어야 한다.

<img alt="Dog Picture" src ="https://i.pinimg.com/originals/7e/82/b1/7e82b177741920e753b7cb1dd58988d8.jpg">

6. Self Closing Tag

• <br>, <hr>, <img>, <meta>, <link>, <input> 태그는 Self Closing Tag들이니 닫는태그를 추가적으로 사용하지 않는다.

⏺ CSS(리팩토링의 꽃)

7. CSS속성 순서

• 레이아웃에 영향을 주는 순서대로 인접속성끼리 묶어서 작성한다. (큰 그림 -> 작은 그림, 위치 속성 -> Decoration 속성 순으로 작성한다.)
• 권장순서는 다음과 같다.
  (권장순서에 없는 기능이라도, 어떤 범주에 속하는지 생각해보면 순서를 알 수 있다.)

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-tranform)
5. Misc Properties(cursor, overflow, z-index)

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

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

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

• block 요소에 불필요하게 display:block, width 100%를 부여하는 것.
• HTML Tag들이 어떤 default css value를 가지는지 확인하여 불필요한 style 속성은 🙅‍♀️
  (default css value 참고자료)
  https://www.w3schools.com/cssref/css_default_values.asp

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

• 레이아웃을 작성할때 부모요소 -> 자식요소 순으로 높이를 미리 정하는 top-down 방식이 아닌, 자식요소 높이에 따라 부모요소의 높이가 유동적으로 결정될 수 있는 bottom-up 방식 구성

🤔 리팩토링에 대한 착각과 나의 생각

• 리팩토링을 통해 새로운 기능이 추가되지는 않는다. 리팩토링은 개발(서비스)의 기능을 만들고 수정하는 과정과는 다른 영역이다.
  (어찌보면 당연한 얘기지만 ~~나만 착각할 것 같아서 적어둔다.)
• 한번 만들어진 코드는 서비스가 없어지지 않는 한 지속적으로 여러 개발자들에 의해 수정과 개선과정을 거친다. 자기가 만들거나 수정했던 코드는 결국 다른 개발자들과 마주하기 때문에 리팩토링은 개발자로서 책임감과도 같다.
• 개발의 많은 부분은 기능구현에 초점이 맞춰져 있다고 생각한다. 솔직히 개발할때 원하던 기능을 구현해서 쾌감을 느끼지, 코드를 깔끔하게 잘짰다고 쾌감을 느끼진 않을 것이다. 그러나 리팩토링을 알면 알수록 기능 구현만큼 개발업무에 있어 중요함을 깨닫는다. 실무에서 리팩토링이 업무의 얼마나 많은 부분을 차지 할진 모르겠지만, 교육 기간 동안 리팩토링도 개발에 필수적인 프로세스임을 새기고 꾸준히 해야겠다.