좋은 코드란 #효율적 #확장성 #유지보수용이 #가독성
리팩토링(Refactoring)이란?
- 코드의 가독성과 확장성을 좋게 만드는 작업
- 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록, 내부구조를 변경하는 기법
리팩토링 하는 이유?
- 리팩토링을 통해 성능을 개선시켰다 (F)
- 코드의 가독성과 확장성을 좋게하는 것이다 (T)
리팩토링 Check List
Basic
console.log()지우기idㆍclass명,변수명,함수명직관적으로 작성하기
https://www.curioustore.com/#!/util/naming- 들여쓰기(js 2칸)
Html
- Semantic Tag 사용하기(div대신 사용가능하면 사용하기)
<article> // 본문
<h1>셀프 리팩토링</h1>
<p>셀프 리팩토링이란 무엇인가?</p>
</article>- img 태그의 alt 속성 반드시 넣기
: 위코드에서는 src보다 alt 먼저 설정
<img alt="이미지 설명" src"소스위치" class="클래스명" />- Self Closing Tag 사용하기
<br />
<hr />
<img />
<meta />
<link />
<input />- 주석은 따로 블로그 정리를 하고 코드에는 최대한 남기지 말자
전체적으로 제목-본문같은 부분들에 시멘틱을 준 후에 본문 내부에도 시멘틱을 적용해줘야할까요?
Css
- css는 서로 연관되어 있어서 js보다 유지보수하기 힘들다.
- 서로 연관된 속성끼리 붙일 것
- Layout Properties (position, float, clear, display, justify-content) : 전체 크기 설정
- 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)- 선택자들 사이에 한 줄씩 공백줄 것
- 불필요한 style 속성 작성 지양
block은 기본값이 width: 100%임. - 레이아웃은 bottom-up 방식으로 구성
: 자식요소의 높이에 따라 부모요소의 높이가 유동적으로 결정되는 방식
: 부모요소를 고정시키지 말고 자식요소를 고정시켜라!
: 부모요소의 높이값을 정해줘야할 때도 있긴하다!
