 |
 |
 |
|---|---|---|
| 홈페이지 | 전체 최신 여행 계획 (바형) | 여행 계획 검색 (카드형) |
 |
 |
 |
| 프로필 (여행 계획 탭 / 카드형) | 프로필 (북마크 탭 / 바형) | 여행 계획 추가 |
 |
 |
 |
| 여행 계획 상세 (일정 탭) | 여행 계획 상세 (최소) | 여행 계획 상세 (최대) |
 |
 |
 |
| 여행 계획 상세 (일정 추가 모달) | 여행 계획 상세 (일정 상세 모달) | 여행 계획 상세 (일정 편집 모달) |
 |
 |
 |
| 여행 계획 상세 (비용 탭) | 여행 계획 상세 (비용 상세 모달) | 여행 계획 상세 (공유 모달) |
 |
 |
 |
|---|---|---|
| 홈페이지 | 전체 최신 여행 계획 | 여행 계획 검색 |
 |
 |
 |
| 프로필 (여행 계획 탭) | 프로필 (북마크 탭) | 여행 계획 추가 |
 |
 |
 |
| 여행 계획 상세 (일정 탭) | 여행 계획 상세 (최소) | 여행 계획 상세 (최대) |
 |
 |
 |
| 여행 계획 상세 (일정 추가 모달) | 여행 계획 상세 (일정 상세 모달) | 여행 계획 상세 (일정 편집 모달) |
 |
 |
 |
| 여행 계획 상세 (비용 탭) | 여행 계획 상세 (비용 상세 모달) | 여행 계획 상세 (공유 모달) |
팀 개발 기간: 2024.05.28 ~ 2024.06.25
리팩토링 기간: 2024.07 ~ 2025.02
- FE 5명, BE 2명, DE 1명으로 구성된 팀으로 진행했던 프로젝트를 리팩토링했습니다.
- 기획부터 완성까지 모든 단계를 재검토하며 FE 1명, BE 1명으로 진행했습니다.
- FE(이전 팀) Github Repository
- BE Github Repository
- 장소를 검색해서 일정 추가
- 드래그 앤 드롭으로 일정 순서 변경
- 일정별 방문 시간, 소요 시간, 메모, 비용 작성
- 구글맵 지도에 날짜별 일정 위치 및 동선 표시
- 다른 사용자의 여행 계획 북마크
- 여행 계획 링크 & 카카오톡 공유
- 도시별 여행 계획 검색
- 검색 결과 최신순, 인기순 정렬
- JWT 토큰 인증 방식
- 카카오 OAuth 연동
- 반응형 디자인
- 모바일 브라우저 및 터치 동작 고려
├── public/ # 정적 파일 (폰트, 아이콘, 이미지)
│ ├── fonts/ # 웹 폰트
│ ├── icons/ # SVG 아이콘
│ └── images/ # 정적 이미지
│
└── src/
├── apis/ # API 통합
│ ├── constants/ # API 공통 상수
│ ├── providers/ # React Query Provider
│ ├── services/ # API 서비스 모듈
│ ├── types/ # API 공통 타입 정의
│ └── utils/ # API 공통 유틸리티 함수
│
├── app/ # Next.js App Router
│ ├── (auth)/ # 인증 관련 레이아웃 (로그인, 회원가입, 비밀번호 찾기)
│ ├── (main)/ # 메인 레이아웃
│ ├── (focused)/ # 콘텐츠에 집중된 레이아웃 (푸터 X)
│ ├── (fullscreen)/ # 뷰포트 기준 전체화면 레이아웃 (푸터 X, 스크롤 X)
│ ├── actions/ # 서버 액션 (쿠키 읽기, 쓰기)
│ └── api/ # API 라우트 (카카오 OAuth, 이미지 압축)
│
├── components/ # React 컴포넌트
│ ├── common/ # 공통 UI 컴포넌트
│ ├── features/ # 기능별 컴포넌트
│ └── modals/ # 모달 컴포넌트
│
├── libs/ # 유틸리티 및 설정
│ ├── constants/ # 공통 상수 및 객체
│ ├── contexts/ # React Context
│ ├── hooks/ # 커스텀 React Hook
│ ├── types/ # 프로젝트 설정 관련 타입 정의
│ └── utils/ # 유틸리티 함수
│
└── styles/ # 전역 스타일
└── globals.css # 전역 CSS 스타일
# Installation
npm install
# Development
npm run dev
npm run dev:https
# Production Build
npm run build-
Next.js App Router에서 Fetch 전략
- Next.js App Router에서 Fetch API 기반으로 일부 기능을 자동화한 커스텀 API 함수를 구현했습니다.
- 노션
-
Next.js App Router에서 데이터 캐싱 전략
- Next.js App Router에서 태그 기반 데이터 캐싱과 재검증 설정을 통해 데이터 일관성을 유지하는 방법을 구현했습니다.
- 노션
-
Tanstack Query 전략
- Tanstack Query를 사용하여 클라이언트 측 데이터 페칭 상태를 효율적으로 관리하기 위한 데이터 캐싱 및 상태 관리 로직을 구현했습니다.
- 노션
-
Next.js App Router에서 쿠키 관리 전략
- Next.js App Router에서 서버 컴포넌트, 클라이언트 컴포넌트, 미들웨어, 라우트 핸들러 등 다양한 환경에서 쿠키를 안전하게 관리하고 조작하는 로직을 구현했습니다.
- 노션
-
사용자 인증 및 보안 (토큰, 쿠키)
- Next.js App Router에서 JWT 토큰을 활용해 사용자를 인증하고 쿠키를 안전하게 관리하며 미들웨어를 통해 토큰 검증 및 재발급을 자동화하는 방법을 구현했습니다.
- 노션
-
Edge 런타임과 JWT Decode 구현
- Edge 런타임 환경에서 JWT 토큰을 복호화하고 토큰의 구조 및 시간 기반 유효성 검증을 수행하는 로직을 구현했습니다.
- 노션
-
Context API 관리 전략
- Context API를 사용할 때 상태와 참조를 분리하여 불필요한 리렌더링을 방지했습니다.
- 노션
-
Input에서 Composition 이벤트 핸들링
- 입력 시 입력값 실시간 포맷팅과 Composition 이벤트 간 충돌 문제를 해결하기 위해 조합 중인 입력값을 안전하게 처리하는 로직을 추가했습니다.
- 노션
-
Next.js 이미지 최적화
- Next.js의 Image 컴포넌트를 활용하여 이미지 최적화를 수행하고 클라이언트와 서버 측에서 각각 이미지를 효율적으로 처리하는 커스텀 Image 컴포넌트를 구현했습니다.
- 노션
-
조건부 렌더링과 선언형 프로그래밍
- 조건부 렌더링을 선언적으로 처리해 HTML 가독성을 높였습니다.
- 노션
-
Transform과 픽셀 보간 문제
- CSS에서
transform을 사용할 때 발생할 수 있는 픽셀 보간 문제를 이해하고 서브픽셀 렌더링 방식을 사용해 흐려진 UI 문제를 해결했습니다. - 노션
- CSS에서
-
로딩 UI 애니메이션 작동하지 않는 문제
- SSR 환경에서 작동하지 않는 SVG 애니메이션을 CSS를 활용하여 클라이언트와 서버 측에서 모두 동작하는 로딩 UI를 구현했습니다.
- 노션
-
모바일 브라우저에서 드래그 창 크기 변경 문제
- 모바일 브라우저에서 드래그 동작 시 브라우저 기본 동작과 충돌하는 문제를 이해하고, 이를 해결하기 위해 터치 환경에서 드래그 대신 클릭으로 동작을 처리하는 기능을 추가했습니다.
- 노션
-
구글 Places API 도시 주소 포맷팅
- 구글 Places API를 활용하여 도시 주소를 일관된 포맷으로 추출하고 자동 완성 API와 장소 세부정보 API를 결합하여 도시 이름과 주소를 정제하는 로직을 구현했습니다.
- 노션
-
Lighthouse 성능 검사
- Lighthouse를 활용하여 웹 페이지의 성능을 측정하고 점수를 하락시키는 원인을 수정해 사용자 경험을 개선했습니다.
- 노션
- 여행 계획 여러 인원 동시 작성 기능
- 여행 후기 작성 및 열람 기능
- 여행 계획 검색 필터 기능
- 구글, 네이버 등 소셜 연동 추가
- UI/UX 개선
- 성능, 코드 최적화
- 접근성 설정 강화
- 오류 핸들링 강화
- Jest 테스트 코드 추가
Frontend Developer 강진호
- Email: [email protected]
- Notion: Trablock 기술 문서
- GitHub: @jinhok96