✔️프로젝트 소개
- wecode 38기 1차 프로젝트
- 스웨덴의 가구 브랜드 IKEA에서 영감을 받은 가구 커머스 프로젝트
- 진행 기간 : 2022.10.17 ~ 2022.10.27
- 팀명 : weKEA(Front-End:3명, Back-End:3명)
- 팀원
- Front-End : 김솔(PM), 김도영, 양동선
- Back-End : 김희연, 이찬우, 정해만
결과물
✔️적용 기술
Front-End
- Javascript, React.js, sass, React Router, Create React App
Back-End
- Javascript, Node.js, Express, MySQL
common
- Git & Github, AWS, ESLint, Prettier
협업툴
- Notion, Slack, Trello
✔️팀 내 역할
PM
Nav Bar, Detail Page, Cart, Wishlist 레이아웃 및 기능 구현
API 통신 관련 코드 작성
✔️프로젝트 전반을 돌아보며
우선 이번이 내 개발인생 첫 팀 프로젝트이기도 했고, 내가 선정한 웹사이트인 IKEA가 주제로 선정된데다가, PM까지 맡게되어서 정말 잘하고싶다는 마음이 컸지만, 이번 프로젝트를 돌아보면 잘했던 점 보다 아쉬웠던 점이 먼저 떠오른다.
첫 프로젝트, 첫 PM이라 미숙한 점이 정말 많았다.
📋 아쉬웠던 점
Trello 관리
협업툴인 Trello를 사용하는것부터 어려움이 많았는데, Front-End/Back-End 각각 보드를 나누는게 보기 편할것이라 판단해 보드를 나눠놓았는데, 프로젝트가 중반부를 넘어가면서부터 서로의 진행상황을 알기 어려웠다.
부족한 초반설계
서비스를 전체적으로 바라보는 능력이 부족하고, 해야할 일의 양이 많아 우선순위가 잘 정리되지 않아서 프로젝트 초반부에 이루어졌어야 할 데이터에대한 설계가 많이 부족했다. 개발을 진행하다보니 근시안적인 초반설계가 문제가 되어 장바구니와 리스트페이지에서는 productOptionId, 상세페이지와 위시리스트에서는 productId가 필요한 상황 등 여기저기 꼬여버린 기능들이 있었고, 탄탄한 초반설계가 있었다면 불필요했을 비효율적인 코드가 많이 요구되고, 그만큼 시간도 많이 들었다.
소홀했던 Daily Stand up Meeting
시간약속이 잘 지켜지지 않았고, 나를 포함한 구성원 모두가 스탠드업 미팅의 중요성에 대해 크게 실감하지 못했던 것 같다. 그래서 진행상황이나 블로커가 잘 공유되지 못했고, 그러다보니 매번 진행상황을 물어보러 다니거나 금방 해결될 문제를 오래 안고있는 불필요한 시간낭비가 조금씩 쌓여갔다.
부족한 리더십
PM의 역할을 제대로 수행하지 못한것같다는 아쉬움이 남는다. 한 명이 늦으면 그 사람을 제외하고서라도 스탠드업 미팅을 진행하고, 팀원들이 바빠도 팀 전체를 위한 일이라면 추진하는 리더십이 있었으면 좋았겠다는 생각이든다.
아쉬움을 바탕으로 정리해본 다음 프로젝트에 적용할 사항은 다음과 같다.
- 프로젝트 초반, 시간이 걸리더라도 모든 구성원들이 모여서 데이터 설계를 끝내고 개발을 시작할 것
- Daily Standup meeting은 반드시 진행할 것
- Trello를 보기좋게 관리하고, 자주 확인할 것
📋 좋았던 점
프론트/백 간의 소통
프론트/백 양쪽다 초보이고, 첫 팀 프로젝트이다보니 서로 지식의 범위가 다르고, 작업의 방식이 많이 달랐다. 하지만 우리는 서로를 이해하고, 이해시키기 위해 노력했고, 그 과정에서 많은 소통이 있었다. 프론트에서 어떤 방식으로 데이터를 요청하고, 보내준 데이터를 어떤식으로 사용하는지, 백에서 데이터를 정리하고, 요청받고, 전송해주는 방식까지 서로를 배려하며 소통한 결과 큰 문제없이 프로젝트가 진행되었다. 다음 프로젝트에도 이번처럼 소통에 많은 노력을 쏟을것이다.
💻 기억에 남는 코드
모달의 배경부분 클릭해서 닫기
Before
After
모달의 배경부분이나 닫기버튼을 클릭하면 모달이 닫히도록 구현해야 해서, 처음에는 Before 1번처럼 클릭한 이벤트 타겟의 클래스네임을 조건으로 타겟이 배경이거나 닫기버튼일때 모달을 닫는 함수가 실행되도록 했었는데, 함수가 복잡한 것 같다는 피드백을 받고 Before 2번 처럼 dataset을 활용한 방식으로 바꿨다.
하지만 2번 역시 문자열을 사용하는 방법이고 dataset을 사용하기 위해서는 두 요소에 직접 dataset을 지정해줘야 하기 때문에 비효율적인 방법인것 같아서 마지막으로 적용한 방법은 After처럼 클릭하면 모달이 닫히는 두 요소를 클릭하면 조건없이 모달을 닫는 함수를 실행하게 하고, 클릭해도 모달이 닫히면 안되는 부분에 e.stopPropagation()을 사용해 이벤트 버블링을 막아주는 방법으로 개선했다. useRef를 사용하는 방법도 있어서 다음에는 그 방법도 활용해 볼 예정이다.
소감
wecode의 첫 4주를 포함한 개발 공부를 진행한 기간들에는 "코더"로서의 성장이였다면, 이번 프로젝트를 통해 "개발자"로서의 성장을 이룬것 같은 기분이 들었다.
소통, 시간관리, task관리의 중요성에 대해 정말 크게 깨달았다.
2주동안 정신없이 달렸는데 그래도 결과물이 나쁘지않게 나온것 같아서 기분도 좋았다.
앞으로 이런 프로세스로 업무를 진행하게 될것이라는 생각에 기대되기도 했고, 개발자라는 직업이 내 적성에 맞는다는것도 깨달을 수 있는 값진 2주였다.
시간관계상 검색기능을 구현하지 못한점은 아쉽지만 다음 프로젝트 때 비슷한 기능이 있다면 꼭 구현해보고싶다.
