[1차 프로젝트 회고]

 

 

 

🙋🏻‍♀️위코드에서 첫 1차 프로젝트를 진행하였다🙋🏻‍♀️

 

 

 

 

 

 

선물가게 커머스 프로젝트

---

배민문방구

우리조는  국내 '배민문방구'를 모티브로 하는 프로젝트를 진행하였고, 

깔끔하고 심플한 사이트 UI를 가졌으며, 프론트엔드 및 백엔드 공부를 위한 필수적인 기능들이 있고,

구현하기 크게 어렵지 않을 것 같은 사이트라 생각되었지만, 

2주라는 짧게느껴진  기간동안 원하는 모든 기능을 넣지는 못했다.

프론트엔드와 백엔드가 같이  협업 한 생애 첫 번째 프로젝트이다 보니 다소 부족하기도 하다...

 

 

 

 

 

 

 

 

1. 프로젝트 개요

---

1-1. 기간 및 인원

 

• 기간 : 23년 2월 6일 ~ 2월 17일 (약 2주)
• 인원 

- 프론트엔드 : 이동민, 이해인, 박준현

- 백엔드 : 이홍렬, 황수영, 박세희

 

 

1-2. 프로젝트에 사용된 기술 스택

• Front-End : React.js, sass, JavaScript, html, css
• Back-End : Node.js, Express, JSON Web TOKEN, Bcrypt, My SQL, uuid
• Common : RESTful API, Git, Github, Trello, Slack, Notion, Postman

 

1-3. 시연영상 

1-4. Frontend Github

 

 

 

 

 

 

2. 프로젝트  Product 분석

---

로고

 

• 프로젝트의 디자인은 전반적으로 모티브로 하는 '배민 문방구' 의 디자인을 최대한 살렸다.
• 컨셉은 요즘 트랜드에 맞게 쓸모없는 선물 아이템에 아이디어를 얻어  재미요소를 더하고, 아예 쓸모없는 물건들이 아니라, 선물을 주는사람은 즐겁고, 받는사람은 특이한 디자인이나 일상생활에서 사소하게라도 쓰이는 물건을 받음으로써 소비에 대한 가치를 재미있는 놀이 로 가지고 프로젝트 이름은  garbage collector로 지정했다. 
• 로고 는 프로젝트 이름을 가져가기 보다는 그래도 재미 요소를 더하고, 가볍고 즐거운 소비의 놀이의 컨셉을 가져가고자 '풉' 으로 지정해서 직접 만들어 보았다.  

 

 

 

 

 

 

3.팀원들과의 협업

---

3.1 Daily Standing Meeting 

매일 약 30분정도 팀 내에서 쓰는 Notion을 기준으로 해당 날짜에 한 일/ 할일/ 블로커 등을 공유하는 시간을 가지며, Trello를 보고 진행상황들을 파악하고 부족한 부분은 남아서 구현했고, 통신을 하는날에는 따로 해당 기능을 맡으신 백엔드분과 함께 맞춰보는 시간을 가졌다. 

 

 

 

3.2 협업에 사용된 프로그램

A. Notion

B. Trello

 

 

 

 

 

 

 

 

 

4. 구현 항목

---

• 로그인/회원가입
• 로그인 여부에 따른 마이페이지 접근
• 메인 이미지 슬라이드(캐로셀), 검색기능
• 상품리스트 필터기능 및 상세페이지
• 장바구니 및 결제 

 

 

4-1. 내가 구현한 부분

 

• 메인 Navbar, Aside 메뉴

- 토큰 유무에 따른 로그인/로그아웃 메뉴 UI 설정함으로써 사용자가 로그인을 했을때와 안했을때 구분을 보다 쉽게 할 수 있도록 구현

- Navbar에 상품 카테고리 별 상품리스트 보여주기 기능 + 마우스를 올릴때마다 글씨체를 바꿔줌을 구현함으로써, 사용자가 이용하고자 하는 카테고리에 보다 편리하게 접근할 수 있도록 구현

- 로그인 여부에 따라 Navbar 및 Aside에  아이콘 변경을 구현함으로써 마이페이지에 접근 가능성을 보여줌

 

 

• 상품리스트, 상세페이지

- path parameter를 이용해 리스트에서 해당 상품별 상세페이지에 접근 함으로써 사용자가 이용하고자 하는 상품에 접근할 수 있게 구함

- 쿼리 스트링 및 path parameter 이용하여 백엔드 서버와 원활하게 통신함으로써 필요한 정보를 그때그때 요청 및 전송

- 상품에 마우스 올릴때마다 글자 색상 및 실생활 이미지를 보여줌으로써 사용자가 굳이 상세페이지에 가지 않더라도 미리 추가의 이미지를 볼 수 있게 구현

- 할인중인 상품에 추가적인 가격 및 CSS를 적용함으로써 프로모션 적용됨을 사용자가 보다 쉽게 알 수 있도록 구현

- 상세 페이지 상품 별 옵션 적용시 옵션리스트 창 구현 및 수량을  백엔드로 POST 함으로써 장바구니 및 바로결제 페이지에서 사용자가 구매하고자 하는 상품 정보 및 가격 , 수량을 알 수 있게 구현 

- 장바구니에 담을 때 nav바에 상품을 담은 갯수만큼 장바구니 아이콘에 숫자 적용함으로써, 사용자가 구매하고자 하는 상품들의 수량에 대해 미리 인지할 수 있게 구현 

 

 

 

 

 

 

 

5. KPT

---

5.1 Keep

 

• 하루에 30분 정도 꼭 필수로 공유해야 했던 것들 위주로 논의했던 미팅 방식
• 어려울때 서로 도와주며, 협력하던 팀 분위기
• 로그인 상태에서 접속이 가능한 페이지를 구현함으로써, 회원 권환이 필요한 페이지 컴포넌트에 State를 전달
• 팀원들과 함께 배운 기술을 토대로 응용하여 각 파트를 나누어 좋은 결과물을 만들어낸 성취감

 

 

5.2 Problem

 

• 팀원들과 하루에 30분씩 Notion과 Trello를 바탕으로 미팅을 하며 필요한 정보에대해 소통을 잘 이루고있었다고 생각했으나, 막상 통신을 할때 보니, 서로 주고받을 키 이름이 달랐던 문제가 있었음. 해당 문제는 다시 미팅을 함으로써 해결했으나, 다음번에 프로젝트를 한다면 이렇게 비슷한 문제가 생기지 않도록 하겠다고 생각함
• 계획 설정시 과다한 욕심으로 인해 초반에 Trello에 계획한 추가구현 사항들을 모두 구현하지는 못함. 의외로 시간이 오래걸리는 작업들이 많았어서 다음 프로젝트 시 시간을 전보다 넉넉히 잡아서 필수적인것 위주로 먼저 구현할 것이라 생각함
• 아직 백엔드에서 fetch 받아온 data를 사용자가 원하는대로 적용 후 다시 post하는데에 아직 지식이 부족해 많이 헤맸음.  해당되는 지식을 좀 더 쌓아 다음 프로젝트때는 같은 이유로 헤매지 않겠다고 다짐함

 

5.3 Try

 

• 백엔드와의 사소한것까지 소통은 정말정말 필수! 더 나은 협업방식을 고안해 보기

- 첫 협업이고, 서로의 영역이 다르다 보니 서로 기능에대해 어떤 방향으로 흘러가는지, 어떤 키를 사용하는지에 대해 자세히 얘기를 할 생각을 하지 못했다. 서로 금일 할 일이 무엇인지, 어디를 하고있는지를 아는 정도만 얘기하며 미팅을 해서 그런지 통신을 했을때 안맞는 부분이 듬성듬성 생겨 맞춰보는데 시간이 다소 소유됨 .  무조건적인 소통이 정말 중요하다는 것에 대해 깨닫고 비슷한 문제가 생기지 않도록 다음번에는 백엔드  DB ERD 및 POSTMAN 을 짤때부터 같이 소통을 할 것

• 그날그날 구현했던 기능 및 협업의 데이터 등 문서로 남기기

- 이번에 프로젝트를 할 때 Notion 및 Trello 로 현재 진행 상태에 대해 미팅하고, 했던것에대해 작성해 놓으니 그날그날 했던 것에 대해 확인을 잘 할 수 있어서 너무 유용했음. 다음 프로젝트에는 이번처럼 문서화 하되, 좀 더  자세히 적을 것임

 

 

 

 

 

 

6. 첫 프로젝트를 마치며

---

 

첫 프로젝트가 발표가 끝나고 팀원들과 같이 회고를 하는 시간을 가지니 프로젝트를 이루어 낸것에 대해 뿌듯하기도 하고, 한편으로는 구현하지 못한 부분에 대해 아쉬운 점이 많았다. 

 

 

 

6-1. 내가 못한점

 

한번 제대로 습득하면 응용하는데에 문제가 없지만, 배우고 습득하고 여태까지 배운 기술들을 구현하는데에 좀 더 시간이 걸린다고 생각하다보니, 첫 스프린트 미팅때 너무 소심하게 임했고, 분배 받은 업무를 너무 완벽하게 구현해야 한다는 부담감 때문인지 기능구현도 평소보다 벅차고 속도도 나지 않았다. 비록 프로젝트에 구현하고자 하는 부분은 어느정도 달성은 했지만, 과연 시간분배를 이렇게 밖에 할 수 밖에 없었을까? 하는 후회가 밀려왔다. 

하지만 하나의 기능만 너무 완벽을 추구하면서 붙들고 있다가 2주차때에는 큰 숲을 보고 어느정도 구현이 되면  다른 부분으로 바로 넘어가서 팀 내에서 부족하고 필요한 부분을 좀 더 채움으로써 팀에서 서로 협력하며 프로젝트를 해내게 됨으로써 협력의 중요성 및 시간배분의 중요성을 느꼈다. 

 

 

 

6-2. 내가 잘한점

 

팀 프로젝트 내 시그니처 색상 및 로고를 만들며 좀 더 팀 프로젝트가 컨셉에 맞도록 구현하였고, 기능이 완성될때 마다 PR을 제때 올림으로써, 내가 구현한 기능을 다른 팀원 혹은 컴포넌트에서 조금이라도 빨리 사용될 수 있도록 기본적인 기능부터 구현하도록 계획해서 구현한 것이 내가 이번 프로젝트에서 잘한 점이라고 생각한다.  

 

 

 

6-3. 마무리

 

개발자는 시간싸움이라고 하더니, 이번 프로젝트를 통해서 어떤식으로 시간계획을 세우고, 어떤 기능부터 구현해야 할지 조금씩 감을 잡을 수 있게 되었다. 앞으로 어떤 개발자가 되어야 할지 스스로 생각을 많이 하게 되었고, 배운 내용을 토대로 기능을 구현하다보니, 좀더 많은 기능을 구현하고 싶다는 생각이 들면서 개발에 대해 재미를 더더욱 느끼게 되던 프로젝트 기간이었다. 

 

각자 개개인이 잘하는것도 중요하지만, 팀으로 해야하는 프로젝트인 만큼 팀원 전체가 모여 하나의 프로젝트를 완성해 내며 팀웍의 소중함도 느끼게 되었다. 초반에는  나 자신이 팀에게 피해 끼치면 안된다는  마음 하나로 기능구현에 시간이 어느정도 지체될때마다 혼자 나자신을 비난하곤 했었는데, 안풀리는 문제가 있으면 함께 고민해주고, 도우며  프로젝트를 완성해 나가다 보니 정말 개발자로써 성장하기 위한 큰 경험을 한 듯 하여 너무 뿌듯하였다. 

 

2주동안 생애 첫 프로젝트에 밤도 새면서 달려왔지만, 너무 값진 시간이었고, 너무 재미있게 개발 할 수 있었다. 모두 좋은 팀원들을 만나 가능했던 것 같다. 

그래서 더더욱 마무리 하며 적는 이 회고가 너무 아쉽기만 하다. 

 

 

 

 

❤️🧚🏻‍♀️42기 A팀 Garbage Collector 수고하셨습니다 🧚🏻‍♀️❤️