Day 19 of #100DaysOfCode — 투어 앱 만들기 (파트 1)

Source: Dev.to

왜 투어 앱인가?

다음과 같은 연습을 할 수 있는 무언가가 필요했습니다:

• API 통합
• 커스텀 훅
• 재사용 가능한 UI 컴포넌트
• 여러 페이지 간 라우팅
• useQuery 로 비동기 데이터 처리
• Zustand 로 상태 관리

날씨 앱에 비해 이 프로젝트는 실제 React 아키텍처를 더 깊게 파고듭니다.

현재까지의 프로젝트 구조

사용하고 있는 폴더 구조는 다음과 같습니다:

src/
 ├── components/
 ├── pages/
 ├── data/
 ├── hooks/
 └── App.jsx

components/

재사용 가능한 UI 요소들을 담고 있습니다:

• Navbar
• Footer
• HeroSection
• Cards
• 재사용 가능한 레이아웃 블록

pages/

React Router가 렌더링할 전체 페이지 컴포넌트를 포함합니다:

• Home
• About
• Contact
• Booking
• Destinations

data/

레이아웃을 만들면서 표시할 수 있는 데모/정적 JSON 데이터를 포함합니다—API를 완전히 통합하기 전에 매우 유용합니다.

hooks/

다음과 같은 것을 사용하는 커스텀 훅:

• useQuery
• axios

이 훅들은 API 데이터를 가져와 필요한 컴포넌트에 제공합니다.

🌐 사용 중인 API

이 투어 앱을 위해 두 개의 공개 API를 사용하고 있습니다:

1. Unsplash API

아름다운 목적지 이미지를 가져오는 데 사용합니다.

2. RestCountries API

국가 이름, 국기, 인구, 지도, 언어 등 다양한 정보를 얻는 데 사용합니다.

이 두 API를 조합하면 현실적인 투어 데이터를 구성할 수 있습니다.

🏁 오늘 한 일

오늘은 앱의 핵심 빌딩 블록을 깔아놓는 데 집중했습니다. 모든 페이지, 핵심 컴포넌트, 샘플 데이터, 그리고 이미지 처리를 위한 첫 커스텀 훅을 만들었습니다.

📄 완성된 페이지

• Home
• About
• Contact
• Booking

이 페이지들은 이제 스캐폴딩이 완료되어 API 통합이 끝나면 동적 콘텐츠를 채울 준비가 되었습니다.

🧩 만든 컴포넌트

• Navbar
• Hero Section
• Footer
• Booking Form

이 컴포넌트들은 앱에 일관된 레이아웃을 제공하고 사용자 인터랙션을 위한 깔끔한 시작점을 제공합니다.

📁 데이터 폴더 설정

data 폴더 안에 두 파일을 추가했습니다:

• tour.js – 정적 투어 정보 포함
• testimonials.js – 데모 후기 보관

실제 데이터를 가져오기 전까지 UI를 기능적이고 시각적으로 완전하게 유지하는 데 도움이 됩니다.

커스텀 훅: useImages

hooks 폴더에 useImages 라는 커스텀 훅을 추가했습니다. 이 훅은 Unsplash API를 사용해 이미지를 가져와 HeroSection에 표시합니다. 다음과 함께 동작합니다:

• axios – API 요청 수행
• useQuery – 캐싱, 로딩 상태, 오류 처리

이 설정 덕분에 히어로 섹션이 이제 정적 플레이스홀더 대신 실시간으로 이미지를 동적으로 보여줍니다.

오늘의 요약

• 주요 페이지 모두 완성
• 필수 레이아웃 컴포넌트 구축
• 투어와 후기용 데모 데이터 추가
• Unsplash에서 실제 이미지를 가져오는 커스텀 훅 생성
• 히어로 섹션에 훅을 연결해 동적 비주얼 구현

구조적인 큰 진전이 있었으며, 프로젝트가 본격적인 앱처럼 보이기 시작했습니다.

다음 단계: Day 20 Part 2 🚀