2차 프로젝트
- 프로젝트 클론코딩 사이트: Airbnb
- 진행기간: 2022/10/31 ~ 2022/11/11
- 팀명: AirB
- 팀원: 프론트엔드개발자 4명, 백엔드개발자 3명
Demo Video
적용기술
Front-end
JavaScript,React,Styled-components
Back-end
Node.js,Express,MySQL,EC2,RDS,Rest
Common
Git,Github,AWS
협업툴
Notion,Slack,Trello,Figma,Postman
내가 담당했던 구현 요소들
카카오 소셜 로그인 (OAuth 2.0)
GNB Filterting
Book
Blocker
2차 프로젝트는 blocker를 해결하는 과정에서 많이 성장했다고 느낀 프로젝트였다.
❗️ 먼저, 가장 힘들었던 blocker로는 모달의 상태관리이다.
내가 맡게 된 Global Navigation Bar에는 총 5개의 모달이 필요했었다.
- 공용으로 사용할 로그인 모달 (react-modal 라이브러리 사용)
- Profile 드롭다운 메뉴
- 지역 선택 모달
- 날짜 선택 모달 (react-datepicker 라이브러리 사용)
- 게스트 수 선택 모달
이 모달들은 useState 훅을 사용해서 boolean 값으로 mount, unmount를 관리했다. 하지만, GNB 컴포넌트의 구조에 대한 설계를 하지 않고 모달들을 만들어서 다른 컴포넌트에서는 클릭 이벤트가 발생하지 않았다.
문제점을 해결하기 위해서 컴포넌트 구조를 파악하는 것이 가장 중요하다고 생각했다.
taskheat을 사용해서 컴포넌트 구조를 그렸고, 기존에 만들었던 폴더 구조를 모두 변경했다.
이번 프로젝트에서는 리덕스를 사용하지 않아서 모달들의 상태관리는 Nav.js와 GlobalNav.js 컴포넌트안에서 관리했다. 라이브러리를 사용하지 않아서 불편함은 있었지만, 이 방법으로 state 값들을 한눈에 볼 수 있어서 컴포넌트 구조를 파악하기 쉬웠고 코드의 가독성도 좋아졌다.
프로젝트를 마치며
이번 프로젝트는 1차때와는 다르게 다양한 라이브러리 사용이 가능했었다. 당연히 라이브러리를 사용하면 개발면에서 속도가 빨라지고 여러모로 편할 것 같다는 생각이 들었다. 하지만, 라이브러리 사용과 관련해서 많은 blocker가 발생했다.
익숙하지 않은 라이브러리 사용으로 인해서 각자의 티켓에 차질이 생겨서 PR이 늦어지는 일이 발생했고, 전체 프로젝트의 일정에 영향을 주기도 했다.
또한, 팀원들과의 라이브러리 사용에 대한 소통의 부재로 인해서 라이브러리를 중복으로 사용한 경우도 있었고, 사용하지 않은 라이브러리를 각자의 브랜치에서 삭제하는 바람에 package.json과 package-lock.json 파일에서 엄청난 conflict를 경험했다.
프로젝트 초기 단계에서 라이브러리 사용에 관련하여 활발한 소통을 했다면 겪지 않았을 blocker에 대한 아쉬움이 많이 들었다. 이번 conflict를 팀원들과 함께 해결하면서 다시 한번 소통의 중요성을 깨달았다.
