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

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘Sharpa’를 소개합니다.
프론트엔드 개발 포트폴리오 | 여행 스케쥴링 플래너 사이트

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

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

 

아키텍쳐

notion image

핵심 기능

Tour Api를 이용한 도시 검색 , 관광지 검색
  1. 메인페이지 도시명으로 검색
    1. notion image
      notion image
  1. 일정만들기 페이지에서 관광지 이름으로 검색기능
    1. notion image
카카오 지도 api를 이용한 지역 정보 및 일정 관리 기능
1)_전국 지역 정보
notion image
 
2)_관광지 위치 정보
notion image
3_일정에 추가한 관광지 위치 정보
notion image
관광지 정보 열람 및 유사 관광지 추천 기능
1)_관광지 정보 열람 / 관광지 위시리스트 추가 기능
notion image
2)_유사 관광지 추천 기능
notion image
 
관광지 후기 및 평점 작성기능
1)_후기 작성
notion image
2)_관광지 후기 리스트 기능
notion image
3)_관광지 평점
notion image
일정 만들기 기능
1)_일정 만들기 기능
notion image
 

기술적 의사결정

내용

Recoil , react-query를 사용한 이유

Redux의 보일러플레이트 문제
기존 리덕스에서 상태관리를 하려면 기본적인 client단 상태관리 로직인데도 아래처럼 초기세팅을 해줘야 할게 많습니다. 전역state가 추가 될 때 마다 store에 reducer도 넣어줘야 되고
notion image
또 서버와의 통신을 하기위해서는 reateAsyncThunk를 써야하는데 로직이 createAsyncThunk, extraReducers 등을 통해 일일히 초기 세팅을 해줘야 해서 불편한 감이 있었습니다.
notion image
notion image
 
이런 불편함을 해소하기 위해서 Recoil 과 React-query를 도입하였습니다. 초기설정도 간단하고 보기에도 코드가 직관적이라서 더 좋은것 같습니다.
 
Recoil
notion image
React-query
notion image
 
 

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

기본적으로 CRA는 webpack과 babel등이 다 세팅 된 상태인데 하나하나 세팅한 이유는 번들러 동작원리에 대해서도 궁금했고, 리액트 프로젝트가 어떻게 만들어지는지 궁금해서 CRA 없이 프로젝트를 진행 했습니다.
webpack.config.js 파일을 생성 후 초기세팅 해준 코드입니다.
초기설정을 할때 파일을 읽어오는 시작점을 entry 속성으로 설정할 수 있고, .js파일로 진입점을 사용하면 됩니다. 반대로 번들 된 결과물도 설정 할 수 있으며 반환된 파일들은 dist 폴더로 이동하게 됩니다.
그외에 패키지들을 추가할 때에는 require명령어로 추가해준 후 변수를 사용합니다.
notion image
 
그리고 경로별칭을 지정해 줄수있습니다. 저희는 src로 바로 접근하기 위해서 골뱅이로 접근할수 있게 설정을 하였습니다.
그외에 babel로더를 사용하기 위해 module에 규칙을 추가 하였고, ts loader, css-loader 등 사용하고 싶은 파일을 정규식으로 지정 후 설정해 주었습니다.
notion image
그리고 환경변수 세팅을 해주기 위해서는 cra와 다르게 dotenv를 설치해 줘야하고 전역에 변수선언 한 dotenv 변수를 new webpack.DefinePlugin({ 에 할당해 줘야 합니다.
 

트러블 슈팅

코드 스플리팅
초기 성능점수
notion image
a. 컴포넌트 호출 방식을 리팩토링하여 렌더링 성능을 향상 시킨다.
notion image
  👇👇👇👇👇👇👇👇👇👇
👇👇👇👇👇👇👇👇👇👇
notion image
컴포넌트를 개별로 호출 후 , 렌더링 성능점수 상승.
 
리팩토링 후 성능점수 (이전대비 7점 상승)
notion image
무한 스크롤
많은 관광지 데이터를 나눠 가져오기 위해 스크롤 위치가 맨 아래로 도달했을시에만 api 호출하게 만들어 놓음 (라이브러리 사용x) * 스크롤을 맨 아래로 내릴시 api가 호출이 두번되는 현상이 있었음
notion image
두번 호출되는 이유를 찾지 못하여 처음 호출 했던 pageNo와 두번째 호출한 pageNo비교해서 같은 경우에는 호출이 되지 않게 막아 해결함.
 
 
 
 

제작자들

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