Day 03: Svelte를 사용한 블로그 개선 시도

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 초보 웹 개발자 (Svelte 및 클라이언트 측 라우팅 학습 중인 자바스크립트 개발자)

- 난이도: 중간 (기본 HTML/CSS/JS 지식 기반)

핵심 요약

• Svelte의 모듈화 기능을 통해 Navbar.svelte, Post.svelte 등 반복적 HTML을 컴포넌트화하여 유지보수성 향상
• svelte-spa-router 사용 시 URL 해시(#) 감지 문제로 라우팅 실패 (해결 중)
• Vite + Bun 조합으로 빠른 개발 환경 구축 (예: bunx live-server 활용)

섹션별 세부 요약

1. 프로젝트 설정

• bun create vite svelteapp --template svelte 명령어로 Svelte 프로젝트 초기화
• 기존 index.html, about.html, posts.html 파일을 public/ 폴더로 이동하여 Svelte 렌더링 가능
• App.svelte 컴포넌트 생성 후 정상적으로 렌더링 확인

2. 컴포넌트화 작업

• 반복적 HTML 구조를 Navbar.svelte, Post.svelte 등 모듈형 컴포넌트로 분리
• svelte-spa-router 라이브러리 설치 (bun add svelte-spa-router)
• 라우팅 구현 시 URL 해시(#) 감지 문제로 페이지 전환 실패 (현재 디버깅 중)

3. 도구 활용 및 학습 사항

• bunx live-server로 개발 서버 실행 (캐시 경로: ~/.bun/install/cache/)
• Svelte의 반응성 및 간결한 문법에 대한 긍정적 피드백
• 포스트별 페이지 처리 (예: day01.html)를 위한 컴포넌트 분리 전략 고민 중

결론

• svelte-spa-router의 해시 라우팅 문제 해결이 핵심 과제임
• Vite + Bun은 빠른 개발 환경 제공 (추후 캐시 정리 권장)
• Svelte의 컴포넌트 기반 개발은 유지보수성 향상에 유리한 패턴임