나만의 여행 계획 작성 서비스

[✨ Travelevart URL] (https://travelevart.com/)

테스트 계정

id : test@naver.com

pw : qweqwe

목차

1. 프로젝트 소개

• Travelevart를 만들게 된 계기
• 주요 기능 설명
• 프로젝트 실행 방법

2. 기술 스택

3. 기술적 경험

• FE

• BE

4. 팀원 소개

⭐️ 프로젝트 소개

Travelevart를 만들게 된 계기

여행 갈때 목표 금액에 맞춰 계획 짜기 귀찮고 시간이 드는데 지역과 목표 금액을 설정하면 자동으로 여행지, 숙소,맛집, 교통을 추천해주는 서비스가 있으면 편하겠다 라는 생각에서 시작하게 되었습니다!

=> 유저들이 여행 계획을 빠르고 편하게 짤 수 있고 효율적인 여행을 다녀올 수 있을것

사용한 API

프로젝트 수행 절차 및 방법

프로젝트 실행 방법

Front-end

npm run dev

Back-end

node app.js

⚒️ 기술 스택

인프라 아키텍쳐

Frontend

Backend

Database & Cloud & DevOps

💪🏻 기술적 경험 & 트러블 슈팅

FE

1. Next-Auth 이용한 로컬, 소셜로그인

• Next auth 를 통한 kakao , 소셜 로그인을 구현함

• refresh token, accesstoken을 사용해서 localstorage에 저장 후에 백엔드 서버와 통신해서 자동으로 로그인을 유지 , 갱신할 수 있도록 구현 함.

  
  

2. tanstack-query

• 데이터들이 캐싱되어서 다시 데이터를 가져오지 않고캐싱해서 가져오도록 구현해 최적화를 시킴

• tanstack-query의 useinfinityquery 와 IntersectionObserver를 통한 무한스크롤 구현으로 많은 데이터들을 한번에 가져오지 않고 IntersectionObserver 의 targetRef가 보일 때 새로운 데이터를 가져오는 식으로 최적화 함

  
  

3. 대부분의 UI 직접구현

• Carousel UI, button, Dropdown, select UI, Tab UI 등등 대부분의 UI 들을 라이브러리 없이 직접 구현

• 반면 , 드래그 앤 드롭 같은 기능들은 react-beautiful-dnd 같은 UI 를 사용해서 더욱 부드러운 애니메이션을 제공해 사용자 경험을 향상 시킬 수 있도록 노력함

  
  

4. next optimizing

• next image, sizes props 등을 이용해서 불필요하게 큰 이미지를 로딩하는 것을 방지
• next/font 를 로컬 폰트로 다운 받아 사용 및 .woff 확장자를 사용해 폰트 파일을 줄이고 확장성을 높이기 위해 노력함

​

5. SEO

• SEO component를 만들어서 각 페이지마다 제목과 설명을 보여줌

• Google console 을 등록해서 검색시 많은 노출이 될 수 있도록 노력함

  
  

6. Axios Interceptor 활용

travelevart-FrontEnd/src/lib/api.ts

Lines 10 to 101 in 1db6789

	const instance = axios.create({
	baseURL: process.env.NEXT_PUBLIC_BASE_URL,
	timeout: 30000,
	});
	function interceptorRequestFulfulled(config: InternalAxiosRequestConfig) {
	if (typeof window === "undefined") return config;
	const accessToken = localStorage.getItem(LOCAL_STORAGE_KEY.accessToken);
	if (!accessToken) return config;
	if (!config.headers) return config;
	config.headers.Authorization = `Bearer ${accessToken}`;
	return config;
	}
	instance.interceptors.request.use(interceptorRequestFulfulled);
	function interceptorResponseFulfilled(res: AxiosResponse) {
	if (res.status >= 200 && res.status < 300) {
	return res.data;
	}
	return Promise.reject(res.data);
	}
	async function getNewAccessToken(refreshToken: string): Promise<string> {
	try {
	const response = await axios.post(
	`${process.env.NEXT_PUBLIC_BASE_URL}/auth/token`,
	{
	refreshToken,
	},
	);
	return response.data.accessToken;
	} catch (error) {
	throw new Error("Failed to refresh access token");
	}
	}
	async function interceptorResponseRejected(err: AxiosError) {
	if (typeof window === "undefined") return Promise.reject(err);
	// 권한 없음 에러
	if (err.response?.status === 401) {
	const refreshToken = localStorage.getItem(LOCAL_STORAGE_KEY.refreshToken);
	if (!refreshToken) {
	window.location.replace("/auth/login");
	return Promise.reject(new Error("No refresh token available"));
	}
	try {
	// 새로운 액세스 토큰 발급
	const newAccessToken = await getNewAccessToken(refreshToken as string);
	localStorage.setItem(LOCAL_STORAGE_KEY.accessToken, newAccessToken);
	// 원래 요청을 새로운 accessToken으로 다시 시도
	if (err.config) {
	err.config.headers.Authorization = `Bearer ${newAccessToken}`;
	return axios(err.config);
	} else {
	return Promise.reject(
	new Error("Original request config is not available"),
	);
	}
	} catch (tokenError) {
	localStorage.removeItem(LOCAL_STORAGE_KEY.accessToken);
	localStorage.removeItem(LOCAL_STORAGE_KEY.refreshToken);
	window.location.replace("/auth/login");
	return Promise.reject(tokenError);
	}
	}
	// 로그인 정보 만료됨
	if (err.response?.status === 403) {
	localStorage.removeItem(LOCAL_STORAGE_KEY.accessToken);
	localStorage.removeItem(LOCAL_STORAGE_KEY.refreshToken);
	toast.info("로그인 정보가 만료되었습니다. 다시 로그인 해주세요");
	window.location.replace("/");
	}
	return Promise.reject(err); // 에러 객체를 그대로 반환
	}
	instance.interceptors.response.use(
	interceptorResponseFulfilled,
	interceptorResponseRejected,
	);

• Axios interceptor 를 활용해서 일관적인 api 요청을 처리하도록 함

​

performance 부분에서 처음 약 60점 -> 약 90점 으로 향상시킬 수 있었다.

BE

• AI응답속도180%개선(34s=>12s) 개선 링크

• Nginx를 사용하여 로드밸런싱 및 무중단배포의 프로세스를 이해할수 있었음

주요 기능 설명

[ AI 기반 여행지 추천 서비스 ]

• 지역과 기간, 이동수단, 연령대 등을 선택해서 AI 에게 여행지 일정을 지도와 함께 추천받을 수 있습니다.

[ 여행지 검색 ]

• Tour API 를 사용해 대한민국의 다양한 여행지들을 검색 할 수 있습니다.
• 지역을 골라 필터링해 특정 지역에 대한 관광지만을 볼 수 있습니다.

[ 여행지 리뷰, 찜하기 ]

• 여행지 상세보기에서 여행지 찜하기 버튼을 눌러 마이페이지에 등록할 수 있습니다.
• 네이버 지도 API 를 통해 관광지의 상세 위치를 볼 수 있습니다.
• 리뷰와 평점을 여행지에 등록 및 조회 할 수 있습니다.

[ 여행지 공유 및 QnA 커뮤니티 ]

• 유저간 자신의 여행을 공유하고 여행 관련 질문 답변을 주고 받을 수 있는 커뮤니티 기능입니다.
• 유저의 게시물에 댓글 및 좋아요를 남길 수 있습니다.
• 여행이 마음에 든다면 fork 버튼을 눌러서 해당 유저가 공유한 여행을 마이페이지에 담을 수 있습니다.

[ 나만의 여행일정 만들기 ]

• 나만의 여행을 기간, 이름과 함께 만들 수 있습니다
• 여행지를 우측에서 검색 해서 각 날짜에 담아 Drag and Drop 기능을 활용해서 쉽게 커스텀할 수 있습니다.

[ 여행일정 수정,공유 및 저장 ]

• 내가 만든 여행 혹은 커뮤니티에서 가져온 다른 유저의 여행을 수정, 공유 및 저장을 할 수 있습니다.

• 여행을 pdf 로 저장해서 여행시에도 상시로 파일로 볼 수 있도록 제공했습니다.

🏃‍♂️ 팀원 소개

권수혁	남용환	박성률	김준서	이충녕

🐙 권수혁 (FE)

• 블로그: https://velog.io/@tngur0716/posts
• 깃허브: https://github.com/kwonsuhyuk

😊 이충녕 (FE)

• 깃허브 : https://github.com/choongnyeong6215

🐧 남용환 (BE)

• 블로그: https://nyh98.tistory.com/
• 깃허브: https://github.com/nyh98

👾 박성률 (BE)

• 블로그: https://buyhomeinseoul.tistory.com
• 깃허브: https://github.com/chansik0504

⚽️ 김준서 (BE)

• 블로그: https://velog.io/@nafa21/posts
• 깃허브: https://github.com/jacknafa