[새싹x코딩온] 웹 개발자 부트캠프 과정 2차 팀프로젝트 회고 #0

우리 프로젝트 로고!

 

0. 2차 팀프로젝트가 끝난 후 쓰는 회고록

기간 : 2024.08.21 ~ 2024.09.13

개발인원 : FE 3명 BE 3명

담당 역할 : 프론트엔드

주제 : 팬 굿즈에 특화된 중고 거래 서비스 플랫폼

깃허브 :

- Read me : https://github.com/SeSAC-2nd/.github

- frontend code : https://github.com/SeSAC-2nd/SeSAC-2nd-Front

 

 

1. 프로젝트 주제

이번 프로젝트는 클라이언트는 React, 서버는 Node.js를 이용해서 만들었다.

주제는 오타쿠(..)를 대상으로 한 중고 거래 서비스 플랫폼이다.

순화해서 말하자면 팬 굿즈 거래에 특화된 중고 거래 서비스다.  기존의 중고 거래 플랫폼들의 장점을 차용하되,  좀 더 대상을 명확히 하는 서비스를 만들고자 기획했다.

기존의 중고 거래 플랫폼은 카테고리가 너무 많아서 원하는 상품을 정확히 찾기 어렵지만, 이 웹사이트는 팬 굿즈에 집중해서 보다 쉽게 원하는 상품을 찾을 수 있도록 했다. 

위의 슬로건을 가지고 이용자들이 이 서비스의 목적을 명확히 알 수 있고자 했는데 잘 통했는지는 모르겠다... 오타쿠들 사이에서는 최애라는 말이 통하는데.. 일반 유저들은 모를 수도 있으니 설명을 하자면 최애란 최고로 애정하는 대상을 뜻하는 단어로, 흔히 오타쿠들의 덕질. 순화해서 말하자면 팬들의 팬 활동 대상을 말한다고 볼 수 있다.

이제는 더 이상 좋아하지 않는 대상의 상품을 정리하려고 할 때, 다른 팬에게 상품을 팔거나 아니면 팬활동을 하면서 구하기 어려운 상품을 여기서 거래하면 좋겠다?? 라는 마음으로 기획했다.

그래서! 이번 프로젝트 이름인 '리블링스' 이게 무슨 뜻이냐면 독일어로 '최애'를 뜻하는 말이다.

 

2. 주요 기능 및 설계

이 사이트에 필요할 것 같은 기능들을 먼저 정리하고, 이 기능들을 바탕으로 백엔드는 DB 설계를 프론트엔드는 화면 설계를 했다. 

기능 정리

기능을 페이지별로 정리하다보니 대략 12페이지가 나왔다. (DB 테이블은 15개가 나왔다고 한다!!)

아이패드/발사믹/피그마를 이용해서 프론트 맡은 사람들 다 같이 화면설계를 했다.(하다보니 슬라이드 39장이었는데 이 중 일부만 가져왔다)

DB와 화면이 나와서 그 기능들을 바탕으로 APi 명세서들을 작성했다(조장님이...) 중간중간 다른 부분이 있으면 얘기해가면서 맞춰갔다!

 

3. 사이트 이미지(메인 색상과 폰트)

기획회의를 하면서 프로젝트의 메인 색상과 폰트를 정했다. 리블링스는 최애를 뜻하는 말이지만 가운데 들어간 블링이라는 단어때문에 반짝이는 느낌을 내는 폰트를 사용했다.

 

 

 

 

4. 이번 프로젝트에서 사용한 기술 스택

리액트로 전반적인 프로젝트를 구성하고, 리덕스를 이용해서 상태관리를 했다.

또한 sass(scss) 를 사용해서 스타일링 했다.

axios를 통해서 백엔드와의 통신을 했다.

 

리액트를 사용한 이유는 물론... 이걸 활용한 프로젝트를 만드는 것이 목적도 있었지만 리액트는 컴포넌트 기반 구조를 통해 재사용성과 관리성을 높이고 상태 변화에 따른 효율적인 렌더링을 지원하기 떄문이다.

따라서 우리 프로젝트 주제인 중고 상품 거래 쇼핑몰의 복잡한 UI를 효율적으로 관리할 수 있을거라 생각했다.

(리액트를 사용하는 유저가 많아 러닝커브가 낮고 커뮤니티 활성화, 자료를 찾기 쉬움등도 있었다.)

 

리덕스를 사용해서 상태관리를 한 이유는 그것을 사용한 곳의 포스팅에서 더 얘기하겠지만 전역적으로 상태관리를 용이하게 하기 위해서였다. store 라는 단일 객체에 전역 state 들을 중앙 집중 관리하는 리덕스의 특징을 활용해서 좀 더 효율적인 상태관리를 하기 위함이었다.

 

sass 를 사용해서 스타일링 한 이유는 스타일링의 효율성과 재사용성을 높이기 위해서였다. 앞에서 언급한 메인 컬러들을 변수로 지정하고 자주 사용하는 스타일들은 함수로 지정해서 효율적으로 스타일링을 하기 위해서 사용했다.

 

5. 가장 중요한 내가 이번 프로젝트에서 맡은 역할!

 

프론트 부분은 페이지별로 역할을 분담해서 하기로 했다. 내가 처음에 맡고자 한 부분은 결제와 관련된 페이지인 장바구니, 결제, 결제가 완료되었다는 정보를 보여주는 페이지였다.

이 페이지를 선택한 이유는 가장 적어서(...)가 아니고! 이번에 리덕스를 도입해서 하기로 했는데 장바구니와 결제데이터에 대해서 전방위적으로 리덕스로 상태 관리를 할 수 있어 보였기 때문에 그 기능을 하고 싶어서 였다..

일단 저렇게 나누고 가장 먼저 기능 끝낸 사람이 관리자 페이지를 하기로 했는데 내가 어쩌다보니 관리자 페이지도 하게 되었다. 뿐만 아니라 상품목록 페이지랑 검색결과목록 페이지도 내가 하게 되었다.

 

최종적으로 내가 맡은 역할은

• 커스텀 훅 및 리덕스를 활용한 유저 권한 관리
• 결제 관련(장바구니, 결제, 결제완료, 배송지)  상태관리 및 기능
• 카테고리 별 상품 목록 페이지 레이아웃, 렌더링, 페이지네이션 기능
• 검색 기능 및 검색 결과 페이지 레이아웃, 렌더링, 페이지네이션 기능
• 관리자 페이지 레이아웃, 렌더링 및 기능
• 공통 UI 레이아웃(header, footer, main)
• 리액트 라우터 초기세팅

이렇게 나눌 수 있을 것 같다.

 

각 기능별 어떻게 구현했는지에 대해서는 다음 포스팅에서 다루기로 하겠다.