[wecode] 2차 프로젝트 VVOLTMARKET 회고

yellowbutter·2022년 12월 11일
WeCodeproject
0

project

목록 보기
2/5
post-thumbnail

✨ 구동영상 : 구동영상링크
✨ 노션 페이지 : 노션링크

1. OVERVIEW

VVOLT MARKET

중고제품 거래 서비스인 "중고나라"를 모델링한 프로젝트

📍 프로젝트 기간

2022.11.28 ~ 2022.12.09

📍 모델링한 사이트 : 번개장터
중고제품 거래 사이트

📍 선정 이유 :
1) 깔끔한 UI로 보기 좋게 레이아웃을 잡고, 기능 구현에 중점을 두어 개발할 수 있다.
2) 커머스 사이트로써 기본적인 페이지 구성이 잘 되어 있다.

2. 팀원 구성 및 사용한 기술 스택

팀명 맟 프로젝트 이름: VVOLT MARKET

📍 의미: 번개에서 연상하여 "전압"을 뜻하는 영어 단어인 volt를 변형하여 vvolt market으로 지었다.

📍 4명의 프론트엔드 개발자와 3명의 백엔드 개발자가 함께하였다.

front-end

React, styled component
◽ CRA(Create-React-App)을 통한 리액트 개발 환경 세팅
◽ 함수형 컴포넌트 사용
◽ ESLint, Prettier 설정

Back-end

Node.js, Express.js, MySQL,
co-work
Github, Slack(소통), Trello(일정관리), Notion(회의록)

📍 1차 프로젝트와 동일하게 크게 세 파트로 나누어 회의를 진행하였다.

  • planning Meeting
    매 주 월요일 한 주동안 진행해야 할 큰 목표를 계획하고 역할 분담을 한다.
  • Daily Standup Meeting
    매일 아침 팀원들이 정해진 시간에 모여 각자의 업무에 대해 공유한다.
  • Retrospective Meeting
    프로젝트가 끝난 후 회고한다.

💻 일정관리

📍 Trello과 notion을 사용하여 일정관리를 했다.

📝 트렐로 일정 관리

This sprint : 이번 주까지 해야할 일
In progress: 지금 진행 중인 작업
In Review: PR을 올리고 리뷰를 받고 있는 작업
Done: 리뷰까지 반영돼 merge 완료된 작업

📝 노션 일정 관리


노션에는 진행한 회의 기록을 작성하였다.

매일 회의 전 어제 한 일, 오늘 할 일, 어려운 점으로 나누어 작성한 후 daily standing up meeting을 진행했다.

백엔드 개발자분들 노션에 기능,API엔드포인트,담당자를 정리해서 표로 작성해주셨다. 여기에 더해, 깃북에는 노션에 작성된 단순 URI에 더해서 프론트엔드가 백엔드에 자주 물어보는 키를 작성해주셨다.

3. 기획

1차 프로젝트에서 기획 또한 매우 중요한 부분이라는 것을 느껴 지난 프로젝트보다 초기 기획을 꼼꼼하게 했다.

👩‍💻 1) 우선 모델링하고자 하는 사이트의 주요기능을 정리했다.

👩‍💻 2) 구현하고자 하는 기능을 필수 기능과 추가 기능으로 구분한 후 역할을 분배했다

👩‍💻 3) 각 항목당 필요한 데이터 정리를 했다.

👩‍💻 4) 최종적으로 필요한 페이지와 그에 따른 API를 정리하였고, 페이지마다 정리내용을 바탕으로 역할 분담을 했다.

👩‍💻 볼트마켓에서 사용한 사진들은 모두 직접 촬영하였다!

4. 주요 기능 구현

프론트는 페이지별로 나눠 담당하였고,
📍 나는 nav, sidebar, 상품상세페이지를 맡게 되었다. 레이아웃과 기능을 구별해 작업하였다.

✅ nav, side바, 상품 디테일 페이지
소셜로그인 페이지, 상품등록 페이지
상품리스트 페이지, 상점페이지, footer
회원가입 페이지, 결제 페이지

5. 내가 맡은 기능 ✅

  • 네비게이션 바 상단의 메뉴 버튼에 마우스를 올리면 메뉴가 열리고, 마우스를 내리면 메뉴가 닫히는 기능

  • 마우스를 올린 카테고리에 따라 색상을 다르게 표시해주고,
    클릭하면 해당 페이지로 이동

  • 상품 이름을 검색하는 기능

  • 네비게이션 바 상단의 로그인, 판매, 내상점 버튼을 클릭하면 해당 페이지로 이동하는 기능

  • 로그인 상태에 따라 UI를 다르게 보여주는 기능

사이드바

  • 최근 본 상품 기능
  • top을 누르면 화면 위로 올라가는 기능

✨ 상품 상세 페이지

상품 상세 정보 데이터를 가져와 보여준다.

  • 상품이름, 가격, 사진, 좋아요 수, 등록 시간, 거래지역, 상품 설명
  • 상품 찜 하기, 삭제하기
  • 바로 구매 버튼을 눌렀을 때 토큰이 없으면 "로그인이 필요한 서비스입니다." alert을 띄우고 token이 있는 경우에는 상품 결제 페이지로 이동한다.

6. 기억에 남는 코드

1. nav

  • useEffect hook을 사용하여 컴포넌트가 마운트될 때 fetch 함수를 사용하여 두 개의 API 엔드포인트(/users/1, /products)에서 데이터를 받는다.
  • 그 후 useState hook을 사용하여 관리하는 userId와 itemList 상태값에 저장하는 코드이다.

  • map함수를 사용해 itemList를 순회하면서 productName에서 검색어를 포함하는 상품을 필터링해서 검색어에 맞는 상품 리스트를 보여주는 코드
  • 'itemList &&' 표현법 + if 문을 작성하는데 시간이 오래 걸렸다.

2. sidebar

  • localStorage를 사용해서 최근에 본 상품 목록을 저장하고,
    JSON.parse를 사용하여 저장된 데이터를 JavaScript 객체로 변환한 후, useEffect, useState를 사용하여 최근 본 상품을 업데이트하는 코드이다!

  • json.parse, json.stringfy를 공부해볼 수 있는 기회였다.

3. 상품상세페이지

'좋아요' 버튼을 누르면 해당 상품을 찜목록에 추가, 다시 누르면 찜목록에서 제거하는 기능이다. (비슷한 기능이라 코드는 찜 추가 코드만 첨부했다.)

  1. 버튼 클릭 시, 로컬 스토리지에서 토큰을 확인한다.
  2. 서버로 해당 상품의 ID와 함께 요청을 보내서 찜목록에 추가한다.
  3. 만약 추가 요청이 성공하면 '찜목록에 저장되었습니다.' 알림이 뜨고, 상품의 좋아요 개수를 1개 늘리고, 버튼이 활성화 된다.
  4. 요청이 실패하면 '찜추가를 실패했습니다.' 알림을 띄운다.

7. 성장 포인트 및 아쉬운 점

< 성장 포인트 >

👩‍💻 기획, 기록, 소통

2차 프로젝트에서는 '기록과 소통'을 개발만큼 우선시하도록 노력했다.

📍1차 프로젝트 때는 기능 구현에 바빠 생각하지 못했던 "가치"에 대해 생각해보았다.
홈페이지가 갖고 있는 "기능"보다 그 홈페이지(를 운영하는 기업)가 주는 가치를 생각해보며 기능을 정리하였다. 볼트마켓은 유저들이 중고상품을 사고 파는 동일한 욕구를 가진 유저들이 플랫폼 내에서 편리하게 거래하게 돕는 "가치"를 갖고 있다.

📍상단 기획 단계에 적어 놓은 내용처럼 초반 기획 단계를 꼼꼼하게 해서 기반부터 잘 다진 것이 장점이라고 생각한다.

📍무엇보다 매일 아침 스프린트 회의 전, 회의 중, 하루의 마무리에서 꾸준히 기록하고 다른 팀원과 공유해서 구현해야하는 기능이 많았음에도 프로젝트 마무리를 잘 할 수 있었다.

👩‍💻 데이터 fetching 연습을 한 것

📍 상품 디테일 페이지에서 이렇게 경로를 받아오는 것이 너무 어려웠다.
fetch , '$'문법, params 등 여러가지를 알았어야해서
이 부분에서 가장 오랜 시간이 걸렸다.

${APIS.ipAddress}/products/${productId}

<아쉬웠던 점>

📍 console.log 더 찍어볼걸..

console.log의 중요성을 알고 있으면서도 제대로 사용하지 못해 아쉽다. state로 상태값을 저장하고 fetch에 data를 불러오는 작업에서 에러가 났는데 console.log 를 찍어보지 않고 코드만 수정했던 것이 시간을 많이 소요했다. 처음부터 console.log로 데이터가 들어오는 것을 보고 수정했으면 훨씬 쉬웠을텐데.. ㅎㅎ 다음에는 더 열심히 콘솔을 찍어야지!

📍 컴포넌트화

2차 프로젝트에서 가장 아쉬운 점은 컴포넌트화를 못하고 프로젝트를 마무리한 것이다. 기능 구현을 하고 이후 컴포넌트화를 시키려고 했는데, 상품 상세페이지에 시간을 너무 많이 써버려서 일단 기능 구현 마무리에 집중헸다. 이 부분은 꼭 리팩토링해볼 것이다.

📍 추가 기능 구현

멘토님께서 이후에는 유저 정보를 redux에서 관리하는 것이 좋다고 하셔서
redux를 공부헤볼 생각이다!

마치며

  • VVOLT MARKET 팀에게 정말 감사의 마음을 전하고 싶다. 2차 프로젝트 이틀 전날 팀원 다같이 밤을 샜는데도 다들 힘내서 프로젝트를 마무리하고 집에 갔다.

  • 프론트 개발자 동섭님이 처음에 기획을 주도해서 진행하셨는데, 그 과정에서 정말 많은 것을 배웠다. 코드를 짤 때도 마찬가지고 처음에 기획을 할 때도 일의 순서를 매겨가는 방법을 (주요기능, 추가기능 정리, 만들어야 할 데이터 정리 후 역할 분담 등) 배울 수 있었다.

  • 이번 프로젝트는 하면서 한계를 느꼈다. 알아야 할 것은 너무 많은데 매일 정해진 기능구현을 해야하니 부담도 컸고 조금 더 시간이 있었으면 더 좋은 코드를 짤 수 있었을텐데 아쉬움도 있었다.

  • 하지만 내가 이번 프로젝트에서 배운 것이 정말 많고, 내가 어떤 부분을 더 공부해야 하는지 깨달을 수 있어 감사하다!

부족한 부분은 채워 나가자..📝

profile
yellowbutter
기록은 희미해지지 않는다 🐾🧑‍💻
이전 포스트

[wecode] 1차 프로젝트 술담화 회고

다음 포스트

기업협업 회고록

0개의 댓글