길다면 길고 짧다면 짧은 아웃소싱 프로젝트가 끝났다.
이제 내일부터는 타입스크립트와 Next.js를 배우게 된다. (사실 오늘부터 강의 들으랬는데 일단 회고하기^^)
당일에 바로 회고한 경우는 드문데 이번에 바로 쓰는거 보면 꽤 애증의 프로젝트가 되었나보다. 나중에 리팩토링해서 기능같은거도 추가 보완해서 포트폴리오에 넣어보고 싶다.
잊혀지기 전에 회고해보자!
몽글로드 팀 프로젝트
01. 프로젝트 명, 간단 소개 ✨
- 프로젝트 명 : 몽글로드
- 소개
- 한 줄 정리 : 창의적인 산책로와 반려동물 필수 장소 정보를 한눈에 제공하는 맞춤형 서비스
- 내용 : 반려동물과 함께 산책할 수 있는 코스를 사용자가 직접 그릴 수 있는 서비스. 산책로의 예상 시간과 총 거리가 자동으로 계산되며, 강아지 얼굴이나 뼈다귀 모양 등 다양한 창의적인 코스를 만들 수 있다. 또한, 동물병원과 반려동물 동반 카페 같은 유용한 반려동물 장소 정보도 제공한다.
02. 사용한 API 🔍
- 카카오 지도 API 중 선의 거리 계산하기, 실시간 위치, 지도 마커 표시, 키워드 검색, Drawing 라이브러리를 사용하였다.
03. 구현할 페이지 및 기능 👩🏻💻
- 반려동물 관련 정보 보여주기
- 산책로를 직접 그리고 예상 시간 및 총 거리 자동으로 계산하기
- 추가 기능
- 메인페이지
- 서비스의 주요 기능 소개
- 반려동물용품점, 동물병원 등의 정보를 검색하는 페이지로 연결
- 산책 경로 그리기 기능 소개
- 지도 검색 페이지
- 반려동물용품점, 동물병원 정보 표시
- 산책경로 페이지
- 사용자가 직접 산책 경로를 그리고 저장할 수 있는 페이지
- 경로를 그리고 나서 이름을 붙여 저장하거나 공유
- 저장된 경로를 리스트로 보여주고, 다시 볼 수 있는 기능 추가
- 로그인, 회원가입
04. 완성 사이트 🥳
메인페이지 - 몽글로드 검색하기
메인페이지에서는 사용자들이 만들어 올려둔 산책로를 검색해서 볼 수 있고 카드를 눌렀을 때 해당 산책로를 볼 수 있다.
키워드 검색을 활용하고 페이지네이션을 사용해주었다.
산책로 그리기에서 만든 모양을 position으로 저장해두었으니 다각형 api를 활용해서 그 모양을 지도에 뿌려주고 찾을 수 있도록 구현했다.
산책로 그리기 - 몽글로드 그리기
완벽한 곡선은 그릴 수 없지만 Drawing 라이브러리를 활용해 보다 섬세한 모양을 만들 수 있게 하고 선의 거리 계산하기 api를 접목시켜 완성시켰을 때 그 거리와 예상소요시간이 계산되도록 만들었다.
몽글로드 이름, 주소, 설명 등의 정보들은 모두 db.json에 저장된다.
마지막에는 조금 더 즐거움을 주기 위해 색상을 선택하면 메인페이지에서 해당 색이 적용되어 보여지고, 편의성을 높이기 위해 ESC 버튼을 누르면 그리기 완료가 되도록 추가구현했다.
검색페이지 - 반려동물 정보 검색하기
산책로 그리기 기능만 담기 아쉬워서 반려동물과 관련된 정보들도 검색할 수 있는 페이지도 만들었다. 사용자위치기반으로 검색이 기본적으로 되고 타 지역 검색도 가능하다.
이 페이지 역시도 키워드 검색을 활용하고 페이지네이션을 사용해주었다.
카드 밑 홈페이지 버튼을 누르면 관련 주소, 연락처 같은 정보들이 새탭으로 열린다.
마이페이지 - 산책로 확인 및 사진저장하기, 산책로 삭제
마이페이지는 모달로 만들었는데 내가 그린 산책로를 확인하고 삭제할 수 있다.
산책로에 호버하면 다운받기 텍스트가 나오고 클릭 시 이미지로 저장된다.
05. 트러블슈팅 🤯
프로젝트를 하면서 발생한 트러블슈팅은 따로 포스팅해두었다.
데이터저장 트러블슈팅
추가로 덧붙이자면 마지막에 배포 후에도 500에러가 뜨는 문제가 발생했는데
산책로를 한번 그릴 때는 문제가 되지 않지만 두번째 그릴 때부터는 저장이 되지 않고 500에러가 발생했다.
json-server는 알아서 id값을 주는데 우리가 닉네임을 사용하기 위해 id값을 부여하면서 생긴 문제였다.
콘솔에러로는 구체적으로 어떤 에러인지 모르겠어서 server의 문제라면 Network탭을 보면 되겠다는 생각을 했고 Header, Payload 등등 내가 그동안 공부하면서 튜터님들이 에러 확인하는 그 과정을 복기하면서 따라했다.
export const createRouteInfo = async (routeInfoData) => {
const dataWithId = { ...routeInfoData, id: crypto.randomUUID() };
await axios.post(PATH_ROUTE_API_URL, dataWithId);
};id: crypto.randomUUID() 를 부여해서 산책로를 만들 때 그 사용자의 고유한 아이디를 부여해 오류를 해결했다.
마지막 배포까지 참 쉽지않았다..ㅎㅎㅎ
06. 로고 및 로딩 디자인 🎨
로고이미지
로딩중 이미지
지도 마커 이미지
내 취향대로 했는데 다들 귀여워해주셔서 뿌듯했다😋
07. 추후 리팩토링 할 부분 🚧
- CRUD 부분에 신경써서 추가할 부분이 있나 체크해서 사용성을 높이고 싶었다.
- 상태관리를 주스탠드만 조금 써보고 tanstack query를 시간상 + 내 능력상 사용하지 못해서 꼭 리팩토링하고 최적화 리팩토링도 해보고 싶다.
- JWT를 활용한 인증/인가 로그인으로 리팩토링하기
- 모바일버전으로도 만들기
08. 마무리 🔥
초반만 해도 api를 못 다루고 json-server만 작업할 줄 알았는데 다행히도 고민해보고 2가지 api를 접목시켜서 원하는 기능으로 만들어보기까지해서 뿌듯했다.
비슷한 듯 처음 보는 에러코드도 많이 만나서 이를 해결하고 상태관리를 하는 것에 있어 신경쓰고 작업하게 된 프로젝트였다.
긍정적인 팀 분위기에 내가 너무 부정적인 기운만 뿌린 것 같아서 죄송했다.
화도 많이 났고 배운것도 많고 참 복잡한 감정이 오갔던 프로젝트인데 다른 분들한테 완성 사이트를 공유했을 때 좋아해주셔서 조금은 좋은 기억으로 마무리 된 것 같다.
다음 프로젝트에서는 긍정적인 마음으로 다른 사람을 이해하고 배려하는 사람이 되자. 🍀
