[React/Project] 파이널 프로젝트 시작 ( 당근마켓 클론코딩 )

[React/Project] 파이널 프로젝트 시작 ( 당근마켓 클론코딩  )

03/10

 

📌 파이널 프로젝트

React 수업까지 끝나고 드디어 파이널 프로젝트를 시작했다.

아직은 많이 부족하지만 공부하면서 프로젝트를 완성해볼 예정이다.

모르는 게 있으면 팀원들과 공유해서 같이 토론해보고 해결해나가고, 검색을 통해 해결할 수 있는 문제는 혼자 해결해볼 수 있도록 하자!

 

📌 프로젝트 주제 정하기

멋사에서 지정해준 프로젝트 주제인 마켓컬리, 티빙이 있었는데 다들 바닐라 프로젝트에서 마켓컬리를 진행했기 때문에 가급적이면 안해본 사이트를 클론코딩해보기로 했다.

물론 기존에 진행했던 부분에 대해 리액트로 자세히 파고들 수는 있지만, 이것은 파이널 프로젝트가 끝나고 나서 혹은 개인이 진행하기로 했다.

 

그래서 결정한 것이 당근마켓 클론코딩이다.

클론 코딩으로 많이 하는 사이트 중의 하나가 당근마켓이었기 때문에 구글에도 충분한 자료가 있어서 선택했다.

또한 UI 가 단순해 난이도도 별로 어렵지 않아 보였다.

 

✒️ 디자인 시안

디자인 시안이 없다는 문제가 있었으나 피그마의 플러그인인 html.to.design 을 이용해 손쉽게 해결하였다.

html.to.design | Figma Community

 

📌 기술 스택 정하기

🔧 VITE

CRA 와 Vite 를 고민하다가 현업에서는 CRA 를 잘 사용 안 하는 추세라고 하여 Vite 로 정했다.

Vite 현업에서 많이 사용하는 이유는 프로젝트별로 다른 패키지 세팅이 필요한데 이를 커스텀해서 프로젝트에 맞게 사용할 수 있다는 있다는 점이었다.

직접 세팅을 해줘야 한다는 단점이 있지만, 그만큼 불필요한 패키지를 다운하지 않아 속도가 빠르다.

 

✨ Styled Components

기존에 쓰던 방식과 유사한 CSS Modules 방식을 사용할지, 요즘 많이 사용한다는 Styled Components 를 사용할지 고민했다.

Styled Components 는 수업 시간에 잠깐만 다루고 넘어가서 팀원들도 자세히 알지 못한다는 점이었다.

하지만 사용하기에 별로 까다로워 보이지 않고, 금방 사용할 수 있을 것 같아서 Styled Components 를 선택하게 되었다.

물론 선택하고 나서 프로젝트를 진행해본 결과 처음 사용해서 그런지 몰라도 사용하기가 만만치 않았다는 것을 팀원들과 함께 느끼게 되었다.

 

🔀 Recoil

상태관리 툴로는 Context API 를 사용할지 Redux 보다 비교적 사용하기 쉬운 Recoil 을 사용해볼지 고민했다.

최종적으로는 Context API 와 Recoil 중에서 고민했는데,

Context API 를 배우긴 했지만 프로젝트에서 사용해본적이 없어서 고민했다.

하지만 Recoil 을 사용하자니 Context API 도 제대로 사용할 줄도 모르면서 Recoil 을 사용하는 것이 맞을까 하는 의견도 있었다.

하지만 아직 멋사 프로젝트 기간이니만큼 경험할 수 있는 것은 다 경험해보기로 했고, Recoil 을 사용하기로 결정했다.

 

⚙️ Firebase

백엔드가 없다보니 Serverless 밖에 방법이 없어서 Firebase 는 기본으로 사용하기로 했다.

하지만 아직은 Firebase 에 대한 이해가 없다보니, 차근차근 알아가면서 프로젝트에 적용해야겠다.

 

📌 구현 우선순위

모든 기능을 구현할 수 없기 때문에 구현 우선순위를 두었다.

우선순위가 높은 페이지를 우선으로 구현하고, 추후에 여유가 된다면 우선순위가 낮은 페이지도 구현하기로 했다.

✅ 로그인 / 회원가입
✅ 게시글 작성 기능
✅ 중고 거래 상품 목록

 

📌 페어프로그래밍

1명의 스크럼 마스터와 2명으로 구성된 2개의 Pair 방식으로 진행하기로 했다.

 

📌 git 전략

git-flow 방식을 이용할 예정이었으나 최종적으로 github-flow 방식을 사용하기로 했다.

 

📌 코드 리뷰

이전 프로젝트에서 기능 구현에만 급급하다보니 협업에 신경을 쓰지 못했고, 코드 리뷰를 별로 하지 못했다는 평가가 있었다.

따라서 이번 파이널 프로젝트에서는 데일리 코드 리뷰를 진행하기로 했다.

코드 리뷰를 하지 않으면, 팀원들이 무슨 작업을 했는지 어떻게 코드를 짰는지 알기 어렵기 때문에 함께 성장 목적으로 코드 리뷰를 하기로 했다.

 

📌 코딩 컨벤션

✅ 명시적 변수명 사용하기
✅ 클래스 : PascalCase
✅ 변수와 함수 : camelCase
✅ style을 위한 class 네이밍 : kebab-case
✅ 겹따옴표 사용

 

📌 프로젝트를 위한 개인 공부

주말동안 열심히 공부한 내용들

[React] Vite 차세대 프론트엔드 개발 툴

[React] Hooks - Context API

[React] Recoil 상태 관리 라이브러리 설치 및 기본

 

[React] React Router

[React] Styled Component (CSS-in-JS)

 

 

 

 

 

---

🔅 멋쟁이사자처럼 프론트엔드 4기 파이널 프로젝트

🧑🏻‍💻 작업 인원 : 5인

🕑 프로젝트 기간 : 23.03.10 ~ 03.28

🔧 기술 스택

    • Toolchains : Vite

    • Style : Styled Components

    • 상태 관리 : Recoil

    • Severless : Firebase