배포 URL : YOURTRIP
YOURTRIP 서비스는 지친 일상 속에서 여행을 통해 힐링을 받고 싶은 분들께 바치는 SNS입니다.
여행지와 각각 유명한 식당들에 대한 홍보 혹은 유저들과 소통을 하면서 자유롭게 활동이 가능합니다.
회원가입과 로그인 없이도 자유롭게 여행지 추천을 받을 수 있으며, 커뮤니티와 테마 등록 및 여행지 즐겨찾기 기능을 사용하기 위해서는 회원가입이 필요합니다.
- Front-End
-
Back-End: 제공된 API 사용
-
형상 관리 : github-flow 전략 사용
메인 브랜치에서는 충돌이 발생하지 않게 하고, 메인 브랜치의 역할만 할 수 있도록 기능 구현 또는 버그 수정 시 기능 단위별로 브랜치를 생성하는 방식을 사용했다. 각 브랜치의 이름은 어떤 일을 하는 지 알 수 있도록 설정하였으며, push 후에 브랜치를 삭제하는 형태로 사용하여 브랜치를 잘못 사용하는 경우를 방지했다.
| 강규민 | 박다은 | 서동현 | 송예은 |
|---|---|---|---|
 |
 |
 |
 |
| jattett | daeun.park | donghyeon.seo | coding-frog117 |
- 공통 컴포넌트 제작 (이미지 업로드버튼,커뮤니티 컴포넌트)
- 토큰 관리
- 스플래쉬 페이지
- 로그인 페이지
- 회원가입 페이지
- 프로필 수정 페이지
- 로그아웃 기능
- 공통 컴포넌트 제작 (버튼•이미지 모듈, 이미지 슬라이드)
- 유어트립 페이지 디자인
- 팔로워, 팔로잉 리스트 구현
- 지역별 카테고리 여행지 리스트 출력
- 큐레이션 추가 페이지 구현
- 유저 및 장소 검색
- 공통 컴포넌트 제작 (하단 네비게이션 바, 여행지 상세 페이지 내부 컴포넌트)
- 공공 데이터 API 가공 및 주기적 갱신
- 퍼블리싱 리팩토링
- 여행지 상세 페이지
- 데이터 저장
- 버그 Fix
- 배포
- 공통 컴포넌트 제작 (지역별 카테고리 nav바, 지역별 리스트, 장소 컴포넌트)
- 게시물 작성, 수정, 삭제 기능
- 팔로우 언팔로우 기능
- 내 프로필 팔로잉 팔로우 리스트 구현
- 커뮤니티 피드리스트
- 나의 게시물 리스트
- 모달창 기능 구현
| 0. 스플래쉬 | 1. 로그인 | 2. 회원가입 | 3. 프로필 설정 |
|---|---|---|---|
 |
 |
 |
 |
| 4. 하단 네비게이션 | 5. 홈 | 6. 홈 상세보기 | 7.지역별 리스트 |
 |
 |
 |
 |
| 8.커뮤니티 게시물 업로드 | 9. 커뮤니티 게시물 삭제 | 10. 커뮤니티 게시물 수정 | 11. 다른 사용자 프로필 확인 |
 |
 |
 |
 |
| 12. 프로필 페이지 | 13. 팔로우 팔로잉 리스트 | 14. 프로필 수정 | 15. 큐레이션 추가 |
 |
 |
 |
 |
- 🛫 공공데이터 API 활용
Tour API에서 제공하는 있는 지역별 관광정보 OpenAPI를 활용하여 여행지 정보를 받아와 필요한 형태로 데이터를 가공하여 사용하였다.
- 🛫 지도 API 활용
여행지 상세 설명 페이지에서 여행지 위치를 표시하기 위해 카카오맵 API를 사용하였다.
여행지 데이티에서 받아온 위도•경도를 활용하여 지도에 해당 위치를 표시하였다.
- 🛫 사용자 관련 정보 저장
제공되는 API를 활용하여 회원가입, 로그인, 프로필 수정 등 개인 정보 저장에 사용하였으며, 팔로우•팔로잉, 다른 사용자의 큐레이션 리스트 확인 등 사용자 간의 상호작용을 구현하였다.
동일한 API에 커뮤니티, 큐레이션 추가 등 다른 정보를 저장하기 위해 추가적으로 구분할 수 있는 텍스트를 추가하여서 저장하고, 데이터를 받아올 때 텍스트를 통해 구분하여 필요한 데이터를 사용하였다.
공공 데이터의 API 접근 횟수가 1000회로 상당히 적은 편이고, 용량도 매우 클 뿐더러, 오류가 있는 데이터가 다수 존재한다.
- 프론트앤드 단에서 이를 처리할 경우, 처리 시간이 너무 길어지고 이는 유쾌하지 못한 사용자 경험으로 직결된다.
- 이를 해결하기 위해 데이터를 사전에 처리하여 별도의 깃허브 레포에 저장하고, 이를 배포하여 처리 시간을 단축한다.
- 또한 변경되는 데이터들에 대해 처리할 수 있도록 GitHub Action을 이용하여 주기적으로 데이터를 갱신할 수 있도록 한다.로그인을 하였든 하지 않았든 모든 사용자는 전체 게시글을 확인할 수 있어야 한다.
- 기존의 API를 그대로 활용할 경우 로그인한 사용자만이 자신의 게시글만 확인할 수 있다.
- 이를 해결하기 위해 하나의 공용 계정을 통해 게시물을 업로드한다.
- 이때 게시물 작성자와 게시물 컨텐츠를 파악하기 위해 해당 데이터를 묶어 하나의 객체로 만든 후, 해당 객체가 파싱되지 않게 하기 위해 중괄호를 소괄호로 변경 후 문자열로 만들어 서버로 전달하였다.
- 추후 검색, 수정, 삭제 시 해당 문자열을 다시 객체화하여 이용하였다.여행지 상세 페이지에도 댓글을 확인할 수 있어야 한다.
- 여행지 상세 페이지는 게시글이 아니므로 제공되는 댓글 API를 활용할 수 없다.
- 이를 해결하기 위해 상품 등록 API를 활용하여 댓글을 업로드한다.
- 이때 앞의 경우와 마찬가지로 작성자, 내용 등의 정보를 모아 중괄호를 소괄호로 변경 후 문자열로 만들어 서버로 전달하였다.
- 추후 검색, 수정, 삭제 시 해당 문자열을 다시 객체화하여 이용하였다.
- 또한 상품 이름에는 여행지 댓글이라는 뜻을 가지는 특정 문자열과 여행지의 id를 함께 입력하여 해당 댓글이 어떤 여행지의 댓글인지를 식별할 수 있도록 하였다.모달 컴포넌트 등에서 자식 컴포넌트의 데이터를 부모에게 전달해야 한다.
- props 끌어올리기 : useState를 사용하여 부모와 값을 공유하였다.자식으로 연결된 컴포넌트가 아니라 navigate를 사용하여 이동하는 페이지에서 state 전달이 필요했다.
- navigate의 두번째 인자로 state를 전달할 수 있다는 것을 알게되어 사용하였다.컴포넌트 안에 state를 통해 값을 변경하고자 하였는데 두번째 호출부터 변경되는 문제 발생.
- useEffect를 통해 첫 렌더링시 state가 변경되도록 설정하였다.- state 업데이트 시, 렌더링으로 인해 같은 페이지임에도 불구하고 최상단으로 렌더링하여 사용자가 사용하기에 불편하다.
- 리스트를 가로로 출력할 때, 하나의 요소만 가지는 리스트를 드래그 스크롤을 하는 것은 가능하지만 텍스트, 이미지 등 2개 이상의 요소가 포함되어 출력되는 컴포넌트에서 드래그 스크롤이 적용되지 않는다.
- navigate 사용하여 뒤로가기 버튼을 구현하였지만, 다른 페이지로 가는 경우가 발생한다.
- 전체적인 프로젝트 구조가 복잡하며, 컴포넌트를 더욱 세분화하는 것이 가능해보이기 때문에 아토믹 패턴을 적용하여 리팩토링을 진행할 예정이다.
-
강규민
혼자 작업하면서 자유롭게 작업하는게 너무 습관화가 되었었는데, 팀 프로젝트를 진행하면서 협업을 경험하고 배려와 책임감을 느끼게 되었습니다. 혹시나 내 코드가 남에게 폐를 끼칠까 걱정도 하고 그로인해 코드의 대한 보완을 하게되며 많이 배우게 되어 성장을 할수 있는 계기가 되었구요, 엄청 막 완벽하진 않았지만 팀원분들과 함께 했던 기억들을 돌아보면 기억에 남는 경험이 될 것 같습니다. 추후 리팩토링을 진행해서 완벽한 프로젝트로 만들어 보고 싶습니다. -
박다은
뿌듯함과 아쉬움이 공존했던 프로젝트였다. 제대로 한 첫 번째 프로젝트였기 때문에 중간중간 어려움이 많이 있었지만 하나의 프로젝트를 완성했다는 점이 굉장히 뿌듯했다. 비록 완성에 집중을 하다보니 코드의 품질에 대해 신경쓰지 못한 점이 아쉬움으로 남았지만 리팩토링을 진행하며 위에서 적었던 보완이 필요한 부분을 마무리하게 된다면 기억에 남는 프로젝트가 될 것 같다. -
서동현
프로젝트를 진행하면서 프로젝트를 엎고 다시 진행했고, 시간에 쫓겨 진행하다보니 팀장으로서 역할을 제대로 다 하지 못한 것 같아 아쉬움이 많이 남는 프로젝트였다. 하지만 프로젝트를 진행하며 팀원 모두가 잘 따라와주고, 최선을 다해주는 등 긍정적인 부분도 많아 여러모로 기억에 남을 프로젝트가 될 것 같다. -
송예은 나에게는 처음 경험해보는 팀프로젝트를 통해서 단시간 내에 많은 성장이 있었다. 특히 트러블 슈팅이 있을 때 생각지도 못한 방법으로 해결하는 팀원을 보면서 많이 배웠다. 또한 서버통신은 나에게 너무 낯설었었는데 이제는 익숙하게 사용할 수 있게 되었고 이외에도 프로젝트 구조화 하는 방식, 협업할 때 고려할 점 등을 배우게 되어서 정말 값진 시간이었다. 개인 프로젝트를 할 때도 이 프로젝트를 원동력으로 삼아 두려움이 없이 임할 수 있을 것 같다.