프론트엔드 개발 포트폴리오 | 여행 스케쥴링 플래너 사이트
내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘Sharpa’를 소개합니다.
Sep 04, 2023
당신의 여행 플래너 서포팅 사이트!
여행지 추천 및 정보 제공 , 여행에 필요한 일정 플래너 기능을 제공합니다.
아키텍쳐
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fb5b871b9-79b0-469d-8d25-901521b4672d%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_3.40.23.png%3Ftable%3Dblock%26id%3Dc0ddb668-0447-49a1-8084-04c615555bd2%26cache%3Dv2&w=3840&q=75)
핵심 기능
Tour Api를 이용한 도시 검색 , 관광지 검색
- 메인페이지 도시명으로 검색
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Ff2c932e3-4f8b-421b-abaa-f7157b7f94fd%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_3.57.20.png%3Ftable%3Dblock%26id%3De6896d88-2c8b-4896-8dc0-5a7c7c8a0c47%26cache%3Dv2&w=3840&q=75)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F5edacc1c-ae45-4de6-ae6c-fa054fd17611%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.02.47.png%3Ftable%3Dblock%26id%3D9a5327e4-9f1d-4052-bddb-c475e873f206%26cache%3Dv2&w=3840&q=75)
- 일정만들기 페이지에서 관광지 이름으로 검색기능
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F508e09b1-e876-4204-b6fa-1bb1fdea4252%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.04.59.png%3Ftable%3Dblock%26id%3D3c54f4ef-b507-4a34-80a1-3f29322136b8%26cache%3Dv2&w=3840&q=75)
카카오 지도 api를 이용한 지역 정보 및 일정 관리 기능
1)_전국 지역 정보
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fa2d09ad0-59dc-4804-a4c3-52c6ea6cc824%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.07.20.png%3Ftable%3Dblock%26id%3D5bf96473-0d6f-4a77-a185-6e4b5b707299%26cache%3Dv2&w=3840&q=75)
2)_관광지 위치 정보
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fcd5bd1c1-937d-4f0e-988d-6c53165da752%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.08.58.png%3Ftable%3Dblock%26id%3D0e1de0ba-b76b-4c45-ba02-22932379b520%26cache%3Dv2&w=3840&q=75)
3_일정에 추가한 관광지 위치 정보
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F59bf5d0b-59bc-482f-9316-2ed7c6bec4d3%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.11.45.png%3Ftable%3Dblock%26id%3D5fdac56f-03bf-477c-a579-4719f4609863%26cache%3Dv2&w=3840&q=75)
관광지 정보 열람 및 유사 관광지 추천 기능
1)_관광지 정보 열람 / 관광지 위시리스트 추가 기능
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Ff15ccc9b-ffa9-4298-b4e0-7970e8ecfb2b%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.14.45.png%3Ftable%3Dblock%26id%3D84fe9368-2953-49a8-99d0-7f285566ece5%26cache%3Dv2&w=3840&q=75)
2)_유사 관광지 추천 기능
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F9838cd28-adfe-446d-b7be-4212aef020de%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.15.09.png%3Ftable%3Dblock%26id%3Dcf8e6e90-620f-48a3-9ad5-2a06ccf79783%26cache%3Dv2&w=3840&q=75)
관광지 후기 및 평점 작성기능
1)_후기 작성
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F6f04083e-f186-4254-b3a7-2e93b8a35e3f%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.17.53.png%3Ftable%3Dblock%26id%3D3ae5fe1e-a9f9-4b48-82df-97a72f27644e%26cache%3Dv2&w=3840&q=75)
2)_관광지 후기 리스트 기능
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F85112bf5-bac8-42c3-bafc-e7512e282f51%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.18.36.png%3Ftable%3Dblock%26id%3D0e29d26a-f4b9-47fa-96f3-02db400b0fc8%26cache%3Dv2&w=3840&q=75)
3)_관광지 평점
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fc3a20394-6096-4ee9-8e0d-140f83f00bf1%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.18.44.png%3Ftable%3Dblock%26id%3D9e1feba2-2e62-47a6-9318-8e56a3175624%26cache%3Dv2&w=3840&q=75)
일정 만들기 기능
1)_일정 만들기 기능
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F28865e50-5a59-4faa-9458-fd7b1d8b7334%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.25.17.png%3Ftable%3Dblock%26id%3De80e36e5-3c38-4751-9492-b27f4ed444aa%26cache%3Dv2&w=3840&q=75)
기술적 의사결정
내용
Recoil , react-query를 사용한 이유
Redux의 보일러플레이트 문제
기존 리덕스에서 상태관리를 하려면 기본적인 client단 상태관리 로직인데도 아래처럼 초기세팅을 해줘야 할게 많습니다. 전역state가 추가 될 때 마다 store에 reducer도 넣어줘야 되고
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F12d0412b-2a52-46ae-a74c-8106dfa63850%252Fcarbon.png%3Ftable%3Dblock%26id%3Db62ca204-3a1a-46c4-b5bc-d33e4b4101e5%26cache%3Dv2&w=3840&q=75)
또 서버와의 통신을 하기위해서는 reateAsyncThunk를 써야하는데 로직이 createAsyncThunk, extraReducers 등을 통해 일일히 초기 세팅을 해줘야 해서 불편한 감이 있었습니다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fe138ee06-9709-4960-ab9c-72bbe5b80836%252Fcarbon_(1).png%3Ftable%3Dblock%26id%3D1d83c6eb-1ba5-45fd-b345-eb10829017cf%26cache%3Dv2&w=3840&q=75)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fab11363f-514b-44ba-80d8-032bd4f6c766%252Fcarbon_(2).png%3Ftable%3Dblock%26id%3D165520a0-eefc-42aa-9a62-cbd08669596f%26cache%3Dv2&w=3840&q=75)
이런 불편함을 해소하기 위해서 Recoil 과 React-query를 도입하였습니다. 초기설정도 간단하고 보기에도 코드가 직관적이라서 더 좋은것 같습니다.
Recoil
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fe71294d3-ff1b-4aac-b9e0-492282823571%252Fcarbon_(3).png%3Ftable%3Dblock%26id%3D8efc276b-f0ab-4b61-ae2e-2cbc7c676c8f%26cache%3Dv2&w=3840&q=75)
React-query
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Ff1b4cc73-10a5-4bfc-ab47-ef4d487aa7cd%252Fcarbon_(4).png%3Ftable%3Dblock%26id%3Da503c10f-4164-4691-bc22-a62599b0c60f%26cache%3Dv2&w=3840&q=75)
CRA(Create-React-App) 명령어 없이 Webpack을 초기 설정 후 프로젝트 진행
기본적으로 CRA는 webpack과 babel등이 다 세팅 된 상태인데 하나하나 세팅한 이유는 번들러 동작원리에 대해서도 궁금했고, 리액트 프로젝트가 어떻게 만들어지는지 궁금해서 CRA 없이 프로젝트를 진행 했습니다.
webpack.config.js 파일을 생성 후 초기세팅 해준 코드입니다.
초기설정을 할때 파일을 읽어오는 시작점을 entry 속성으로 설정할 수 있고, .js파일로 진입점을 사용하면 됩니다. 반대로 번들 된 결과물도 설정 할 수 있으며 반환된 파일들은 dist 폴더로 이동하게 됩니다.
그외에 패키지들을 추가할 때에는 require명령어로 추가해준 후 변수를 사용합니다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F48ee42a6-75e0-45f7-934a-80ca747c9d3e%252Fcarbon_(5).png%3Ftable%3Dblock%26id%3Daa5b7340-a0ff-486f-82eb-423fbbc2d98d%26cache%3Dv2&w=3840&q=75)
그리고 경로별칭을 지정해 줄수있습니다. 저희는 src로 바로 접근하기 위해서 골뱅이로 접근할수 있게 설정을 하였습니다.
그외에 babel로더를 사용하기 위해 module에 규칙을 추가 하였고, ts loader, css-loader 등 사용하고 싶은 파일을 정규식으로 지정 후 설정해 주었습니다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F67f5a630-efab-4903-a581-23b34a13a59e%252Fcarbon_(6).png%3Ftable%3Dblock%26id%3De95961ac-3737-4bfb-922e-578c6a9c3b88%26cache%3Dv2&w=3840&q=75)
그리고 환경변수 세팅을 해주기 위해서는 cra와 다르게 dotenv를 설치해 줘야하고 전역에 변수선언 한 dotenv 변수를
new webpack.DefinePlugin({
에 할당해 줘야 합니다.트러블 슈팅
코드 스플리팅
초기 성능점수
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F59c0a48c-e1a6-44c6-944b-9370a1ff54cf%252F%2525EC%252584%2525B1%2525EB%25258A%2525A5_%2525EC%2525A0%252590%2525EC%252588%252598.png%3Ftable%3Dblock%26id%3D83fe0c48-220a-47bf-a9e6-319425dc080f%26cache%3Dv2&w=3840&q=75)
a. 컴포넌트 호출 방식을 리팩토링하여 렌더링 성능을 향상 시킨다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F51068097-ecb4-4c21-8fe7-d92dba9c7c68%252Fcode.png%3Ftable%3Dblock%26id%3D6591fc0a-c82e-45c2-b5b1-ae6fe64797b7%26cache%3Dv2&w=3840&q=75)
👇👇👇👇👇👇👇👇👇👇
👇👇👇👇👇👇👇👇👇👇
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F42a4080e-78d4-46c6-b9be-f9365ca6aef2%252Fcode2.png%3Ftable%3Dblock%26id%3D1a8db468-0347-4091-b6a0-91b377562554%26cache%3Dv2&w=3840&q=75)
컴포넌트를 개별로 호출 후 , 렌더링 성능점수 상승.
리팩토링 후 성능점수 (이전대비 7점 상승)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F14394c4b-1460-4a45-b5db-ae3cead99c21%252F%2525EC%252584%2525B1%2525EB%25258A%2525A5_%2525EC%2525A0%252590%2525EC%252588%252598_%2525ED%25259B%252584.png%3Ftable%3Dblock%26id%3D6ffe0073-670a-4f2b-845c-a9a5a0809980%26cache%3Dv2&w=3840&q=75)
무한 스크롤
많은 관광지 데이터를 나눠 가져오기 위해
스크롤 위치가 맨 아래로 도달했을시에만 api 호출하게 만들어 놓음 (라이브러리 사용x)
* 스크롤을 맨 아래로 내릴시 api가 호출이 두번되는 현상이 있었음
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fa1f5652e-f1c0-4935-9740-efc5b9a2ce2a%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-08_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_5.35.09.png%3Ftable%3Dblock%26id%3Dacc69bd9-1088-4cfe-8672-c12b97064cf0%26cache%3Dv2&w=3840&q=75)
두번 호출되는 이유를 찾지 못하여
처음 호출 했던 pageNo와 두번째 호출한 pageNo비교해서 같은 경우에는 호출이 되지 않게 막아 해결함.
제작자들
포지션 | 이름 | 담당
※ 담당 페이지 및 주요 기능만 기재함 | E-Mail | gitHub | Blog |
프론트엔드 | 지회수 | - 헤더/푸터 : 검색 기능
- 랜딩 페이지
- 메인 페이지 : 슬라이드 배너, 리뷰량에 따른 인기도시 조회
- 도시 상세페이지 : 도시별 날씨 조회
- 스크롤 탑 버튼 | newasborn@gmail.com | ||
프론트엔드 | 한상권 | - 지도 페이지 : 도시 마커 표시, 도시 데이터 조회
- 도시 상세페이지 : 도시 정보 조회, 도시 명소 조회
- 관광지 상세페이지 : 도시 및 카테고리별 관광지 조회, 리뷰 작성/수정/삭제 및 조회
- 마이 페이지 : 프로필 등록/수정/삭제, 나의 일정 조회, 내가 쓴 리뷰 조회
- 로그인/회원가입 페이지 : 일반/SNS 로그인, 회원가입
| hss3522@gmail.com | ||
프론트엔드 | 김우상 | - 일정 페이지 : 캘린더, 일정 작성/수정/삭제, 검색 기능, 일정 담기, 지도맵 일정별 장소 표시 | freesian12@gmail.com | https://github.com/Freesian12 | |
디자인 | 박수정 | - 웹 사이트 UI/UX 디자인 전반
- 이미지 소스 제작 : 테마 배너 | soojung6969@gmail.com | - | - |
Share article
Subscribe to our newsletter