리팩토링 로드맵
- 구조 개편
[✓] 페이지 라우터 구조 단순화: 라우트 그룹으로 분류되어 있었던 복잡한 페이지 라우터 구조를 간소화하여 유지 보수성을 높인다.
[✓] 폴더 구조 개편: 현재 atom < molecule < organism < templates
로 되어 있던 컴포넌트 폴더 구조를 components < ui
로 재편하여 명확한 구분과 접근성을 개선한다.
- 라이브러리 관리 및 최적화
[✓] 마크다운 변환 라이브러리 교체: 마크다운 변환 라이브러리를 유지보수가 중단된 contentlayer
에서 velite
로 변경한다.
[✓] 개발 의존성 정리: 가능한 한 많은 라이브러리들을 devDependencies
로 이동시켜 프로덕션 빌드의 크기와 복잡성을 줄인다.
[△] rehype-pretty-code 플러그인 최적화: velite 속도 저하의 원인이 되는 rehype-pretty-code
플러그인이 수행하는 코드 하이라이팅 작업을 최적화하여 페이지 로딩 속도를 향상시킨다.
[ ] velite의 변환 로직 개선: velite의 마크다운 변환 로직을 개선하여 불필요한 작업을 줄이고 성능을 향상시킨다.
- 기능 개선 및 최적화
[△] 검색 페이지 최적화: /posts
에 해당하는 검색 페이지의 성능을 분석하고 최적화하여 사용자 경험을 향상시킨다. -> postMetadata를 따로 변환하도록 하였다.
[ ] UI 컴포넌트 코드 리팩토링: UI 컴포넌트의 코드를 리팩토링하여 재사용성, 유지 보수성을 높인다.
- 오류 해결 및 마무리
[ ] ENOENT 오류 해결: 빌드 과정 중 발생하는 ENOENT
오류를 해결한다.