위코드 2차 프로젝트 후기 : myhoneytrip (myrealtrip)

프로젝트 소개

 

- 프로젝트 기간 : 2022년 8월 1일 ~ 2022년 8월 12일 (12일)

- 마이리얼트립을 모티브로 한 항공권 예매사이트
허니문 항공권 예약과 관련된 사용자의 소셜 로그인(kakao), 검색결과 기반 상세페이지, 항공권 예약, 마이페이지까지 이어지는 커머스 사이트의 기본적인 Flow 기능을 구현한 사이트입니다.

 

* 배포 주소 : 

http://2nd-myhoneytrip.s3-website.ap-northeast-2.amazonaws.com/

 

*깃허브 주소:

https://github.com/wecode-bootcamp-korea/35-2nd-myhoneytrip-frontend

 

팀 소개

- 팀명 : 마이허니트립 TEAM

- 팀원 : 총원 7명 / 프론트엔드 4명(이강철(PM), 구단희, 산수정, 김익현), 백엔드 3명(음정민, 황유정, 안상현)

 

활용한 협업 툴

FE: Javascript, React, React-Router, styled-components
library : slick slide, react date picker, mui modal, mul table
BE: Phython, Django, MySQL, MINICONDA3, POSTMAN
Common : Git&Github, AWS Comunication : Notion, Slack, Trello, Github

 

구현 기능 (주황색글씨 : 내가 구현한 사항)

 

구단희 : 로그인 페이지, 메인 배너 Carousel, Nav, Footer
김익현 : 로딩 페이지, 항공편 예약 및 마이페이지(예약 확인 및 취소)
신수정 : 검색 상품 리스트 페이지, 검색 결과 filtering
이강철 : 메인 페이지(항공권 검색, 최근 검색 항공권, 추천 상품 리스트 통신 및 매핑)

• 항공 패턴 (왕복 / 편도), 목적지, 날짜(달력 library), 인원수 설정에 따른 데이터 생성.
• 검색 버튼 클릭 시 쿼리파라미터를 이용한 검색 데이터 전달.
• 로컬스토리지 활용한 최근 검색 항공권. 각 최근 검색 항공권들 클릭시 해당 데이터 검색으로 이어지게 함.
• mock data로 호출한 추천 상품 노출, 카드 클릭 시 해당 정보에 맞는 검색으로 이어지게 함.

후기 : 

첫번째 프로젝트를 경험한 이후의 2차 프로젝트이기 때문에 좀 나으려나 했는데 마찬가지로 정신없이 지나갔다.

1차 때보다 난이도가 있는 프로젝트이기도 했고 새로운 것들을 적용해 보는 과정에서 시간이 많이 소요되었다. 

 

아직도 못해본 것들이 많은데, 그래도 그 많은 것들 중 몇 가지씩 지워나가는 느낌이 있다. 

7명의 팀 안에서 PM을 경험해 보았고, css가 아닌 style-component로 코드를 작성해 보았다. 라이브러리를 사용해 보았다.  

 

사이트가 가지고 있는 기능 자체가 많았고, 백엔드의 경우 유닛테스트, 프론트도 라이브러리와 스타일 컴포넌트 활용이라는 미션이 있어서 쉽지 않았다. 그래도 배포까지 무사히 잘 끝냈다. 

 

하나의 결과를 얻기 위한 많은 방법들이 있는데, 배우면 배울수록 좀 더 효율적이고 쉽게 도달할 수 있게 되는 것 같아서 좋다.

 

다만,

이번에 라이브러리를 활용하면서 많이 막혔던 것 처럼, 단순히 '어떤 상황에 어떤 값을 넣어라' 라는 식의 접근보다는,

제대로 이해하고 사용하는게 중요하다는 것을 느꼈다.  왜 이 값을 여기에 넣어야하고, 이 값을 여기에 넣으면 내부에서는 어떤 일이 일어나게 되는지.

이해하지 못하고 사용하면 사소한 문제에도 휘청거리게 된다. 이해하고 나면 재미있는데, 하기까지의 과정이 힘들다.

 

 

잘한 점

pm으로써 전체적인 맥락을 파악하려 노력했다. 이전 1차 때는 내가 맡은 페이지와 그와 연관되어 있는 부분들에 대해서만 관심을 가졌다면 이번 프로젝트에서는 페이지간의 연결성, 데이터가 페이지 사이에서 어떤 흐름으로 움직여야 하는지 큰 그림을 가지고 접근했다. 팀원들의 진행도를 파악하고 어떤 기능들을 추가하고 덜어낼 지 고민했다. 

 

아쉬운 점

- 시간 분배 문제였다. 초반에 공부할 때 습관이 잘 못 들었는지, 안풀리는 문제를 무슨 승부라도 되는 것 마냥 놓아주지 않는다. 조금만 더 하면 풀어낼 수 있을 것 같은 그 느낌.. 라이브러리의 css를 변경하는 정말 사소한 문제였는데 결국엔 그 부분을 갈아엎고 처음부터 작업해야 했다. 1차 때 느꼈던 아쉬운 점과 같은 아쉬움이라 더욱 아쉽다.

 

 기한이 정해져 있는 프로젝트에서 가장 중요한 것은 기한 이라는 것. 이상하게 프로젝트 초반에는 왠지 모르게 여유가 생긴다. 에너지의 분배를 프로젝트 초반/중반/후반 으로 나눈다면, 초반 20%, 중반 30%, 후반 50% 이런식으로 분배하게 되는데 조금 더 세밀하게 계획을 짜서 적절하게 분배 할 수 있도록 해야겠다. 후반에 그만 피말리고 싶다..

 

- 시간이 조금 더 있었다면 좋았을 것 같다는 생각을 했다. 리덕스에 대해서 배웠는데 결국 시간이 촉박해서 기존에 알던 것들로 풀어내야 했다. 코드도 말끔하게 리팩토링 해가면서 짜보고 싶었는데, 이 부분도 실패.

 

- 1차 때는 페이지 단위로 브랜치를 만들었는데 이번에는 기능 단위로 브랜치를 만들어서 push하는 걸로 계획을 세웠었다. 그런데 각 브랜치의 기능 간에 겹치는 부분들이 있어서 피곤한 상황이 되었다. 브랜치에서 포함해야 하는 하나의 기능만이 아닌 다른 브랜치의 기능에도 영향을 주는 브랜치가 되버린 것. 결국 합쳐서 하나의 브랜치로 올렸는데 이 부분을 합칠 생각을 못하고 계속 분리하려다 보니 애를 먹었다. 

 

 

 

시행착오 들이 쌓여간다. 배워야 할 것들과 배우고 싶은 것들을 시행착오를 통해 얻어 간다!

 

 

팀 마이허니트립 ! 팀원들 모두 잘 해줘서 넘 고마웠씁니다~~~😁