[JS] Trip Wiki-전 세계 도시 여행 정보 한눈에 보기(SPA 프로젝트)

프로젝트 소개

1. GitHub URL(상세 내용 확인 가능)

   https://github.com/chdev-kr/2025-project-trip-wiki

2. 배포 주소

   https://chdev-kr.github.io/2025-project-trip-wiki/

구현 화면 및 기능

• 메인 화면

• 검색 및 sorting

---

프로젝트명- Trip Wiki-전 세계 도시 여행 정보 한눈에 보기

Trip Wiki는 전 세계 도시들의 여행 정보를 한눈에 확인할 수 있는 SPA(Single Page Application)입니다. 각 도시의 비용, 재미, 안전성, 인터넷, 공기질, 음식 점수를 시각적으로 제공하며, 지역별 필터링과 검색 기능을 통해 원하는 도시를 쉽게 찾을 수 있습니다.

---

사용 기술 및 기술 스택

• Frontend
  • Vanilla JavaScript
  • CSS3
  • HTML5
• Backend
  • Node.js
  • Express.js
• API
  • External API: Trip Wiki API
  • 학습용 API입니다.

---

주요 특징

• 도시 목록 조회: 카드 형태의 도시 정보 표시 / 무한 스크롤 적용
• 지역별 필터링: 아시아, 유럽, 북미 등 6개 대륙별 필터링 제공
• 검색 및 정렬: 도시명 실시간 검색 / 비용, 재미, 안전성, 음식 등 기준별 정렬
• 상세 페이지: 각 도시의 점수를 프로그레스 바로 시각화, 점수별 색상 구분
• 상태 관리: URL 파라미터 기반 상태 유지, 새로고침 시에도 동일 상태 반영
• 반응형 디자인: CSS Grid 활용 / 모바일, 태블릿, 데스크톱 최적화
• 성능 최적화: 이미지 Lazy Loading, 무한 스크롤 데이터 로딩

---

개발 배경

Vanilla JS 활용 능력을 확장하기 위해 기존 MPA 방식이 아닌 SPA 구조로 학습용 미니 프로젝트를 진행했습니다. API 연동과 상태 관리, 라우팅 구현을 직접 경험하며 JavaScript의 기초를 탄탄히 다졌고, 실제 웹 페이지 제작 과정을 통해 웹 개발 전반에 대한 이해도를 높일 수 있었습니다.

---