[패스트캠퍼스 X 야놀자] 프로트엔드 부트캠프 미니 프로젝트 후기

패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 미니 프로젝트 후기

---

 

미니 프로젝트는 숙박 예약 웹서비스 구현하는 프로젝트로

처음으로 백엔드 분들과 협업하는 프로젝트였다.

 

프로젝트 2개로 정말 바쁘게 지냈던 11월을 뒤로하고

미니 프로젝트 회고 겸 후기를 쓰려고 한다.

 

 

 

1. 구현 기능

내가 담당했던 기능은 다음과 같다.

 

상품(숙소) 상세 페이지

객실의 정보에 따라 객실 아이템을 세분화 해주었다. 만약 예약 마감의 객실일 경우 다음과 같이 예약 마감 표시와 상세 페이지에서도 예약이 불가능 하다

 

또한, 인원수를 변경했을 때 객실의 최대 인원수를 초과한 경우 최대 인원 초과 버튼으로 변경해주었다.

 

 

또한, 객실 아이템을 장바구니에 담으려고 할 때 로그인이 되지 않은 사용자라면 alert 창과 함께 로그인 페이지로 이동시켜 주었다.

 

 

장바구니에 담기를 성공했을 시 성공했다는 alert창을 띄어주었다.

 

객실 상세 페이지

 

객실 아이템을 클릭하면 객실 상세 페이지로 이동할 수 있다. 여기서도 내가 선택한 날짜와 가격 등을 확인할 수 있다.

 

 

달력 모달

react-datepicker 라이브러리를 사용해 달력 모달을 구현하였다

카카오 지도 API 연결

주소를 클릭하면 지도로 이동하고 또한, 주소복사 버튼을 통해 해당 숙소의 주소를 복사할 수 있다

 

야놀자 웹 사이트와 정말 똑같이 만들고자 노력하였고

생각보다 더 흡사하게 나온 것 같아서 정말 뿌듯했다!

 

정말 짧은 기간 안에 구현해야 했던 프로젝트여서

디자인을 온전한 걸로 가져가지 못한 점은 아쉬웠지만

기능적인 부분에서는 기획했던 모든 기능을 구현하였다!

 

2. 트러블 슈팅

 

(1).

🙅🏻 이슈  : 달력 모달에서 한 날짜만 선택이 가능했던 이슈

 

➡️ 해결 방법  : 야놀자에서는 한 날짜만 선택이 되면 자동적으로 다음날을 체크아웃 날짜로 설정이 된다. 이를 참고하여 달력 모달에서 체크인 날짜만 선택이 되어도 체크아웃 날짜를 자동으로 다음날로 설정해주었다.

또한, 달력에서 체크인, 체크아웃을 설정하면 모든 페이지에서 해당 날짜로 검색이 되어야 하기 때문에 체크인 , 체크아웃 날짜를 Recoil을 사용하여 전역으로 관리해주었다.

생각보다 QA를 진행하면서 달력 부분에서 내가 생각하지 못한 변수들이 많았다. 다음 프로젝트에서는 정말 할 수 있는 한 모든 가지수를 생각해서 개발을 꼼꼼히 진행하여야 겠다고 생각했다!

 

(2).

🙅🏻 이슈  : TypeError : kakao.maps.LatLng is not a constuctor 오류

 

➡️ 해결 방법  : 지난번에도 부딪혔던 에러였는데 다행히 저번에 트러블 슈팅을 기록해 두어서 바로 에러를 잡을 수 있었다.

에러는 아직 LatLng 메소드가 생성 되지 않았는데 이를 호출하려고 했기 때문에 발생한 것이다.

script url 안에 autoload=false를 해주면 간단하게 해결되는 문제였다.

앞으로도 트러블 슈팅을 정말 잘 기록해 두어야 겠다고 생각이 들었다.

 

3. 프로젝트 리팩토링

 

프로젝트가 끝나고 리팩토링을 할 수 있는 기간이 주어졌다

그동안 했던 코드를 쭉 살펴보니 생각보다 중복이 되는 코드들이 있었고

비즈니스 로직 분리를 위해 코드를 커스텀 훅으로 분리를 시켜주었다. 

코드가 보다 더 간결해졌고 재사용에 용이했다 

다음 프로젝트에서는 리팩토링 때가 아닌 실제 구현할 때 커스텀 훅으로 분리를 해야 겠다고 생각했다

 

또한, 스켈레톤 UI를 디자인 하였다.

그랬더니 화면이 깜빡거리는 것을 방지할 수 있었고 

사용자 입장에서 보다 더 나은 화면을 볼 수 있어서 좋았다!!

 

4. 마무리....

정말 개인적으로는 토이 프로젝트가 정말 힘들었었는데 (팀원들은 너무 좋았다.. 지금까지 서로 연락을 주고받음...진짜 말 그대로 프로젝트 자체가 힘들었다...)

끝나자마자 바로 조가 짜여지고 회의를 진행해서 진이 빠졌었다..ㅎ; 

너무너무 피곤하고 힘들었지만! 다행히 모든 팀원들이 적극적으로 임해줘서 첫 회의부터 일정을 빠르게 조율할 수 있었다.

그리고 내가 이번 프로젝트를 통해 첫 팀장직을 맡게 되었는데 

솔직히 너무 부담스러웠지만 나름 열심히 임하려고 하였다...!!

 

아무래도 첫 백엔드 협업 프로젝트인 만큼 일정이 촉박하지 않을까 하는 걱정이 있었다.

예전에 개발 동아리에서 백엔드와 협업에 실패..는아니지만 쉽지 않았던 경험이 있었다.

개발 일정을 계획적으로 정해두지 않아서 진짜 마지막 개발 5일을 남겨두고 API 명세서가 나왔고

마무리 하는 단계에서 시간이 쫒겨 부랴부랴 했던 경험이 있었기 때문이다.

 

하지만 이번 프로젝트는 달랐다

모두다 잘하고자 하는 의지가 가득했고 또 각자 역할을 성실하게 수행했다.

또한, 매일 회의를 통해 질의응답을 하면서 필요한 정보를 공유하거나 에러를 잡을 수 있었다.

 

그리고 이번에 처음으로 야놀자 현직자 분들께 질의응답시간도 있었고

또, 마지막 발표회때 코멘트도 해주셔서 좋았다.

실제 실무에서는 어떻게 협업을 진행하는지 간접적으로 배울 수 있었고

피드백 해주시는 부분들을 귀담아 들으면서 더 나은 코드를 위해 고민하는 시간을 가질 수 있었다.

 

정말 수월하게 미니 프로젝트를 마무리 할 수 있어서 기뻤다.!

팀장으로서 아쉬운 점이 많았고 또 속상했던 점도, 기뻤던 적도 많았지만

잘 마무리할 수 있어서 정말 다행이었다.

이번 미니프로젝트를 경험삼아 더 나은 개발자, 팀원이 될 수 있을 것 같다!

 

 

소스코드

https://github.com/YBE-7/MiniProject_FE