[ About 🥦Brokurly🥦 ]

• 컬리만의 유기농 채소로 집에서도 간편하게 즐겨보컬리?!
• 유기농을 간편하게 즐길 수 있도록 해주는 커머스 사이트

Project Duration

• 2021/11/29~2021/12/9

Team Members

• 프론트엔드 3명
• 백엔드 3명

[ Skills ]

React, Sass, React-Router

[ Communication Tools ]

Git, Github

GitHub Brokurly

• 코드 관리

Slack

• 기본적인 소통
• Github 과 연결하여 github merge, PR 상태 확인

Notion

• slack에서 해당 부분을 찾기 위해 글들 속에서 헤엄치지 않아도 됨
• 모든 미팅 기록이 있어 좋음
• 미팅 전 사전 로그 작성하여 미팅 전 팀원들이 확인하여
• 해당 부분에 대해 먼저 생각하고 미팅에서 의견을 나누고 더 빨리 이해 할 수 있게 됨
• 프로젝트에 관련된 모든 문서를 저장
• 공통으로 정한 부분을 문서화해 해당 부분을 계속 확인하고
• 정해진 부분에 대해 다시 미팅하거나 해당 팀원에게 묻지 않아도 되기 때문에 업무의 효율성을 높임

Trello

• srum, 한주 sprint의 목표, 해야 할 부분을 보기 좋음
• 팀원들이 서로 다른 팀원의 진척도를 보고 자신이 할 일들의 우선순위를 조정할 수 있음

[ Position ]

Frontend

상품 리스트(메인 화면)

• 상세 리스트가 메인 화면이기 때문에 params로 카테고리별 다른 화면을 보여주는 것이 아니라 quary로 해당 부분을 관리
• 대분류, 중분류, 정렬 3가지 요소를 데이터를 가져오기 위해 사용
• 대분류가 클릭 됐을 때 중분류 -> 전체 보기, 정렬 -> 신상순으로 정렬되어 일관성이 있도록 관리
• 카트 버튼을 눌러 modal창으로 상품을 주문할 수 있게 함
• 상품 부분 클릭 시 상세 페이지로 이동

장바구니

• 수량 입력
  • 버튼으로 1단위 변화, 수량 직접 입력 가능
  • 0, 빈칸 -> 수량을 1이 되도록 만듦
• 로그인하지 않았을 때 fetch를 하지 않게 하여 No Token 에러 없앰
• 전체, 부분 선택 가능
• 전체, 부분, 1개 삭제 가능
• 총금액은 체크된 상품만 계산
• 냉장, 상온 2개로 상품을 분류하여 소비자가 보기 편리하게 구성
• 분류별 토글 버튼을 만들어 해당 리스트 펼치거나 접을 수 있게 함

주문내역

• 최신순으로 주문서 보여줌
• 주문서별 주문 취소 기능 추가

[ 개발 ] 이번 프로젝트로 배운점

• 처음으로 백엔드와 어떤 키들을 주고받으며 통신할지 같이 고민하며 최적의 통신 방법을 위해 고민해 봤다.
• 백엔드에서 만든 데이터모델링을 보며 내가 필요한 데이터들을 다 받을 수 있는지 같이 살펴보고 빠진 부분을 알 수 있는 능력이 생겼다.
• 데이터모델링을 보며 API가 완성되기 전 내가 백엔드에 보내줘야 할 키들과 받을 데이터를 고려해 로직과 코드를 작성할 수 있었다.
• 이를 통해 API가 완성되었을 때 적은 코드 수정으로 통신을 성공적으로 할 수 있었다.
• 사이트에 보이는 url은 백엔드와의 통신과 직접적인 관련이 없고 프론트끼리, 페이지끼리 소통하기 위해 존재함을 알게 되었다.
• 상당 부분 A -> B 페이지로 넘어가서 B의 페이지를 구현하기 위해 필요한 데이터는 이전 페이지 A에서 B로 quary, parmas, 등으로 어떤 부분이 선택되어 어떤 부분을 보여줘야 하는지 알려줘야 한다는 것을 알게 되었다.
  -> 이를 통해 왜 개발자들이 소통해야 하는지 알게 되었다. 사이트는 대부분 다음 단계가 이전 단계와 연결되어 있으면 혼자 존재하는 일은 잘 없다. 사이트는 하나의 물이 흐르는 것과 같다
• 백엔드와의 통신에 필요한 url은 사이트에 보여지는 url과 전혀 상관이 없다.(물론 비슷하면 편하겠지만)
• REST API로 백엔드와 통신하는 법을 알게 되었다.
• 쿼리를 처음 적용해보았다.
• 사이트의 목표가 무엇인지, Identity 를 제대로 설정해야 더 나은 UX에 대해 고민할 수 있다.
• 사용자가 어떤 불편함이 있을지 끊임없이 고민하면 끊임없이 고칠 부분이 보인다.

어떻게 해야 우리의 서비스를 더 잘 표현하고 사용자가 더 편하게 사용할 수 있을까?!

에 대해 정말 끊임없이 고민해야 하구나를 다시금 느꼈다.

• scrum, sprint을 통해 애자일 개발하는 법을 알게 되었다.
• 아침마다 Standup 미팅을 통해 어제한 일, 오늘 할 일, 블로커 를 공유하며 더 효율적인 진행을 이룰 수 있었다.

[ 협업 ] 이번 프로젝트로 배운 점

표현하지 않으면 아무도 알 수가 없다

• 자신의 업무에 대해 부담감을 잘 나타낸 사례가 있었다.

맡은 일이 어려우니 시간이 좀 걸릴 수 있다고 직접적으로 이야기한 경우

• 이분도 자신의 실력이 부족하다는 것을 알고 있었다.
  하지만 어려움을 인정하고 팀원들에게 말했다.
• 이를 통해, 팀원들은 이분의 부분과 통신해야 하는 부분은 나중으로 미루고 다른 부분을 우선순위로 처리했다.
  또한, 도울 수 있는 부분은 무엇인지 묻고 같이 해결하거나 도울 수 있는 부분은 도우며 더 편하게 해당 부분을 처리할 수 있도록 했다.

[나의 행동]

• 이분은 나와 한 부분을 같이 했는데 알고 나니 내가 이분이 더 쉽게 코드를 작성하도록 다양한 키값을 사용할 수 있도록 로직을 짰다.
• 다른 일을 먼저 처리하며 충분한 시간을 가질 수 있도록 했다.
• 또한, 이 분은 자신의 진척 정도를 계속 업데이트해 주셨는데 이를 통해 나도 코드를 조금씩 변경하거나 아니면 언제 끝날지 정도를 알게되어 그분을 재촉하거나 아니면 먼저 그분에게 물어보지 않아도 되기에 서로 불편하게 눈치 보는 일이 없었다.
• 우리는 해당 부분을 정말 완벽하게 해낼 수 있었다.

나중에 이분에게 실력 차와 업무 분담에 대해 어떻게 해결해야 할지에 대해 여쭤보았다
[이분의 의견]

• 이 부분은 리더 혼자 고민하게 해서는 안되는 것 같다며 힘든 사람이 어느 정도 자신이 할 수 있을지 말하고 자신의 상태를 피력해야지 리더에게 이 부분을 알아서 해달라고하는 것은 아닌 것 같다고 말씀하셨다. 실제로 자신이 말하고 나니 팀원들도 더 신경 써주고 더 편하게 일하고 소통하며 일할 수 있었다고 말씀하셨다.

이를 통해 알게된 점

• 표현하지 않으면 정말 아무도 알 수가 없다.
• 대부분은 어려움을 말하면 해당 부분을 고려해서 진행하며
• 모르기에 더 물어보고 재촉하게 될 수 있다.

더 알려주고 싶은 개발자

• 이번 프로젝트를 통해 똑같이 해당 설명을 듣더라도 알게 되는 사람이 다르게 반응함을 알게 되었다.

1. 알려줄수록 자신이 모르는 것이 많다는 것에 대해 의기소침해지는 사람

• 이 경우는 알려주는 사람이 점점 미안해지고, 그 사람이 괜찮은지 계속 살피게 된다.

2. 모를 수도 있다는 것을 인정하며, 알려줄수록 더 궁금해하고 알아감에 신기함을 느끼는 사람

• 이 경우는 더 많이 알려주고 싶고, 이 사람의 눈치를 살피지 않고 내가 아는 것을 계속 더 알려주게 된다.

이를 통해 알게 된 점

• 더 알려주고 싶은 사람이 되자!
• 모르는 것은 죄가 아니다!
• 알려주는 사람을 불편하게 하지 말자!

프로젝트를 하며 아쉬웠던 점

• 프론트가 기능 구현이 대부분이 끝나고 백엔드 API 가 완료되기를 기다린 시점이 있었다.
  물론 피곤한 것도 있었지만 이때 쉬지 않고 css를 더 구현했으면 어땠을까 아쉬움이 많이 남는다.

• 물론 클론 느낌으로 프로젝트를 시작했지만 비즈니스 아이덴티티를 제대로 설정하지 않고 시작한 점이 아쉽다.
  핵심 가치가 있으면 실제 비즈니스라고 생각이 들며 더 재미있고 확장성을 생각하며 더 즐길 수 있지 않았을까 하는 생각이 든다.
  그리고 핵심 가치가 제대로 있었다면 이를 고려한 UX와 css 를 더 고민하고 그 방향으로 나아가며 더 재미있게 상상하고 고민하며 구현할 수 있었겠다는 생각이 든다.

프로젝트를 하며 잘한 점

소통!
물론 초반에는 소통에 시행착오가 있었지만,
우리팀은 결국 방안을 찾아냈고 (집중해서 STANDUP MEETING, 전체 미팅은 딱 필요한 부분만, 필요시 1대1 미팅으로 진행, 프론트는 오후에는 각자 코딩, 저녁에는 모여서 필요한 부분 회의, notion 사용)

몇몇 조에서 나타난 소통이 잘못되어 구현을 잘못하거나 문제가 생기는 경우는 없었다.

우리팀 짱!!

그렇게 내 첫 프로젝트가 끝났다

다들 서툴고 어렵고 힘들고 했지만 끝까지 완료해서 발표 시연까지 완벽히 에러 없이 끝남에 너무 감사하고 모두가 끝까지 함께함에 감사하다!!! 브로컬리팀 너무 수고했습니다!! 감사합니다!!

마지막 성장한 코드 정리

🥦브로컬리🥦 프로젝트를 마무리하며 프로젝트 중 만든 뿌듯한 성장 코드 기록

프로젝트 log (+코드)

🥦브로컬리🥦 프로젝트 1일차
🥦브로컬리🥦 프로젝트 2일차!
🥦브로컬리🥦 3일차 🧘‍♀️(Please slow down) 🧘
🥦브로컬리🥦 프로젝트 4일차
🥦브로컬리🥦 프로젝트 5일차