1차 프로젝트 회고 : Market GGoGi🥩

2023년 01월 16일 작성

✔️ 프로젝트 개요

사이트 소개

• 마켓꼬기는 마켓컬리 클론 사이트로 전 품목이 아닌 고기만 취급하는 사이트
• 첫 번째 프로젝트인 만큼 디자인은 마켓컬리 사이트를 따라 구현함

개발기간

• 2023.01.02~2023.01.13

개발인원

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

적용기술

• 프론트엔드 : React, Javascript(ES6), SCSS
• 협업도구 : Github, Trello, Slack, Notion

✔️ 담당 업무

1. 로그인

• 백엔드와 POST 메서드로 통신
  - result.message 결과에 따라 안내 메세지 띄우기
• 로컬스트리지에 토큰 저장

2. 회원가입

• 백엔드와 POST 메서드로 통신
  - 유효성 검사 규칙을 충족하지 못할 경우 result.message에 따라 안내 메세지 띄우기 (이메일 중복검사, 이메일과 비밀번호 형식, 빈칸 유무)

3. 장바구니

• GET 매서드로 메인 및 상세 페이지에서 담은 품목들을 장바구니 화면에서 보여주기
• DELETE 매서드로 서버에서 품목을 삭제
• PATCH 매서드로 주문하기 버튼을 눌렀을 때 변경된 품목의 cartId와 productId, quantity 데이터 서버로 보내주기

4. 결제

• POST 매서드로 총 합계와 장바구니에 담긴 항목의 cartId, productId, quantity, price 서버로 보내주기

✔️ 아쉬운 점

1. 소통의 아쉬움

프로젝트를 하며 처음으로 백엔드와 협업을 했다. 그러다보니 무엇을 요구해야하는지 몰라서 통신을 할 때마다 주먹구구식으로 했다. 몇 번 백엔드에 API 명세서를 요청을 했지만 백엔드에서도 계속 코드를 수정하고 있는 상황이라 만들어주지 않았고, 나중에서야 포스트맨을 캡쳐한 이미지들을 보내줘서 아쉬웠다.

API 명세서가 없어서 통신을 할 때가 되어야 필요한 key와 보내줘야하는 데이터, 엔드포인트를 알 수 있었다. 그리고 백엔드에서 result.message나 엔드포인트, 필요한 키 값을 바꾸고 공유를 안해줘서 통신이 이뤄지지 않는 일이 간혹 생겨 불편했다.

다만 백엔드 두 명 중 한 분이 면접을 보러다니느라 자리를 계속 비우셔서 한 분이 혼자 주도적으로 하다보니 여유가 없으셨기 때문에 상황을 이해할 수 있었다.

2. 사전 설계의 중요성을 나중에 느낌

초반에 레이아웃 형태를 보고 컴포넌트를 나누다보니 데이터를 props로 전달하는 데 그치지 않고 상태 끌어올리기를 해야 하는 경우가 생겼다. 사전에 데이터가 어떻게 전달되어야하는지 흐름을 미리 살펴보고, 기능을 고려해 컴포넌트 분리를 구상했어야 했는데 그러지 못했다.

코드를 치는 것보다 사전 설계를 철저하게 하는 것이 정말 중요하다는 것을 프로젝트를 통해 또 한 번 느꼈다. 프로젝트를 하는 동안 가장 어려웠던 것이 필요한 값을 저장해 적재적소에 활용하는 것이었기 때문에 다음 프로젝트를 위해 데이터 관리를 위한 훅이나 라이브러리를 공부해야겠다.

3. 선택과 집중을 제대로 하지 못함

장바구니 컴포넌트를 작업할 때 전체 선택 및 해제와 같은 체크 기능과 품목 삭제, 총 합계 구하기, 주문하기 버튼 클릭 시 통신하기 등 하고자 하는 것이 많았다. 하지만 내 능력이 그만큼 뛰어나지 않아서 구현하기가 너무 어려웠다.

한 기능을 시도해보다가 안되면 다른 기능을 하고, 또 막히면 또 다른 기능을 성공시키려고 하다가 이도저도 아닌 시간을 많이 날렸다. 결국 전체 체크 부분은 빼고 나머지 목표들만 달성했다. 다음에는 우선순위를 정한 뒤 한 가지 목표를 정해서 그것부터 완성하고 그 다음 목표로 넘어갈 수 있도록 선택과 집중을 해야겠다.

✔️ 발전한 점

1. 새로운 것들을 시도함

프로젝트를 하면서 Form 과 통신을 연습하기 위해서 다른 사람들이 맡기 싫어하는(이미 위스타그램으로 연습해보았기 때문에..!) 로그인과 회원가입을 맡았다. 로그인과 회원가입 컴포넌트를 작업하면서 안 써보았던 Grid를 활용했고, 회원가입 페이지는 통으로 만들었다가 컴포넌트 분리하는 연습까지했다. 기존에 만들었던 것을 어떻게 하면 더 깔끔하고 잘 만들 수 있을지 고민하면서 새로운 지식을 적용한 덕에 이전보다 더 발전할 수 있었다.

2. 여러 매서드를 활용해 통신을 함

GET, POST, PATCH, DELETE 매서드로 백엔드와 통신을 했다. 그 과정에서 GET은 다른 메서드와 달리 body에 데이터를 보내줄 필요가 없으며 다른 매서드보다 간결하게 작성할 수 있다는 것을 확실하게 알았다. 또 백엔드에서 필요한 데이터 형태로 보내주기 위해 데이터를 가공해야 하는 법도 습득했다.

fetch로 서버와 통신을 하면서 DB에 저장된 데이터를 받고, 수정 또는 삭제한 내역을 DB에 보내고 다시 받으면 굳이 프론트엔드에서 따로 데이터를 저장하지 않아도 된다는 것도 배웠다. 백엔드가 없었으면 프론트엔드에서 여러 함수와 훅을 써야 하는데 백엔드가 존재해서 비교적 쉽게 데이터를 관리할 수 있었다. 백엔드는 소중해..🐶

3. 구글링을 적극 활용함

이전에는 다른 사람의 코드를 웬만하면 보지 않고 스스로 만들어보려고 노력했지만, 코드리뷰로 다른 사람의 코드를 보고 배우는 점이 많다는 걸 느낀 이후로 구글링을 적극적으로 활용했다.

구글링은 특히 장바구니 컴포넌트를 만들 때 매우 유용했다. 장바구니 컴포넌트의 기능을 아예 구현하지 못할 거라고 생각했는데, 구글링 덕에 이런 저런 시도를 한 끝에 우당탕탕이지만 기능이 구현되게 만들 수 있었다.

같은 기능을 하는 코드라 하더라도 내 코드에 적용하기 위해서는 수정이 필요하고, 그 과정에서 다른 사람의 코드를 내 것으로 만들기 위한 분석이 필요하다. 책으로 지식을 습득하는 것처럼 다른 사람의 코드를 보는 것도 학습의 형태 중 하나이기에 앞으로도 적극 활용해야겠다.