Code Refactoring에 대해 알아보자
Code Refactoring?
결과의 변경없이 코드 내부의 구조를 바꾸는 걸 의미하며, 외부 화면이 바뀌거나 기능이 달라지는 작업이 아닌 코드의 가독성과 유지보수성을 높히기 위한 작업이다
Refactoring 작업은 언제 해야하나요?
구글링 결과, 자신의 개발 루틴에 따라 하는 경우가 많은 것 같다
누구는 코드를 작성하면서 틈틈히 하고, 누구는 한 기능을 완성한 후에 하고, 누구는 직접 읽었을 때 이해가 안되는 코드가 되었을 때 한다고 한다
그러므로 나만의 개발 루틴을 만들고 적절히~ 잘~ 해야한다 😅
Refactoring 작업
대부분 코드 중 불필요한 부분을 없애는 작업이다
잘 확인하고 작성한 코드에 적용해보도록 하자
HTML
시맨틱 태그 작성
Refactoring의 이유 중 하나는 바로 가독성이다. 시맨틱 태그는 엔진 최적화, 웹 접근성 등의 이점이 있지만 그 외에도 가독성 측면에서도 이점이 있다
때문에 최대한 시맨틱 태그를 사용하여 HTML문서를 작성하도록 해야한다
img tag art 속성 사용
img tag의 속성 중에는 art라는 속성이 있다
art속성은 img에 대한 설명을 적는 속성인데 위에 설명한 시맨틱 태그와 비슷한 이유로 작성하는 것이 좋고 art속성을 통해 코드만 보고 이미지가 어떤 것인지 알아내기 쉽기에 src 앞에 적는 것이 좋다
Self Closing Tag
input,link,img 같은 태그들은 self closing tag 이다
이런 태그들은 뒤에 굳이 closing tag를 작성하지 않아도 된다
Prettier
필자는 VSCode를 사용 중임으로 Prettier에 관하여 소개하자면 Code Fomatter로 코드 작성시 여러 도움을 준다
코드 작성 후 Refactoring 할 부분을 알아서 고쳐주니 아직 사용해보지 않았다면 사용해보는걸 추천한다
PUG
Express 라이브러리로 전에 Node.js 공부하면서 한 번 사용해본 적이 있는데 html을 간단히 표현할 수 있는 문법을 제공하고 mixin, extend 등도 사용 할 수 있어 좋았었다
다양한 라이브러리를 사용하는 것도 좋은 방법이라고 생각한다
CSS
CSS는 자바 스크립트보다 유지보수가 어렵다고 한다
따라서 CSS Refactoring은 중요한 작업이다
속성 순서
레이아웃에 영향을 많이 주는 순서대로 , 인접 속성끼리 묶어서 작성 해주는 것이 좋다
아래 순서대로 속성을 작성하도록 하자
- 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)
출처 : wecode
불필요한 style 작성 금지
display: "lnline";
display: "block";
width: 100%;상황에 따라 다르겠지만 위와 같은 style 값은 기본 값일 경우가 있다
이외에도 기본 값에 해당하는 style을 굳이 작성 할 필요는 없다
bottom-up 방식
- 부모 크기 할당 -> 자식 크기 할당 : top-bottom 방식
- 자식 크기 할당 -> 부모 크기 할당 : bottom-top 방식
부모에 width height를 주는 것 보다 자식 크기에 맞춰 자연스럽게 부모의 크기가 조정되도록 하는 것이 훨씬 좋다
따라서 항상 bottom-up방식으로 작성하자
SASS(SCSS)
이전 포스팅에서도 설명했듯이 variable, nesting, mixin, extend 등 CSS의 가독성과 유지보수성을 늘려 줄 다양한 기능이 존재한다
공통
파일 분리
이건 html, css, js 모두 적용되는 Refactoring 작업으로 적절히 파일을 나눠 코드를 작성하는 것이 훨씬 좋다
하지만 너무 분리하는 것은 좋지 않고, 프로젝트의 크기에 맞게 잘 나누어 작성하는 것이 좋다
중복 코드 제거
목적에 따라 함수, 클래스 등을 사용해서 최대한 중복된 부분을 제거해야한다
끝~
