코드 리뷰와 개선 포인트
이 문서는 비판이 아니라, 코드를 더 잘 이해하고 다음 단계로 개선하기 위한 리뷰입니다.
좋은 점
1. 컴포넌트 단위가 명확함
components/
├── SiteHeader/
├── HeroSection/
├── WorksSection/
├── PortfolioCard/
└── SiteFooter/
기능별로 폴더가 나뉘어 있어서 어느 파일을 봐야 하는지 찾기 쉽습니다.
2. 데이터 기반 카드 렌더링
카드를 HTML에 하나씩 직접 쓰지 않고 portfolioItems 배열로 관리합니다.
장점:
- 카드 추가가 쉬움
- 반복 HTML이 줄어듦
- 필터링에 필요한 데이터가 한 곳에 모임
3. CSS Variables 활용
색상과 간격을 변수로 관리합니다.
--brand-primary: #2563eb;
--sp-4: 24px;
Design / Dev 모드 전환도 변수를 바꾸는 방식이라 구조가 좋습니다.
4. 브라우저 API 학습 가치가 큼
이 프로젝트에는 다음 API가 들어 있습니다.
| API | 사용 위치 |
|---|---|
| Custom Elements | 컴포넌트 정의 |
| IntersectionObserver | 무한 스크롤 |
| localStorage | 모드 저장 |
| URLSearchParams | URL 쿼리 모드 처리 |
| dataset | 필터링 데이터 |
프레임워크 없이 웹 기본기를 공부하기 좋습니다.
주의할 점
1. innerHTML 사용
컴포넌트는 innerHTML로 렌더링합니다.
this.innerHTML = `
<h4 class="card-title">${title}</h4>
`;
현재 데이터가 직접 관리하는 정적 데이터라면 괜찮습니다.
하지만 외부 사용자가 입력한 값을 넣게 되면 XSS 위험이 생길 수 있습니다.
2. WorksSection.js가 길어짐
portfolioItems 데이터가 많아지면서 WorksSection.js가 길어졌습니다.
개선 방향:
data/portfolioItems.js
components/WorksSection/WorksSection.js
데이터와 컴포넌트를 분리하면 유지보수가 쉬워집니다.
3. main.js가 여러 책임을 가짐
현재 main.js는 다음을 모두 담당합니다.
ModeToggle
Filter
InfiniteScroll
BackToTop
Menu
처음에는 괜찮지만, 기능이 더 늘어나면 파일을 나누는 것이 좋습니다.
예:
js/modules/modeToggle.js
js/modules/filter.js
js/modules/infiniteScroll.js
4. header.html/footer.html과 컴포넌트 중복
루트에 header.html, footer.html이 있고, 동시에 SiteHeader, SiteFooter 컴포넌트가 있습니다.
현재 메인 페이지는 컴포넌트를 쓰므로, 기존 HTML 조각 파일이 실제로 필요한지 확인해야 합니다.
다음 개선 추천
portfolioItems데이터 분리main.js모듈 분리- 카드 데이터에 id 추가
- 태그 필터 AND/OR 모드 선택 기능 추가
- 접근성 개선: 필터 결과 변경을
aria-live로 알림 - GitHub Pages 기준 base path 점검
공부 포인트
이 프로젝트를 공부할 때는 이 질문을 계속 던지면 됩니다.
이 UI는 어느 Custom Element가 그리지?
이 데이터는 attribute로 가는가, dataset으로 가는가?
이 상태는 JS가 바꾸는가, CSS가 표현하는가?
반복되는 코드는 데이터로 바꿀 수 있는가?