😀이글은 정보 전달을 위한 글이 아닙니다!
기획의도
react기초강의를 끝내자마자 바로 팀 프로젝트에 뛰어 들었다. 팀프로젝트를 수행하기엔 조금 부족했던 탓인지 팀프로젝트에서 기획한기능들을 다 만들지 못해 아쉬운 결과로 마무리했다 ㅠㅠ
그!래!서
부족한 나의 역량을 키우기 위해 개인 프로젝트로 만들어보기 했다.
pointot란??
pointot 점을찍다라는 뜻처럼 여행의 point는 숙소이다라는 의미이다.
숙소가 여행의 포인트가 되어야 하는 이유
- 여행에서 가장 걱정되고 해결되어야 하는 요인이 숙소예약이다
- 숙소를 탐색할때 원하는 여행지와 가까운 최적의 동선을 고려한다.
그러나
💡원하는 여행지 주변에 숙소리스트들을 제공해주는 서비스가 아니라 숙소 주변 여행지들을 소개해주는 서비스를 제공해주어 조금 다른 여행문화를 만들면 어떨까 생각하게 되었다.
어떻게??
숙소 주변 여행지들을 제공은 사용자들이 직접 데이터를 만들어 제공한다.
즉, 탐색을 원하는 사용자들이 먼저 숙소를 이용하면서 찾은 여행지들은 기록하여 제공하면 해당 숙소 상세페이지에서 여행지들을 보여줄 수 있도록 구상했다!
pointot기능(서비스)
- 여행일정 등록 수정 및 삭제
- 등록한 일정 선택
- dDay표시하기
- 숙소 예약하기, 삭제
- 핀리스트 저장, 메모하기
- 여행후 주변 여행지 추천 등록
기술스택
- react(CRA)
- typescript
- styled-component
- react-query
프로젝트를 통한 나의 달성 목표
- react의 기본 사용법을 익힌다.
- 컴포넌트 분리하기
- useState
- props통해 자식 컴포넌트에 데이터 전달
- router
- 이벤트 전달하기 - typescrtipt
- 사용법익숙해지면서 typescript를 사용하는 목적 알기
- react-query
- useQuery를 통해 서버데이터 불러오기
- useMutate를 통해 데이터 변경하기
- querykey관리하기
웹사이트를 만들기위해 프론트엔드 개발자가 신경써야하는 부분은 여러가지 있지만 이 프로젝트에서 내가 성장해야할 목표는 상태관리하는법과 컴포너트를 어떻게 분리할지 익히는 것이다.
가짜 서버 이용하기
하지만 아쉽게도 백엔드 협업없이 해야될 부분이라 서버 데이터를 어떻게 생성할지 고민이 많았다.
openAPI도 찾아봤지만 숙소 관련된 부분은 오픈된 부분이 없기 때문에 가짜 서버인 json-server를 사용하기로 했다.
json-server는 프론트와 백엔드간에 따로 작업할 경우, 개발 속도의 상이함 때문에 발생하는 문제점을 해결해줄 수 있는 라이브러리이다. 빠르게 REST API를 구축해주어 연습용에는 좋지만 실제 제품을 사용할때는 사용할 수 없다고 한다.
