2차 프로젝트 후기
2020.12 월 중순, 1차 프로젝트가 끝남과 동시에 2차 프로젝트가 시작되었다. 이번엔 마이리얼트립 홈페이지를 클론하는 프로젝트였는데 끝나고 또 기업협업이 바로 시작되어 후기를 쓸 여력이 없었을 뿐더러, 개인적으로 만족스럽지 못한 결과물이어서 리팩토링을 꼭 하겠다 결심했기 때문에 현재 (2021.02) 리팩토링을 다 하고난 지금, 후기를 같이 써보려고 한다.
⛩ myDongMyoTrip ( 마이동묘트립 )
- 마이 리얼 트립 사이트 클로닝
- 소개: 마이리얼트립 홈페이지에서 회원가입, 항공권, 숙소페이지를 클로닝.
🎥 영상 & 깃헙
👨👩👧👦 팀원
사랑스러운 우리 15기 팀원들은 다음과 같다.
- Front-end: 이하영, 김해인(PM), 안미현
- Back-end: 우혁준, 이주형
📅 개발 기간
- 기간: 2020.12.28 ~ 2020.01.08 (11일)
🧑💻 적용 기술
- Front-end: React.js(Functional), React-router, hook, styled components, redux(리팩토링)
- Back-end: Django, Python, MySQL, jwt, bcrypt
- For communication: Git, Slack, Trello
💁♀️ 내가 구현한 기능
- 항공권 페이지
- React 함수형, 클래스형 component, styled components 이용한 전체적인 레이아웃 구현
- 슬라이더, 달력 라이브러리 사용
- class형 state를 이용한 상태변경, 전달
- 로딩페이지
- 항공권 리스트 페이지
- axios, async, await 사용하여 데이터 통신 구현
- 비동기를 이용한 로딩화면 구현
🤼♀️ 리팩토링한 부분
-
클래스형 -> 함수형 컴포넌트
이제는 함수형 컴포넌트가 훨씬 편하지만 그때는 막 배운 상태라 몇 메인컴포넌트가 클래스형이었다. 리팩토링하면서 상태관리로 리덕스를 같이 사용하였기 때문에 훅을 쓰기 위해서도 클래스형을 대부분 함수형으로 바꿔줬다. -
컴포넌트 재사용으로 중복되는 버튼이나 컴포넌트를 좀 더 효율적으로 만들었다.
아래는 seatListData라는 데이터를 만들어서 SeatList라는 컴포넌트로 넘겨준다음 map을 이용하여 화면에 뿌려주었다.
- 항공권 메인페이지의 데이터가 여러 컴포넌트에서 쓰이기 때문에 리덕스로 관리하면 편할 것 같다는 생각이 들었다. 그래서 리덕스로 바꿔주고 useSelect를 사용하여 필요한 컴포넌트마다 사용하였다.
- 데이터를 받을 수 없어 완벽하게 리팩토링을 하진 못했지만, 앞으로 새로 습득하는 기술들을 계속적으로 적용해보며 새로운 에디션들을 만들어 볼 예정이다.
💰 소감 및 후기
개인적인 관점
개인적으로 PM으로 팀원들에게 무엇을 해줄 수 있을까... 생각했었던 것 같다. 기술적으로는 내가 누군가에게 도움이 될 만한 월등한 실력이 아니기 때문에 이를 제외한 다른 부분에서 좀 더 서포트를 해 줄 수 있는 역할을 해야겠다고 생각했던 것 같은데, 그 중에서 가장 초점을 맞춘것은 월활한 의사소통. 최대한 팀원들이 나누고 싶은 얘기나 아이디어가 있을 때는 최대한 많은 대화를 하고 서로 이해하도록 분위기를 만드는 것에 신경을 쓴 것 같다. 그래도 나중에는 서로 놓친 부분도 있고, 잘 못 이해한 부분도 있었지만 이는 우리가 기술적으로 부족하여 서로 이해하지 못했던 것 같고, 서로 배려하고 존중하는 입장에서 의사소통을 했던 것에 5명이 화합하여 프로젝트를 한 가치있는 의미를 찾을 수 있는 좋은 기회였다.
기술적인 관점 (이라 쓰고 부족했던 것 이라 읽는다..)
- 기술적으로 참 많이 부족한 프로젝트였던 것 같다.
함수형 컴포넌트와 hook을 배움과 동시에 적용하고, 또 항공권은 메인페이지에 거의 모든 기능이 다 집약되어 있어서 하나하나 다 새롭게 시도해보는 기능들, 라이브러리 사용등으로 인해 이해, 적용, 생성의 프로세스가 개인적으로 시간이 참 많이 부족했다. - git 사용 미숙으로 commit이 없다.
프로젝트 거의 마지막에 어떤 에러로 인해 기존에 작업하던 디렉토리를 삭제하고, 새로운 디렉토리를 만들어서 다시 클론 받아 작업을 했었다. 플러스, 페이지 단위로 브랜치를 만들어서 작업했기에 그 많은 기능들이 한번에 다 있는 페이지 하나가 거의 다 만들어 질때까지 커밋을 거의 하지 않았다.(이 당시엔 커밋을 해야하는 기준 따윈 몰랐다.. 페이지 단위로 커밋을 해야 한다고 생각했던것 같다.) 이 모든 오류들의 결과로 불과 1개월 뒤 리팩토링을 하기 위해 커밋내역을 확인 했을 때, initial commit과 final 이라는 단 두개의 커밋만 남아있는 것을 보고 뒤늦게 경악을 금치 못했다...(지금은 fork하여 내 로컬레파지토리에만 커밋하며 리팩토링)
총평
많이도 부족했던 나와 같이 팀 프로젝트를 해준 팀원들에게 너무 고마웠다는 말을 첫 번째로 전해주고 싶다.
상황적으로 에어비앤비에서 2주동안 합숙하며 작업을 했었는데 다들 매너있고 배려있는 모습으로 프로젝트에 임해주는 모습, 작업할땐 집중해서 진지하게 임하는 모습 하나하나가 다 감동적이었다. 여러부분에서 많이 느끼고 많이 배우는 프로젝트였다.
