Refactoring

양성호·2021년 10월 18일

TIL

목록 보기

11/17

"코드는 작성하는것보다 읽히는 경우가 더 많다"
오늘 멘토님께서 말씀해주신 말이다.
코드는 남이 읽히는 경우가 더 많기에 내가 이해할 수 있는 정도가 아닌 남이 봐도 명확하게 이해할 수 있어야 한다.

단순히 많은 기능을 구현할 줄 안다고 좋은 개발자가 아니다. 효율적이고 확장성 있는 코드, 유지보수가 용이한 코드를 작성할 줄 아는 개발자가 좋은 개발자다.

그러기 위해서는 refactoring을 해야한다.
refactoring 이란, 코드의 가독성과 확장성을 좋게 만드는 작업을 의미한다.

오늘은 한번 내가 짜본 인스타그램 클론 코딩의 코드에서 어느부분을 고쳐야 하나 알아보겠다.

img 태그 alt 속성 사용

<img class="cat" src="cat.jpg">
  
👇👇👇     

<img class="cat" src="cat.jpg" alt = "고양이사진">

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

id, class , 변수 , 함수명

이게 제일 어렵다..

1.비슷한 종류가 있다고 해서 뒤에 1,2,3 이렇게 숫자를 붙이는건 하지말자
<div class = "comment2"> 
  
👇👇👇

<div class = "commentOut">
  
2.카멜 케이스는 지켜주자
<form class= "navbar">
  
👇👇👇

<form class= "navBar">
  
3.좀 더 알아보기 쉽게 직관적으로 쓰기
<div class = "right">
   
👇👇👇

<div class = "rightTop"

주석

주석은 없는것이 가장 이상적이다 지워주자!

들여쓰기

<div class="bottomLeft">
<i class="fas fa-heart"></i>
<i class="far fa-comment"></i>
<i class="fas fa-upload"></i>
</div>

👇👇👇

<div class="bottomLeft">
  <i class="fas fa-heart"></i>
  <i class="far fa-comment"></i>
  <i class="fas fa-upload"></i>
</div>

들여쓰기는 가독성 측면에서 매우 중요하니 신경쓰자
들여쓰기의 간격은 2칸이 적당하다

Self Closing Tag

<input class="search2" type="text" placeholder="검색" ></input>

👇👇👇

<input class="search2" type="text" placeholder="검색" >

셀프 클로싱 태그들 종류

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

CSS 속성 순서

.main {
  background-color: rgb(250, 250, 250);
  margin-top: 65px;
  position: relative;
  padding-right: 10px;
  padding-top: 5px;
  height: 2000px;
  border-top: solid 1px rgb(222, 222, 222);
}

👇👇👇

.main {
  position: relative;
  margin-top: 65px;
  padding-right: 10px;
  padding-top: 5px;
  height: 2000px;
  border-top: solid 1px rgb(222, 222, 222);
  background-color: rgb(250, 250, 250);
}

CSS 속성은 레이아웃에 영향을 많이 주는 순서대로 , 인접 속성끼리 묶어t서 작성해주는게 좋다.
권장되는 속성 순서.
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-transform)
5. Misc Properties (cursor, overflow, z-index)