Refactoring

코드는 계속해서 유지보수가 쉽도록 하기 위해 가독성과 확장성이 좋게 추가 수정을을 해나가야 한다.

개발자가 보내는 시간 중 10%는 코드 짜는 시간, 나머지 90%는 코드를 읽고 해석하는 시간으로 쓰인다고 한다.

기능 구현만으로 끝내지 않고 좋은 코드가 무엇인지 고민해보려 한다.

console.log( ) 지우기

테스트할 때 값을 확인하려고 썼던 console.log()가 최종 결과물에 남아 있으면

가독성을 해치고, 진짜로 확인하고자 한 값을 알기 어려워진다.

Semantics

1️⃣ id, class, 변수, 함수명을 의미 있는 이름으로 짓기

다른 사람이 코드를 봤을 때 이름을 보고 어떤 값을 의미하는지 유추할 수 있게 하여 가독성을 높일 수 있다.

let foodList = ['사과', '오렌지', '딸기', '귤', '포도'];

2️⃣ Semantic Tag 사용하기

의미 있는 태그를 사용하여 각 부분이 어떤 의미가 있는지 더 쉽게 알게 하고

SEO(검색엔진 최적화)에 최적화되게 할 수 있다.

시멘틱 태그를 사용하면 div태그만을 썼을 때보다 더 효율적으로 코드를 작성할 수 있다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>       
      </nav>
    </header>
      <main>
        <article>
          <h3></h3>
          <form>
            <input />
          </form> 
        </article>
      </main>
      <footer>
      </footer>
  </body>
</html>

들여 쓰기

규칙성 있는 들여쓰기로 보기 더 편하게 해준다.

<parent>
  <child></child>
  <child></child> 
</parent>

HTML : img 태그에 alt 속성 반드시 사용하기

- 이미지가 보여지지 않을 경우 alt속성에 적힌 값이 보여진다.

- 시각장애인은 alt속성을 통해 어떤 이미지가 있는지 알 수 있다.

- SEO 검색엔진 최적화에서 어떤 img 인식할 수 있다.

📌alt 속성을 src 속성보다 앞에 써주는 게 좋다.

<img alt="이미지 내용" src="이미지 주소" />

HTML : Self Closing Tag

닫는 태그가 없는 태그일 경우 규칙에 맞춰 <태그이름 />으로 닫음을 표현한다.

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

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)

name {
  position : ;
  float : ;
  clear : ;
  display : ;
  width : ;
  height : ;
  margin : ;
  padding : ;
  color : ;
  background : ;
  border : ;
  box-shadow : ;
  font-size : ;
  font-family : ;
  text-align : ;
  text-transform : ;
  cursor : ;
  overflow : ;
  z-index : ;
}

CSS : 다른 선택자들 사이 한 줄씩 공백 주기

구분하기 쉽게 한 줄씩 띄어주어 가독성을 준다.

CSS : 불필요한 Style 속성은 지우기

없어도 되는 style속성은 지워준다.

CSS : 레이아웃은 Bottom-up 방식으로 구성

자식요소의 높이에 따라 부모요소의 높이를 유동적으로 결정되게 설정한다.

자식요소에 높이값을 주고 부모요소에는 padding값을 주면,

자식요소의 높이값이 달라져도 부모요소는 그 값을 맞춰 늘어날 수 있다.

parent {
  padding : 20px;
}

child {
  height : 200px;
}

아래 코드처럼 child의 높이값이 변경되면

parent 도 따라서 padding 값 그대로 유지되면서 높이값이 변경된다.

parent {
  padding : 20px;
}

child {
  height : 300px;
}

리팩토링이 필요한 부분들이 어떤 게 있는지 보는데 거의 받아적기 밖에 못했다.

그래도 정리하고 나니 지금 내가 하고 있는 작업에서 코드를 잘 정리해야겠다는 생각이 든다.

코드 칠 때도 결과물만 보지 말고 생각하면서 코드를 짜야 나중에 수정할 때 덜 머리 아플 거 같다.

이만 공부하러~~

'🔑Code' 카테고리의 다른 글

Git & Github (0)	2023.03.17

jiyeoun blog

Refactoring

console.log( ) 지우기

Semantics

들여 쓰기

HTML : img 태그에 alt 속성 반드시 사용하기

HTML : Self Closing Tag

CSS : 속성을 순서대로 써주기

CSS : 다른 선택자들 사이 한 줄씩 공백 주기

CSS : 불필요한 Style 속성은 지우기

CSS : 레이아웃은 Bottom-up 방식으로 구성

'🔑Code' 카테고리의 다른 글

티스토리툴바

Refactoring

console.log( ) 지우기

Semantics

들여 쓰기

HTML : img 태그에 alt 속성 반드시 사용하기

HTML : Self Closing Tag

CSS : 속성을 순서대로 써주기

CSS : 다른 선택자들 사이 한 줄씩 공백 주기

CSS : 불필요한 Style 속성은 지우기

CSS : 레이아웃은 Bottom-up 방식으로 구성

'🔑Code' 카테고리의 다른 글

관련글

티스토리툴바