Project) 숙박업 이커머스

Github  /  배포사이트

 

# 회고 - 2023.07.06

 부트캠프 팀 프로젝트로 5인(back: 2, front: 3)이 작업했고 6주의 시간이 걸렸다. 처음 해보는 팀 프로젝트라 우여곡절도 많았고, 협업에 대해 무지했기에 발생한 이슈들도 많았지만, 값진 경험이었다.(덕분에 다음 프로젝트를 더 탄탄하게 시작할 수 있었다고 생각한다.) 처음 해보는 팀 프로젝트라 주변 지인 개발자분들에게 자주 조언을 구했고, 팀 프로젝트를 통해 사용해 보고 싶었던 협업 툴(Github issue카드로 작업 관리, Projects 생성, Dev log)을 사용해보고 평소 관심있었던 기능(DnD, Chart)을 구현할 수 있었던 좋은 기회였다. 비록 과정은 힘들었지만, 좋은 경험이었고 값진 시간이었다.
 

## 작업 내용

- 초기 개발환경 구축 : 기획단계에서 논의한 내용을 바탕으로 초기 개발 환경을 빌드했습니다.
(React, Typescript, Recoil, MSW, Axios,Tailwindcss, DaisyUI, GH pages (Github 바로가기))
- 협업 환경 구축 : Github Issue card / Projects(Dev Log, Dev Progress) 사용 제안 및 작성, 브랜치 전략을 제시했습니다.
- 디자인 시안 구매 : 보다 완성된 프로젝트 구현을 위해 프로젝트와 관련된 디자인 시안 구매 제안 및 Envato에서 시안 구매 후 개발을 진행했습니다.
- MSW :서버가 구현 되기 전, 프론트에서 작업을 진행하기 위해 msw를 사용해 mock data 생성 및 server/browser test code를 작성했습니다. (Github 바로가기)
- 숙소 및 객실 비교

: chart.js를 사용해 3개월간 가격 동향을 그래프로 나타냅니다.(크롤링한 데이터: 23년 7~9월)
: react-beautiful-dnd를 사용해 Drag & Drop 기능을 추가하여 기준이 되는 숙소나 room을 비교 모달의 맨 왼쪽에 위치할 수 있게 기능을 구현했습니다.
: 비교함에 담긴 상품의 데이터는 '비교하기' 버튼을 눌렀을 때에만 호출하였고, Promise.all()을 사용해 모든 데이터를 받아왔을 때 비교모달에 데이터를 띄워주었습니다.
: 비교함에 담긴 상품 중 가장 낮은 가격, 가장 높은 별점을 가진 숙소나 객실에 하트 마크를 붙여 사용자가 쉽게 비교할 수 있는 기능을 추가했습니다.
: 비교모달에 바로가기 버튼을 추가해, 추가적인 검색 없이 해당 숙소로 바로 이동할 수 있게 기능을 구현했습니다.
: 비교함에서 상품을 삭제하고 해당 숙소 페이지로 바로갈 수 있게 기능을 구현했습니다
 
- Main page : Search bar를 구현했습니다
(React Datepicker, 현재 위치 받아오기(navigator.geolocation.getCurrentPosition()))

 
- 숙소 상세페이지
: React-responsive-carousel을 사용해 각각의 이미지를 확대해서 볼 수 있게 처리했습니다.
: 숙소의 기본정보 / 편의시설 및 서비스 / 판매자 정보는 아코디언 형태로 구현해 사용자의 편의 고려했습니다.

 
 
 

## 기술적인 문제점 1 - MSW(Mock Service Worker)

*  MSW란, Service Worker API를 사용해 실제 api 요청을 가로채는 API Mocking Library이다. 즉, 특정 api에 요청을 보내면 이를 중간에서 가로채서 등록해 놓은 mock data를 response로 보내는 것이다. 이는 mocking이 네트워크 단에서 일어나기대문에 이후에 실제 api로 대체하는 것이 용이하게 한다.
- 초기 개발환경을 구축하면서, 팀원의 의견을 반영해 msw를 사용하게 되었다. 처음 사용해보는지라 공식 문서와 각종 블로그를 보며 환경을 구축하는데 시간이 꽤 걸렸지만, api 명세를 이해하고 이를 바탕으로 test 코드를 짜는건 더 많은 시간이 걸렸다.

1. Restful api 이해하기 : api 명세를 보며 msw handlers 함수를 작성했다. 기존에 있는 api를 호출해보기만 했지 URI를 자세히 본 적이 없어 URI를 이해하는데 한참이 걸렸다. 아직 API 명세가 미완성인 부분이 있어 이해하기 힘든 부분도 있었지만, Restful API에 대한 이해가 부족했다. 이 부분은 구글링을 통해 학습하였고 그래도 이해되지 않는 부분은 지인 개발자들에게 도움을 청하였다. 이번 경험을 통해 개발 관련 다른 분야에도 관심을 갖고 공부할 필요가 있다는 점을 깊이 깨달았다.
2. 공통으로 사용되는 path : API 명세를 확인하니, URI에서 ‘search’를 사용하는 경우가 많았다. 공부하면서 코드를 작성하다 보니, 공통된 path를 사용하는 경우에 대한 예외 처리를 해야 한다는 점을 인지하지 못한 채 코드 작성을 완료했다. 상위 코드에서 특정 조건을 만족하지 않으면 return 하는 식으로 코드를 짜니 원하는 결과가 나오지 않았다. 이후 문제를 확인하고 URI에 ‘search’가 있는 경우를 중심으로 코드를 새로 짰다.
3. test 코드 오류 : 코드를 수정하고 test를 진행하려 했지만, 동작하지 않았다. 이유를 몰라 3시간 넘게 구글링을 해도 답을 찾을 수 없었다. 이미 브라우저에서 test를 마친 상태라 포기하려 했다. 하지만, 진짜 마지막이라는 생각에 추가적으로 구글링했고 마침내 답을 찾을 수 있었다. vite.confing.ts 파일에서 test 부분이 없었기 때문이었다. 해당 부분은 개발 초기 환경 구축 시, 테스트 환경도 함께 빌드했지만, 개발이 지연될 수 있다는 의견이 있어 팀원들과 test code는 작성하지 않는 것으로 합의한 후, test 관련 코드를 지웠다. 이 부분을 깜빡한 채 test를 진행하려 하려 했으니, test가 되지 않았던 것이다.

관련 포스트) 

Dev Log) 2023.06.05 - 개발환경 구축(1주차)

 

## 기술적인 문제점 2 - Ubuntu CSS Error

SearchBar 컴포넌트를 만든 후 팀원들과 체크하는 과정에서, 내 컴퓨터에서만 CSS가 이상하게 동작하는 것을 확인했다. 왜지…. 아직 이유는 못 찾았다. 22년 11월부터 개발자라면 리눅스 환경에 익숙해져야 한다기에 리눅스를 사용하기 시작했는데, 내 pc 환경에 이런 문제가 있는지 몰랐다…. 

(23.06.10 기준) 해당 문제는 Linux 버전 문제로 발생한것 같다는 멘토님의 조언이 있었다.  다음 예시 이미지를 보면, Ubuntu에서 gap이 더 크게 적용되고 있음을 확인할 수 있다. 혹시나 해서 개인 프로젝트를 살펴보니,  font weight 부분도 다르게 적용되고 있었다. 
reset.css를 적용했음에도 문제가 발생하고 있는걸 보니, 다른 문제가 있는 듯 하다. 해당 부분은 Ubuntu update 후에도 동일하게 적용되고 있음을 확인했다. 우선 팀 프로젝트가 급해 window 환경에서 개발중인데, 혹시 아시는 분 계시면 댓글로 알려주세요 ㅠㅠ

 
ex) Window, Mac

 
관련 포스트)

Dev Log) 2023.06.12 - 우분투 CSS Error (2주차)

 
 

## 기술적인 문제점 3 - GH Pages 이미지 안뜸 / Refresh 404 page issue

• main branch가 업데이트되면 GH pages 로 자동 배포되도록 설정해놨는데, public 폴더에 있는 잊미지가 안뜬다... 해당 부분은 검색해보니, gh pages 주소를 이용한 절대경로를 사용해 문제를 해결할 수 있었다. 
• 다음 문제는 새로고침하면, 404 페이지가 뜬다.. 이는 GH pages는 SPA를 지원하지 않기 때문이라고 한다. 이 부분은 구글링을 통해  stackoverlow를 참고해 HashRouter를 사용, public 폴더에 404.html 파일 추가, index.html에 script 코드 추가, vite.config.ts파일에 build 속성 추가로 문제를 해결할 수 있었다.

 

## 기술적인 문제점 4 - API 명세 업데이트 이슈

• 기획단계에서 나온 ERD를 수정하는 형태로 사용하다 보니, API 명세가 수정되는 일이 많았다. 임시적으로 받은 API 명세로 Mock data를 만들어 사용하고 있긴 하지만, 지속적으로 업데이트가 필요했고, 실제로 그렇게 작업이 이뤄지다 보니, 불필요한 공수가 많이 들어간다고 생각했다. 해당 문제를 해결하고 싶었다. 해결책을 고민하는 과정에서 구글링을 하였고, Open source에서는  URI를 중앙관리하는 경우가 있다는 글을 보았다. 하나의 객체에서 URI를 관리하게 된다면, 최종적으로 API 명세가 나온 이후에 해당 객체만 수정하면 되니, 각 파일마다 각각 URI를 변경해주는 추가적인 작업은 필요하지 않을 것이라 생각했다.(작성한 코드는 다음 관련 포스트에서 확인할 수 있다.)

관련 포스트)

Dev Log) 2023.06.12 - GH pages (3주차)

 

## 기술적인 문제점 5 - 비교함 데이터 비동기 에러

• 지난 월요일(7/3)에, 가격 비교 차트 구현을 마무리 했지만, 비교 모달에서 drop 이벤트가 발생하면 차트에 필요한 데이터를 매번 새로 불러오는 이슈였다. 마감일도 얼마 남지 않았고 기능적으로는 문제가 없었기에 우선 배포가 먼저라는 생각에 타협했다. 지금까지 작업한 내용을 dev branch에 merge 하고 나니 마음이 편해져서 인지, 수정하고 싶었다.
  해당 부분을 해소하고자, 이틀간 작업했다. 컨디션이 좋지 않아 머리가 잘 돌아가지 않아서 생각보다 작업 시간이 길어졌다.
• 수정 작업을 진행하며 특히나 비동기 문제를 처리하는데 시간이 오래 걸렸다. 이전에 중복해서 데이터를 호출했던 방식과 동일하게 코드를 짰지만, 데이터를 받아오기 전에 이미 페이지가 렌더링 되어 데이터를 반환하지 못하는 에러가 있었다. 이 부분은  useState를 사용한 'isLoading을' 사용해 Promise.all()을 사용해 비교함의 모든 데이터를 가져 왔을 때, 비교 모달을 띄워주는 형태로 문제를 해결했다.

관련 포스트)

Dev Log) 20230705 - 비동기 에러

 
 

## 기타 문제점 - 서버 내림

나만 그런지 모르겠는데, 프로젝트로 무언가를 만들고 나면, 해당 프로덕트를 보면 기분이 좋아진다. 데모데이(23.07.06) 다음날 프로젝트 결과물을 보고자 배포된 사이트를 들어가 보았는데, 페이지가 동작하지 않았다. slack을 통해 팀원에게 물어보니, 금전적인 문제로 서버를 내렸다고 한다. 결국 msw로 처리하여 다시 작업했다. 초기 개발단계에 msw를 사용했었지만 api명세가 프로젝트 마감 1주차까지 변경되어서 수정에 시간이 많이 걸렸다ㅜㅜ
 

## 새로 배운 stack

• Drag & Drop
  • react-beautiful-dnd를 사용해 비교모달의 DnD를 구현했다. 가장 핵심적인 기능을 하는 onDragEnd 함수를 보니 drag하는 item을 변수에 담고 해당 요소를 drop한 위치에 옮겨 주는 형식으로 구현되어 있었다. 처음 구현해본 기능이라 어렵게만 생각했는데, 막상 원리를 이해하고 나니 유용하게 자주 사용할 수 있는 stack이라는 생각이 들었다. 
• Chart.js
  • 여러 차트 라이브러리가 있지만, 이전에 차트를 구현해본 적이 없어서 사용하기 쉽다고 하는 Chart.js를 사용했다. 공식 문서를 보면 각 차트별 예시와 사용법이 잘 나타나 있었고, 매우 적은 메모리를 사용하고 유지 보수가 잘 이뤄지고 있다고 해서 선택했다. 
  • 차트 구현 이전 한 주 동안 구글링으로 DnD 예시를 보며 간간히 공부해와서 차트 구현이 나름 수월했지만, item을 drag 할 때, 해당 item이 보이지 않는 이슈가 발생했다. 문제의 원인을 몰라 처음에는 답답했지만, 계속 앉아서 코드를 들여다 본다고 문제의 원인이 보이지 않을 것 같았다. 그래서 저녁 식사도 하고 휴식을 취하며 refresh 한 후 코드를 뜯어보고 DnD가 어떻게 동작하고 있는지 확인했다. 다시 보니 DnD 라이브러리의 기본 설정으로 들어가 있는 top과 left 속성값 때문에 item을 drag 할 때, 비교모달 밖으로 item이 나가 보이지 않았다.
    해당 부분은 top과 left 속성값을 조정해서 해결했다. 추가적으로 잘 동작하는지 확인하는 과정에서 오른쪽 상품을 왼쪽으로 옮길 때, 설정해준 left 속성값으로 인해 또 왼쪽으로 치우쳐 이동하는 이슈가 발생했다. 이 부분은 삼항 연산자를 사용해 추가적으로 left 속성값을 넣어주었다.
    늘 문제의 원인을 찾기 전에는 코드가 원하는 대로 동작하지 않아 속상하다. 하지만 시간이 오래 걸리더라도 구글링와 이런 저런 시도를 통해 문제의 원인을 찾고 이를 해결한 후 코드가 의도한 대로 동작하는 것을 보면 뿌듯함을 느낀다. 이래서 다들 개발 공부를 하나보다.

 

## Dev Log

 
 
 
Github : 

GitHub - Ryomi-j/YogiZogi

페이지 바로가기 : 

YogiZogi