패스트캠퍼스x야놀자 웹 프론트엔드 부트캠프 미니프로젝트 리팩토링

리팩토링 내용

2주간의 프로젝트 기간이 끝나고 다시 2주동안 리팩토링을 진행하기로 했다.

전에는 객실(룸) 이미지가 없었기에 기본 숙소 이미지로 대체했었지만, 이번엔 오픈 api에서 더 많은 정보를 불러와서 해당 내용들을 추가하는 방식으로 진행하기로 했다.

 

내가 진행한 리팩토링 내용은 다음과 같다.

카카오맵 API 추가 -> 숙소 위치 마커 렌더링
마커 클릭 시 커스텀 오버레이 렌더링 -> 클릭 시 길찾기 페이지 생성
숙소상세정보 API 변경에 따른 추가 정보 get
객실 추가 정보 처리
장바구니 API 변경에 따른 로직 처리
예약하기 API 변경에 따른 로직 처리

 

 

 

리팩토링 기간

2023년 12월 4일 ~ 2023년 12월 15일

 

 

 

결과물

 

- 객실 이미지 슬라이더 구현
- 이미지 없을 시 기본 이미지 렌더링
- 숙소 상세 정보 API 추가에 따른 추가 및 상세 정보 get 처리
- 숙소 상세 및 추가 정보 아이콘 처리 및 값(boolean = false)에 따라 취소선 적용

 

 

 

- 장바구니 API 변경에 따른 post 처리
- 날짜마다 남은 객실 수만큼 장바구니 담기 가능

 

 

 

- 객실 시설 및 서비스 정보
- 아이콘 적용 및 값에 따라 취소선 적용

 

 

 

- 카카오맵 API -> 숙소 위치 마커 설정
- 커스텀 오버레이를 통한 UI 설계
- 길찾기 아이콘 클릭 시, 해당 숙소 주소로 카카오 길찾기 실행

 

 

 

회고

- 코드 관련 - 

2주간 리팩토링 기간이 주어졌지만, 백엔드 측에서 추가 정보를 불러오고 api를 수정하는 기간이 있어 먼저 카카오맵 api부터 작업을 시작했다. 예전에 코틀린으로 어플을 만들었을 때 카카오맵을 써봐서 쉽게 사용할 수 있을 줄 알았으나 생각보다 어려움을 많이 겪었다. 일단 웹을 잘하지 않은 상태에서 지도 api를 사용하려니 잘 안되는 부분이 많았다. 크기 조정과 오버레이 커스텀이 어려웠다. 우리 서비스의 전체 화면 크기를 1280px로 잡았기에 지도 크기를 1200px 정도로 잡아서 전체 화면에서는 지도가 크기 내에 잘 표시되지만, 화면 크기를 줄이면 지도가 max-width를 벗어나서 나오는 문제점이 여전히 존재한다. 리팩토링 기간 내에 해결을 못했지만, 앞으로 있을 파이널 프로젝트 기간에 틈틈히 공부해서 화면 크기를 줄이면 지도 크기도 맞게 줄어들게끔 다시 한 번 리팩토링을 진행하고자 한다.

 

지난 2주동안 이미 api 연결을 해봤기에 이번에 바뀐 api를 적용하는 것은 크게 어렵지 않았다. 지난 2주동안에는 내 페이지 자체가 숙소 정보를 불러오는 api와 장바구니에 담는 api, 예약하기 api 등 가장 많은 api를 사용하는 페이지라 부담감이 컸고 실제 백엔드가 제공해준 api를 연결하는 작업을 처음해봐서 어려움을 많이 겪었었다. 어떻게 post하고 get하는지 원리를 몰랐지만 지속적으로 백엔드 팀원과 회의하고 프론트 팀원들과 논의하면서 post, get하는 방법을 익혀나갔다.

 

또한 위에서 말했듯이 내 페이지 자체가 많은 정보를 불러오고 보내는 페이지라 작업할 부분이 많았는데, 이를 컴포넌트화 시키는게 많이 어려웠다. 

 

 

이게 내 페이지 컴포넌트인데, 순서대로 날짜 작업을 하는 캘린더, 숙소 이미지 슬라이더, 카카오맵, 숙박 인원 선택, 숙소 추가정보, 숙소 이미지 슬라이더, 숙소 상세 정보, 객실 이미지 슬라이더, 객실 추가정보 컴포넌트로 분리해서 작성하였다.

 

최대한 분리했지만 ProductsDetail 컴포넌트에서 나머지 컴포넌트들을 전부 임포트해서 쓰는 구조이고 css로 emotion을 써서 해당 컴포넌트 코드 길이가 600자가 나왔다. 

이 또한 카카오맵과 마찬가지로 파이널 기간에 시간을 내서 컴포넌트 분리하는 연습을 더 하고자 한다.

 

 

- 협업 관련 - 

백엔드와의 협업이 처음이었지만 이번 협업을 통해 경험을 쌓을 수 있어서 프론트엔드 개발자로서 한 걸음 더 성장하는 계기가 되었던 것 같다. 하지만 협업을 하는 과정에서 백엔드와의 마찰이 생겼고 이에 대한 생각을 짧게 정리해보려 한다.

 

리팩토링을 진행하기 전에 서로의 리팩토링 방향성에 대해 더 논의를 하고 자신의 의견을 말했으면 좋았을 것 같다라는 생각을 하게 되었다. 일차적으로 마찰이 생긴 이유는 백엔드가 생각하는 리팩토링 방향성과 프론트엔드가 생각하는 리팩토링 방향성이 달랐는데, 이를 구체화해서 서로의 입장을 확실히 전달하지 않은 상태로 리팩토링을 진행하고 이에 대해 소통을 안하다가 마지막 날 즈음에 알게 되어서 마찰이 커졌었다. 

 

또한 소통을 할 때 자신의 의견을 '어떻게' 전달하는 지가 협업에 있어서 정말 중요한 요소인 것을 알게 되었다. 백엔드와 프론트엔드라는 큰 차이점이 있으니 서로 의견 차이가 있는 것은 당연하다고 생각한다. 하지만, 같은 말이어도 어떻게 전달하냐에 따라 그 협업이 좋게 마무리되냐 안좋게 마무리되냐를 결정짓는 것 같아서, 이번 프로젝트를 통해 소통 방법과 상호 존중을 어떻게하면 좋을 지 고민하는 시간을 가지게 되었다.