프론트엔드 개발 포트폴리오 | 여행 스케쥴링 플래너 사이트

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘Sharpa’를 소개합니다.

Sep 04, 2023

Contents

당신의 여행 플래너 서포팅 사이트!아키텍쳐 핵심 기능 기술적 의사결정 트러블 슈팅 제작자들

당신의 여행 플래너 서포팅 사이트!

여행지 추천 및 정보 제공 , 여행에 필요한 일정 플래너 기능을 제공합니다.

아키텍쳐

핵심 기능

Tour Api를 이용한 도시 검색 , 관광지 검색

메인페이지 도시명으로 검색

일정만들기 페이지에서 관광지 이름으로 검색기능

카카오 지도 api를 이용한 지역 정보 및 일정 관리 기능

1)_전국 지역 정보

2)_관광지 위치 정보

3_일정에 추가한 관광지 위치 정보

관광지 정보 열람 및 유사 관광지 추천 기능

1)_관광지 정보 열람 / 관광지 위시리스트 추가 기능

2)_유사 관광지 추천 기능

관광지 후기 및 평점 작성기능

1)_후기 작성

2)_관광지 후기 리스트 기능

3)_관광지 평점

일정 만들기 기능

1)_일정 만들기 기능

기술적 의사결정

내용

Recoil , react-query를 사용한 이유

Redux의 보일러플레이트 문제

기존 리덕스에서 상태관리를 하려면 기본적인 client단 상태관리 로직인데도 아래처럼 초기세팅을 해줘야 할게 많습니다. 전역state가 추가 될 때 마다 store에 reducer도 넣어줘야 되고

또 서버와의 통신을 하기위해서는 reateAsyncThunk를 써야하는데 로직이 createAsyncThunk, extraReducers 등을 통해 일일히 초기 세팅을 해줘야 해서 불편한 감이 있었습니다.

이런 불편함을 해소하기 위해서 Recoil 과 React-query를 도입하였습니다. 초기설정도 간단하고 보기에도 코드가 직관적이라서 더 좋은것 같습니다.

Recoil

React-query

CRA(Create-React-App) 명령어 없이 Webpack을 초기 설정 후 프로젝트 진행

기본적으로 CRA는 webpack과 babel등이 다 세팅 된 상태인데 하나하나 세팅한 이유는 번들러 동작원리에 대해서도 궁금했고, 리액트 프로젝트가 어떻게 만들어지는지 궁금해서 CRA 없이 프로젝트를 진행 했습니다.

webpack.config.js 파일을 생성 후 초기세팅 해준 코드입니다.

초기설정을 할때 파일을 읽어오는 시작점을 entry 속성으로 설정할 수 있고, .js파일로 진입점을 사용하면 됩니다. 반대로 번들 된 결과물도 설정 할 수 있으며 반환된 파일들은 dist 폴더로 이동하게 됩니다.

그외에 패키지들을 추가할 때에는 require명령어로 추가해준 후 변수를 사용합니다.

그리고 경로별칭을 지정해 줄수있습니다. 저희는 src로 바로 접근하기 위해서 골뱅이로 접근할수 있게 설정을 하였습니다.

그외에 babel로더를 사용하기 위해 module에 규칙을 추가 하였고, ts loader, css-loader 등 사용하고 싶은 파일을 정규식으로 지정 후 설정해 주었습니다.

그리고 환경변수 세팅을 해주기 위해서는 cra와 다르게 dotenv를 설치해 줘야하고 전역에 변수선언 한 dotenv 변수를 new webpack.DefinePlugin({ 에 할당해 줘야 합니다.

트러블 슈팅

코드 스플리팅

초기 성능점수

a. 컴포넌트 호출 방식을 리팩토링하여 렌더링 성능을 향상 시킨다.

👇👇👇👇👇👇👇👇👇👇

컴포넌트를 개별로 호출 후 , 렌더링 성능점수 상승.

리팩토링 후 성능점수 (이전대비 7점 상승)

무한 스크롤

많은 관광지 데이터를 나눠 가져오기 위해 스크롤 위치가 맨 아래로 도달했을시에만 api 호출하게 만들어 놓음 (라이브러리 사용x) * 스크롤을 맨 아래로 내릴시 api가 호출이 두번되는 현상이 있었음

두번 호출되는 이유를 찾지 못하여 처음 호출 했던 pageNo와 두번째 호출한 pageNo비교해서 같은 경우에는 호출이 되지 않게 막아 해결함.

제작자들

포지션	이름	담당 ※ 담당 페이지 및 주요 기능만 기재함	E-Mail	gitHub	Blog
프론트엔드	지회수	- 헤더/푸터 : 검색 기능 - 랜딩 페이지 - 메인 페이지 : 슬라이드 배너, 리뷰량에 따른 인기도시 조회 - 도시 상세페이지 : 도시별 날씨 조회 - 스크롤 탑 버튼	newasborn@gmail.com	https://github.com/Newasborn	https://newasborn.tistory.com/
프론트엔드	한상권	- 지도 페이지 : 도시 마커 표시, 도시 데이터 조회 - 도시 상세페이지 : 도시 정보 조회, 도시 명소 조회 - 관광지 상세페이지 : 도시 및 카테고리별 관광지 조회, 리뷰 작성/수정/삭제 및 조회 - 마이 페이지 : 프로필 등록/수정/삭제, 나의 일정 조회, 내가 쓴 리뷰 조회 - 로그인/회원가입 페이지 : 일반/SNS 로그인, 회원가입	hss3522@gmail.com	https://github.com/Gon1782	https://velog.io/@hss3522
프론트엔드	김우상	- 일정 페이지 : 캘린더, 일정 작성/수정/삭제, 검색 기능, 일정 담기, 지도맵 일정별 장소 표시	freesian12@gmail.com	https://github.com/Freesian12	https://velog.io/@freesian12
디자인	박수정	- 웹 사이트 UI/UX 디자인 전반 - 이미지 소스 제작 : 테마 배너	soojung6969@gmail.com	-	-