프로젝트 진행 중 복잡해진 코드 구조를 개선하기 위해 구조 리팩토링을 수행했다.
의미 없는 태그를 제거하고 시맨틱한 구조로 변경하는 과정을 정리했다.
시맨틱 구조 도입
불투명한 div 중심의 구조를 의미 있는 태그로 교체하여 문서 구조를 명확히 했다.
Before: div 중심 구조
<div id="top">
<div class="menu">...</div>
</div>
<div id="content">
<div class="post">...</div>
</div>
After: 시맨틱 태그 적용 구조
<header>
<nav class="menu">...</nav>
</header>
<main>
<article class="post">...</article>
</main>
리팩토링 원칙
- 시맨틱 태그 활용:
<header>,<nav>,<main>,<footer>등을 배치하여 문서의 뼈대를 구축했다. - 중복 코드 분리: 반복되는 레이아웃과 스타일을 외부 CSS 파일로 분리하여 관리 효율을 높였다.
- 명명 규칙 적용: BEM(Block Element Modifier) 규칙을 참고하여 클래스 명칭을 설정, 스타일 충돌을 방지하고 가독성을 향상시켰.
구조 개선의 효과
리팩토링을 통해 코드의 가독성이 향상되었다.
이는 검색 엔진 최적화(SEO)와 유지보수성 측면에서 유리하다.
탄탄한 내부 구조가 소프트웨어의 품질을 결정한다.
깨끗한 코드는 서비스 운영의 기반인 것 같다.
