Code Refactoring (코드 리팩토링)

1. console.log는 지워준다
코드의 가독성을 해친다.
불필요한 메모리를 사용하지 않도록.


2. 변수명, id/class명, 함수명
의미가 직관적으로 잘 전달되는 이름
팀원들과 나중의 내가 읽기 쉽게 만들기.


3. 들여쓰기
보기 편하고, 가독성 좋게.
회사마다 컨벤션이 있다.


4. Semantic Tag
SEO, 접근성, 가독성 면에서 좋기 때문에 시멘틱 태그를 사용.
태그를 통해 의미 전달 쉬워짐.


5. img tag 의 alt 속성
사진이 없을 시, 유저가 보게 될 텍스트를 보여줌.
시각장애인분들은 alt 속성을 통해서 어떤 이미지인지 알 수 있음.
SEO 면에서도 중요.


6. self closing tag
< input >< / input > 도 되지만, 좀 더 간결하게 < input /> 셀프 클로징도 가능.


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

8. 불필요한 스타일 속성
p 의 속성을 확인하기위해 display: block 을 사용했다면, 지우기
혼돈을 줄수 있음

9. 레이아웃은 bottom-up 방식
자식요소의 높이에 따라 부모요소가 유동적으로 변화할 수 있도록