🌈프로젝트 소개

• 프리미엄 밀키트 배송 서비스 쿡킷 clone project
• 개발 기간 : 2021/08/02-2021/08/13
• 개발 인원 : Front-end:김동우,이지선,황문실 Back-end :김훈태,장이주

☀️1.진행 방법

• 매일 아침 trello 이용하여 스탠드업 미팅 실시
• 스프린트 회고 진행하며 일주일 단위 일정 계획

☀️2.사용 Tool

• React.js (CRA, Class형 component 사용)
• React-router-dom
• JavaScript(ES6)
• Sass
• Git / Github

☀️3.Programming

Menu List Page

(내가 담당하고 구현한 부분)

• 카테고리 클릭 시 해당 list 그려지도록 조건문 이용한 fetch 함수 사용
• 첫 randing시 중분류와 소분류 첫번째 탭의 list가 선택되도록 구현.
• Data boolean 값에 따른 limited/new label 부착
• 메인 페이지와 리스트페이지에서 상품 클릭 시 각각의 상세페이지로 이동( 동적 라우팅 사용)

🌤4.고난과 역경 그리고 해결책

👉componenetDidUpdate

필터링 구현시 정말 오랜 시간 고민을 했다. 나의 경우 처음에 모든 메뉴를 받아온 후 필터링되는 로직을 짜야했다. 처음엔 버튼이 클릭될 때 fetch가 되도록 구현했으나 query parameter로 구현하긴 어려웠고 멘토님의session을 듣고 componenetDidUpdate를 이용하게 되었다.
질문하고 고민하여 완성한 코드!
클릭한 메뉴의 id값에 따른 url을 생성하는 getProductsUrl 함수를 만들어서 fetch에서 바로 받아 올 수 있도록 해주었다.

☂️5.보완할 부분

👉react로 사고하기

사실 project를 진행하면서 '일단 구현해야 한다'라는 생각으로 진행했다. 기한은 정해져 있고, 결과물을 내야했기에 '되면 장땡'의 식이 되어버린 것 같다. 그래서 react의 원리를 전부 파악하기엔 부족하지 않았나 싶어 보완할 부분으로 꼽았다.

👉git

git.. 괜히 지옥에서 온 git이라 불리는게 아니었다... 마지막 날 merge를 하며 굉장히 많은 conflict를 경험하게 되었다. 문실님의 파일이 날아가기도 했다.😢 활용성이 높고 편리하지만 그 만큼 아직도 어렵다! 그러니 계속 공부해야 하는 git!

👉코드컨벤션

project 마지막 날 merge 중 내가 같은 이름의 파일을 만들어 conflict가 발생하는 일이 있었다.ㅠㅠ 또한 협업에서 서로 코드리뷰를 하고 언제 어떤 브랜치에서 작업을 이어갈지 모르는 부분인데 처음부터 세세하게 정해둔다면 후에 다른 사람의 코드를 이해하기 쉬울 것이라 느꼈다.

🌈6.소감

2주간 react에게 밀당을 당한 기분이다.😤 나의 뇌구조로는 틀림없이 될 것이라고 생각하고 쓴 로직이 실제 구현이 되지 않을 때는 react가 꼴도 보기 싫다가도 고민하고 수정하여 해내고 나면 재밌고 신기하다 뿌듯했다. react..밀당의 고수...아직은 내가 을이라서 매달려야 하는 입장이지만 react의 속내를 알 때까지👀 매달리고 싶다.🏃‍♀️
끝으로 우리 꾸깃 팀원분들!🙅🏻‍♀️🤷🏼‍♀️💁🙆‍♂️🙎🏻 고맙다는 말이 가장 먼저 연상된다. 절대 쉽지 않은 여정동안 팀원들이 있기에 2주를 버텨낼 수 있었다. 사실 개발자라는 직업은 혼자 일하는 시간이 많을 것이라 생각했으나 혼자서는 절대 할 수 없는 일이었다. 진심으로 감사합니다🙇‍♀️💕