리팩토링이란 코드의 가독성과 확장성을 좋게 만드는 작업을 의미합니다. 소프트웨어의 겉보기 동작은 그대로 유지한 채 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법이라고 할 수 있습니다.
다른 사람이 읽기 쉬운 코드를 짜는 것이 좋은 코드라고 하죠. BEM도 그렇고 알아야할 것이 넘쳐나서 기쁩니다.
값을 확인하기위해 console.log를 자주 씁니다 그래서 가끔 console.log를 지우지 않고 돌렸다가 착각하기도 하는데 코드를 짠 내가 착각하는데 코드를 읽을 사람은 어떻겠습니까
1.console.log 지우기
2.id, class명, 변수명, 함수명
며칠 후에 읽어도 이해하기 쉽게 직관적으로 드러나게 작성하는 것 또한 중요합니다.
3.들여쓰기
규칙성이 있는 들여쓰기는 보기가 좋습니다.
4.Semantic Tag의 사용
모두가 읽기 좋은 태그를 짜는 것또한 중요합니다. SEO 최적화, 접근성 향상, 가독성 높은 코드 등의 이점을 얻을 수 있습니다.
5.img tag alt 속성
이미지가 로딩되지 않을 경우 alt 속성에 적힌 값이 보여집니다. 시각장애인의 경우 alt 속성을 통해 어떤 이미지가 보여지는지 알 수 있습니다. 이 부분은 도 동일합니다 kr로하면 사이트에 관한 것들을 한글로 들을 수 있다고 합니다.
6.Self closing Tag
HTML tag는 일반적으로 여는 태그(
스스로 닫을 수 있는 태그들도 있는데 br 태그, hr 태그, img 태그, meta 태그, link 태그, input 태그들이 있습니다.
-
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 선택자들 사이 한줄 띄우기
각자 다른 CSS 파일에서는 한 줄씩 공백을 주는 게 가독성 측면에서 좋습니다. -
불필요한 style 속성 작성 지양
불필요한 style 속성은 작성할 필요가 없습니다. -
레이아웃은 bottom-up 방식으로 구성
레이아웃을 구성할 때는 자식요소에 따라 부모요소가 조정되도록 bottom-up 방식으로 구성해줍니다.이렇게 리팩토링에대해서 공부했습니다. 앞으로도 복습도 할 겸 잊지 않기위해 블로그에 작성하려고 합니다
