Refactoring

Code Refactoring

• 코드는 한번 작성되고 끝나는것이 아닌 계속해서 많은 추가와 수정을 겪고 이를 유지보수 라고 한다. 유지보수를 용이하게 하기 위해서는 코드의 가독성과 확장성이 좋아진다.

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

• 좋은코드를 만들기 위해선 어떤 방법이 있을까?
  ► 여러명의 개발자들이 코드리뷰를 하고 소통하면서 점차 좋은 코드들로 발전해가는 방법
  ► 내가 짠 코드를 보면서 좋은 코드인지, 가독성과 확장성이 좋은지 먼저 리뷰를 하면서 리팩토링을 하는 방법

basic

1. console.log 지우기

테스트 끝난 콘솔은 모두 지워줘야한다.콘솔은 테스트를 할때 필수 적이지만 최종 결과물에는 포함되지 않는다.

2. Id,class명, 변수명, 함수명

프로그래머가 가장 힘들어하는 일 중 대표적인 것이 이름짓기 이다. 그럼에도 불구하고 id,class의 이름에서 의미가 직관적으로 드러나게 작성해줘야 한다.

• 해당 변수가 어떤 기능을 하고 있는지 알수 있게 직관적으로 이름을 지어줘야한다.
• array,object 경우에도 그 안에 어떠한게 들어가있는지에 대한것도 변수명을 지어줘야 한다.

🍭 왜 확실하게 이름을 지어야 하는가?
=> 개발자가 보내는 시간 중 코드를 짜는 시간은 10% 밖에 안된다고 한다. 나머지 90% 시간은 모두 코드를 읽고 해석하면서 시간을 보낸다고 한다. 그렇기 떄문에 내가 짠 코드를 미래의 내가 볼때 그리고 협업할때 다른 팀원들이 읽기 쉽게 만들어야 하는 일이 가장 중요한 포인트 이기 때문에 이름을 확실하게 지어줘야 한다.

3. 들여 쓰기

프로그래밍 언어에서 규칙성 있는 들여쓰기는 가독성 측면에서 매우 중요하다.

• 들여쓰기가 안되어 있거나, 불규칙적으로 되어 있으면 코드의 가독성이 안좋아진다.
• javascript는 2칸 들여 쓰기를 컨벤션으로 정하고 있다.

HTML

1. Semantic Tag의 사용

html에는 다양한 태그가 존재하며 그 주에서도 시맥틱 태그를 적절하게 사용하는 것이 가독성 . SEO측면에서 너무나 중요하다. 'div', 'span' 태그를 남발하기 보다는 상황에 맞게 적절한 태그를 사용해줘야 한다.

2. img tag alt속성

img tag를 사용하실 때 반드시 alt 속성 부여해주세요

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

✍🏻 위와 같은 이유로 alt 속성은 중요하기 때문에 src속성보다 먼저 작성하는것이 좋다.

3. self Closing Tag

self Closing이 가능한 tag들은 Self Closing을 적용시켜 준다.

• 일반적으로 여는태그와 닫는태그로 이루어져 있다. 하지만 열고 닫는 태그 없이 스스로 닫을 수 있는 셀프클로징 태그들이 있다.
  => br/ he/ img/ meta/ link/ input/

css

1. css 속성 순서

css 속성은 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성해주는게 좋습니다.

👾 예시)
옷장 정리할때 계절의 기준으로 옷을 정리하는 것처럼 css에도 기준을 주고 분리해준다. 그래야 어떠한 영향에도 미치지 않고 찾기 편하게 만들어 준다.

• css는 서로 영향을 미치는 구조로 이루어져 있고, 이 연관관계가 코드가 길어질수록 복잡해진다. 이러한 이유로 css 유지보수가 jacascript 유지보수보다 힘들다.

• 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)

2. 다른 css 선택자들 사이 한줄 띄우기

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

• 가독성을 위해 다른 css 선택자들 사이에 한 줄 공백을 추가해주는 것이 좋다.

3. 불필요한 스타일 속성 작성 지양

불필요한 style 속성은 작성할 필요가 없다.

👾 예)
블록요소에 불필요하게 디스플레이 블록 부여
블록 요소에 불필요하게 width:100% 부여 등..

▼ 참고 사항 보면 태그들의 속성들을 알 수가 있다.
🔑 참고 사항

=> css의 기본 동작 원리를 잘 이해하고, 각 html tag들이 어떤 default css value를 가지고 있는지 확인해서 불필요한 style 속성 작성을 지양하는것이 좋다.

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

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

• 레이아웃을 구성할 때 부모요소의 크기를 고정적으로 정해둔다면 자시요소의 크기가 변함에 따라 부모요소의 크기가 유동적으로 변하지는 않는다.
• 이럴 때 자식요소의 크기가 변해야 한다면, 부모요소의 css도 같이 수정해줘야하는 불편함이 생긴다.
• 이런 경우게 쌓이게 된다면 추후 css 유지보수가 힘들어 진다.