Self Refactoring Tip

🧷 console.log 지우기

• 테스트할때 사용한 console.log는 바로바로 지우자. 안 지우면 나중에 어떤 테스트에 쓰던 것인지 헷갈린다.
• 가독성을 해칠 수도 있다.
• 다른 팀원들을 위한 기본적인 배려 차원에서도 꼭 지우도록 할 것!

 

🧷 id명, class명, 함수의 이름에서 의미가 직관적으로 드러나게 작성할 것

• 코드는 쓰는 경우보다 읽히는 경우가 훨씬 더 많다!
• 개발자가 가장 힘들어하는 일 중 대표적인 것이 이름 짓기이다.
  변수명은 해당 변수가 어떤 의미를 나타내고 있는지 명확하고 직관적으로 이해가 되도록 지어야 한다.
• 개발자가 보내는 시간 중 코드를 짜는 시간은 10%, 코드를 읽고 해석하는 시간이 90%라 한다.
  내가 짠 코드를 미래의 내가, 협업하는 다른 팀원들이 읽기 쉽게 만드는 일은 ⚡가장 기본적이면서도 가장 중요한 일⚡이다!

 

🧷 들여 쓰기

• 규칙성 있는 들여 쓰기는 가독성 측면에서 매우 중요하다.
• Javascript에서는 2칸 들여쓰기를 한다.

 

🧷 Semantic Tag의 사용

• Semantic Tag를 남발하기보다는 상황에 맞게 적절한 태그를 사용할 것.
• 가독성과 SEO 측면에서 아주 중요하다!

 

🧷 <img> 태그의 alt 속성

• <img> 태그를 사용할 때 반드시 alt 속성을 부여할 것.
  １) 이미지가 로딩되지 않을 경우 alt 속성에 적힌 값이 보여짐.
  ２) 시각장애인의 경우 alt 속성을 통해 어떤 이미지가 보여지는지 알 수 있음.
  ３) SEO 검색엔진 최적화에서 어떤 img인지 인식하는 코드는 alt 속성이다.
• src 속성보다 alt 속성을 먼저 작성하는게 좋다.

 

🧷 Self Closing Tag

• Self Closing이 가능한 tag들은 Self Closing을 적용시켜 주자.
• 쓸데없이 tag들을 열고 닫으면 가독성을 해칠 수 있다.

 

🔥Self Closing을 적용할 수 있는 단일 tag🔥

• <br>
• <hr>
• <img>
• <meta>
• <link>
• <input>

 

🧷 CSS 속성 순서

• CSS 속성의 작성 순서는 성능 향상이나 적용 순서에 유의미한 영향을 주지는 않는다. 하지만 우리가 작성한 수많은 CSS 속성들이 규칙없이 뒤섞여 있다면, 원하는 속성이 어디에 있는지, 이 선택자에 어떤 속성이 적용되고 있는지 한눈에 파악하기 힘들다.
• CSS 속성은 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성해주는게 좋다.

 

🔥권장되는 CSS 속성 순서🔥

• Layout Properties
  (position, float, clear, display)
• Box Model Properties
  (width, height, margin, padding)
• Visual Propertie
  (color, background, border, box-shadow)
• Typography Properties
  (font-size, font-family, text-align, text-transform)
• Misc Properties
  (cursor, overflow, z-index)

 

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

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

 

🧷 불필요한 style 속성의 작성 지양

• ex) block 요소에 불필요하게 width:100% 를 부여하는 것,
  block 요소에 불필요하게 display:block; 를 부여하는 것
• <div>, <article> 등 수많은 요소는 이미 display:block을 default style로 적용이 되고 있다.
• 또한, display:block 요소들은 기본적으로 부모 요소의 너비를 모두 차지하고 있다.