첫 프로젝트
어떠한 일이든 처음하는 일은 설레이는 것 같다. 그리고, 기억에도 오래 남는다. 9월 말에 처음으로 코드를 치면서 나의 코드가 UI로 보여지는것에 대해 느꼈던 그 희열감은 아직도 잊지 못하고 있는데, 약 2주간 진행되었던 이 프로젝트도 기획부터 제작, 배포까지 직접해봄으로써 정말 인생에 있어서 두고 두고 기억에 남을것 같다. 그래서, 이 잔향을 오래 간직하고 프로젝트에서 부족했던 부분을 기록하고자 회고를 진행하고자 한다.
프로젝트 소개
프로젝트 모티브 사이트: 와이즐리 오픈워크(화장품 구독 서비스)
검증된 성분을 밝히고 합리적인 가격으로 로션, 선크림, 부스터, 클렌징폼 등의 제품을 정기적으로 배송해주는 화장품 구독 서비스 사이트이다. 이 사이트에 대한 아이디어는 팀원분께서 내주셨지만 전체적으로 사이트의 UI가 깔끔하고, SPA로 잘 이루어져있으며, 사이트의 취지도 마음에 들어서 재미있게 프로젝트를 진행할 수 있었다.
프로젝트 기간
- 2021.11.29(월) ~ 2021.12.09(목) (11일간)
프로젝트팀 구성원
- 프론트 3명, 백엔드 3명
프로젝트에서 맡은 역할
-
상품리스트페이지
(GET통신을 통한 상품UI 리스트화)
(클릭에 따른 상품 조건부 랜더링, 상세페이지와의 연결) -
장바구니페이지
(GET, PATCH, DELETE통신을 통한 Query Parameter를 사용하여 상품 증가/감소/삭제/전체삭제 구현)
(state,fetch상태에 따른 로딩중/빈장바구니 등 조건부 랜더링구현) -
구독관리 및 배송주기 설정페이지
(GET, PATCH통신을 통한 유저정보 랜더링 및 배송주기 변경 구현)
(DELETE통신을 통한 Query Parameter를 사용하여 구독취소 구현)
(구독상품에 따른 조건부 랜더링 구현) -
핵심성분페이지
(GET통신을 통한 성분UI 리스트화 및 슬라이더 효과 구현) -
AWS배포
(AWS EC2에 가상환경 구축하여 프로젝트 배포)
기술 스택
프론트엔드 : HTML, CSS, Sass, JavaScript(ES6), React.js, React-router-dom
백엔드 : Django, Python, MySQL, jwt, bcrypt, AWS(EC2, RDS), Docker, Schdule
협업 및 소통
- Git, Github
버전관리 및 초기세팅 후 branch단위 협업
- Standup meeting
아침마다 약 10분~15분간 어제 작업한 내용, 오늘 작업할 내용, Blocker요소 등을 말하고 목표 달성까지 남은 작업량을 확인하고, 팀원들의 작업상황도 공유한다.
개인적으로 가장 도움이 되었던 소통방식이었던것 같다. 아무래도 비대면으로 상황을 공유하다보면 팀원들이 겪고 있는 문제나 내가 힘들어 하고 있는 부분을 자세하게 알기 어려운데 아침마다 각자의 Blocker를 파악하고 같이 해결하기 위해 노력하였다.
- Notion
Standup meeting에서 공유한 내용을 토대로 매일 회의록을 작성하고, API명세서와 사이트 레이아웃 등 각자 작업에 필요한 내용들을 공유하였다.
-Trello
현재 각자가 이번주에 작업할 내용, 현재 작업중인 내용, remote master에 merge된 내용 등을 실시간으로 공유함으로써 각자 팀원들이 어느부분의 개발을 진행중인지 알 수 있었다.
또한, 내가 작업했던 장바구니 페이지로 예를 들면
1. 페이지 레이아웃
2. 장바구니 API GET요청 후 랜더링
3. 수량 추가, 감소 시 장바구니 API PATCH요청 후 메세지에 따른 랜더링
4. 제품 삭제, 전체삭제 시 장바구니 API DELETE요청 후 메세지에 따른 랜더링
5. 장바구니가 비었을 시 빈카트 레이아웃, fetch 중일때는 로딩중 레이아웃
6. 결제하기 클릭시 페이지 이동
등등
한 페이지안에서도 작업할 내용들이 많기 때문에 아래와 같이 단계별로 세분화하여 현재 진행중인 부분이 어디인지 명확히 하였다.
Slack & Google meet
평소에 작업시에는 Slack을 통해 master에 merge된 내용을 알리거나 필요한 부분에 대해서 소통을 하였고, 각자 집에 있거나 만날 수 없을때는 Google meet를 통해 대화를 하면서 소통할 수 있었다. 아래는 구독관리페이지를 제작 후 구독취소 버튼 시 구독 API에 GET요청과 DELETE요청을 보내는 과정이다. console로 data가 잘 들어오는지 공유하고, 현재 안되는 부분은 영상캡처를 통해 실시간으로 공유하고, 피드백을 들을 수 있었다.
또한, 아래와 같이 부담없이 질문과 제안이 가능한 분위기가 조성되어 각자가 겪고 있는 문제를 모두가 고민해볼 수 있었던것 같다.
소통의 중요성
이번 프로젝트로 느낀점은 협업과정에서 소통의 중요성이다. 사실 프로젝트를 시작하기전에는 그냥 각자 branch를 만들고, 각자의 결과물들을 합쳐서 어떠한 결과물을 창작해낸다고 생각했었다. 하지만, 이번에 작업을 하면서 팀 프로젝트는 팀원들이 서로 눈빛만 보더라도 어느부분에서 고충이 있는지 알 수 있을 만큼 각자의 작업들이 공유되어야 되고, 부담없이 질문과 의견을 낼 수 있는 분위기가 조성되어야 좋은 결과물을 얻을 수 있다는 것을 몸소 깨닫게 되었다. 부담없는 소통을 이끌어 내기위해 다양한 협업툴을 활용한 것이 좋은 선택이었던것 같다.
아쉬운 점은 1주차에 이러한 협업툴 사용법에 익숙하지 않아 제대로 활용하지 못했는데, 다음 프로젝트에는 더욱 다양한 기능으로 협업의 능률을 올릴 수 있도록 해야겠다.
