✅ 프로젝트 소개
MEGABOX
우리 팀이 프로젝트로 클론코딩을 진행한 사이트는 MEGABOX다. MEGABOX는 영화 정보 안내와 정보 공유 그리고 영화 예매, 상영시간표 안내, 극장 정보 안내 등 메가박스 영화관 안내 사이트다.
해당 사이트를 클론하기로 한 이유
대부분의 팀들이 1차에서 e-commerce를 진행해서 피하자는 의견이 있었고, UI와 기능면에서도 배울 점이 많았고 데이터가 풍부해 2차 프로젝트에 알맞을 것 같다는 의견이 나왔다. 그리고 실제 메가박스 사이트의 아쉬운 점을 보완해보자는 의견이 있어 진행하게 되었다.
진행기간
2022/09/19 - 2022/09/30 약 12일간의 프로젝트
팀 구성
JUSTCODE 6기
FE : 나를 포함한 4명
BE : 2명
기술 스택
Front-End : Javascript, React.js, scss, axios, lazysizes, styled-components, react-icons, react-router-dom, qs
Back-End : Node.js, express, MySQL etc.
Communication : slack, Notion, zep, Trello
구현 기능
로그인
회원가입
mypage
메인 페이지 : 박스오피스 UI & 링크, 검색, 좋아요 기능, 그 외 UI
영화 리스트 : 영화리스트 UI & 카테고리, 필터, 검색, 페이지네이션, 링크, 좋아요 기능
영화 상세페이지 : 영화 상세 정보, 영화 정보, 영화 관람평(영화를 관람한 사람만) UI & 기능
예매 : 빠른 예매, 상영 시간표 UI & 기능
👋🏻 내가 맡은 역할!
메인페이지
박스오피스 UI와 링크, 검색, 좋아요 기능
영화리스트
영화리스트 UI & 카테고리, 필터, 검색, 페이지네이션, 링크, 좋아요 기능. 404 페이지. (필터기능에서 원래 메가박스 홈페이지의 문제점을 보완해 수정 & 구현함)
컴포넌트 구성
/pages/main/main : 메인 페이지
/pages/movie/movie: 영화 리스트 페이지
/components/main/main: 메인 페이지에 필요한 자식 컴포넌트
/components/movie/movie: 메인 페이지에 필요한 자식 컴포넌트
✅ 프로젝트 진행과정
Planning meeting!
① 구현 기능 파악 및 계획 그리고 분배
프로젝트 시작 전 날인 9/18 일요일에 첫번째로 planning meeting을 진행하기로 모인 미팅에서 팀명을 정한 후에 클론코딩할 사이트를 정하고나서 프론트와 백에서 각각 구현해야할 것을 정리해보았다.
나와 프론트엔드 포지션인 팀원들이 파악한 기능은 위와 같았고 심사숙고 끝에 각자 맡을 파트를 분배했다. 백엔드 팀원들도 서로 얘기를 나눈 후에 파트를 분배했다!
② 컨벤션
1차 프로젝트 때 나는 깃이며 코드며 컨벤션에 대해 잘 몰랐을 때라 지킬 컨벤션이 없었었다. 나중에 다른 팀이 마무리 한 것을 보니까 꼭 2차 프로젝트에선 컨벤션에 대해 얘기나누어봐야겠다는 생각을 했었다. 우리 팀은 나의 주도하에 깃 컨벤션과 라이브러리, 클래스명, 스타일드컴포넌트 사용 등의 컨벤션을 정했다.
③ 칸반보드 티켓 관리
이번에는 팀원이 Trello를 사용해보자고 의견을 제시하셔서 Trello를 사용해보기로 했다. 생각보다 노션에서 티켓관리하기가 복잡하다는 생각을 가지고 있었고 1차 프로젝트보다 나누어야 할 카드가 많아졌기 때문에 다들 긍정적이었다.
노션과 비슷하지만 더 세세하게 Backlog(앞으로 해야할 것들) This Week(이번주 안으로 진행해야할 것들) In progress_Front In progress_Back (진행 중) Block (막히는 부분) Done (완료)로 분류하고 각자 해야할 업무를 티켓으로 정리했다. 그리고 프론트와 백은 라벨 색으로 구분하고 각자 이름과 목표하는 날짜를 지정하여 진행했다. 처음에는 어떻게 티켓을 구분해서 사용해야할 지 잘 몰랐지만 프로젝트를 진행하다 보니 감이 잡혀 적극적으로 사용했다. 세분화해서 티켓이 나누니 나와 팀원들의 진행상황이 어디쯤인지 파악할 수 있어 유용했다.
Daily meeting
우리 팀의 데일리 미팅은 매일 오전 10시 진행되었고, 실제 구현한 페이지를 공유하면서 진행사항을 보고하고 금일 진행할 사항에 대해 공유하는 식으로 진행했다. 그 과정에서 프론트끼리는 질의응답과 서로에 대한 피드백이 이루어지기도 했고, 백엔드와는 어떻게 진행할지 대화를 나누었다.
이 밖에도 가끔씩 서로 막히는 부분이 있거나 의논해야하는 사항이 있으면 슬랙에서 대화하거나 zep에 모여 논의했다.
✅ 프로젝트를 통해 얻은 것
페어 프로그래밍
나는 영화리스트 페이지를 담당했고 영화 상세페이지를 담당한 팀원과 예매, 더보기 버튼과 좋아요 기능, 알림 모달 창 컴포넌트가 겹치는 부분이 몇 군데 있었다. 어느 정도 레이아웃이 나오고 좋아요 버튼 컴포넌트랑 모달 컴포넌트를 같이 만나서 페어 프로그래밍을 하기로 했다. 실제로 팀원을 만나서 프로젝트를 진행하는 것이 처음이라 너무 신기하고 설렜다. 직접 만난 후 각자 조금씩 만들어놨던 코드가 있어서 서로 번갈아가며 드라이버, 네비게이터가 되어 페어 프로그래밍을 진행했다.
코딩하는 것도 그렇지만 컴포넌트를 같이 쓰는 것과 직접 만나서 페어 프로그래밍을 하는 사실이 처음 겪는 상황이기도 하고 뭔가 진짜 개발자가 된 기분이라 너무 설레고 좋았다. 앞으로 개발자로 살아가는데 있어서 이때의 경험이 가장 나를 설레게 했던 경험이지 않을까 싶을 정도로 너무 기분 좋은 경험이었다.
컴포넌트 분리 & 재사용
이전의 프로젝트에서는 스프린트, 실무 찍어먹기 식의 진행이라 맡은 부분이 그리 많지 않았었는데 이번에는 살짝만 봐도 복잡할법한 페이지를 맡게되어 고민이 많았다. 그래서 생각해낸 방법은... 마인드 맵 형식으로 손으로 직접 구조를 그려보기였다. 컴포넌트를 생성하기 전에 어느정도 틀을 갖추고 진행을 하니 분리가 아주 쉽고 재사용하는데에 있어 도움을 많이 받았다..(과거의 나 칭찬해..!)
카테고리 분류와, 필터, 검색 부분때문에 데이터 바인딩하는 게 많은 상황이었고 그 부분이 아직은 어렵고 복잡하기도 해서 컴포넌트 자체를 복사해서 비슷한 컴포넌트를 재생성해서 사용할 뻔 했지만 구조를 잘 그려두고 머릿 속으로 정리해둔 덕에 그런 일은 면하고 정말 알뜰살뜰하게 리액트를 잘! 사용해 볼 수 있었다. 또한 메인페이지의 박스오피스와 영화페이지 부분의 영화 카드가 겹치기도 해서 정말 컴포넌트를 잘 분리하고 잘 사용했다고 생각할 수 있었다고 본다.
사용자 관점의 시선 👀
영화 이미지와 정보 데이터 양이 많다보니 로딩 속도가 매우 느렸다. 어떻게 하면 리액트 렌더링을 최적화 할 수 있을지 고민하다가 lazy-loading으로 최적화 할 수 있다는 것을 알게 되어 lazy-sizes를 이용해 lazy-loading을 적용시켰다. 개발만이 목적이 아니라 사용자의 편의성을 향상시키고 사용자 관점에서 서비스를 설계할 수 있을지 고민하는 개발자로 거듭날 수 있었다.
라이브러리 사용
이전의 프로젝트에서는 협업경험과 리액트에 적응하는 것에 의의를 두고 진행을 했기 때문에 많은 라이브러리를 사용하지 못했다. 이번 프로젝트에서는 1차 프로젝트 보다 성장한 나의 모습을 보여주고 싶었기 때문에, 다양한 라이브러리를 사용하게 되었다.
✅ 성장한 점
컨벤션
이번 프로젝트를 진행하면서 팀프로젝트에서는 컨벤션을 통일하는 것이 매우 중요하다는 것을 깨달을 수 있었다. git commit 메세지라던가 기술 사용하는 부분에서 얘기를 깊게 나누고 프로젝트를 진행하면 좋겠다는 생각을 했다. 다음 프로젝트에선 import 순서, CSS 권장 순서, 커밋 컨벤션, 코드 컨벤션 등을 팀 동료들과 조금 더 엄격하게 지킬 수 있으면 좋겠다고 생각했다.
CSS
프로젝트 규모가 커지고 리액트 컴포넌트 단위의 개발을 하게 되면서 Styled-Components를 사용하게 되었다. 가장 유용했던 것은 props를 활용해 스타일링을 할 수 있어 컴포넌트를 재사용하기에 유용했다.
Styled-Components를 처음 사용하는 과정에서 태그 별로 만들어 사용했는데, 사용하다보니 태그 하나하나 사용하는 것보다 큰 틀로 나눠서 사용하되 nesting 기능을 사용하면 가독성있게 작성할 수 있다는 점을 깨달을 수 있었다.
또한, 이번 프로젝트를 하면서 스타일 레이어를 쌓을 일이 많았는데, 그 과정에서 잘 사용하지 않았던 속성들을 많이 사용해야해서 스타일링에 오랜시간을 소요했다... 그 과정에서 position 속성을 자주 사용하며 속성 값의 차이에 대해 확실하게 알 수 있었고, 가상 선택자를 활용해 스타일링을 할 수 있게 되었다.
✅ 완성모습
✅ 마치며
STARBOX 프로젝트는 이전 프로젝트를 진행했을 때에 비해 제 자신이 급격하게 성장했다는 것을 느낄 수 있던 프로젝트였습니다. 그동안 동료들에게 많은 도움을 받아서 저도 받은 만큼 영향을 끼칠 수 있도록 노력했습니다. 팀원들이 공통으로 사용하는 컴포넌트를 주도적으로 개발했고, 제가 작성했던 코드를 바탕으로 팀원들에게 도움을 주고 기술들을 공유할 수 있던 시간이었습니다. 같은 컴포넌트를 사용하는 팀 동료와 페어프로그래밍을 하며 서로 도움을 많이 주고, 백엔드 엔지니어와의 소통에 적극적으로 참여하여 제가 담당한 부분의 API 데이터를 효율적으로 관리할 수 있었는데, 그렇게 협업을 하는 과정에서 흥미를 생겨 뿌듯한 시간이었습니다.
개인적으로 여러가지 부분에서 도전을 해 프로젝트를 성공적으로 마무리하게 되어 저에게 칭찬을 해주고 싶고, 만족한 경험이었습니다.
