[React] 팀프로젝트 - 뉴스피드 만들기(1) 초기세팅

안셩·2024년 8월 28일
0

프로젝트

목록 보기
4/36
post-thumbnail

뉴스피드란??

내 게시물을 포함한 모든 게시물을 볼 수 있는 공간

ex) 블로그, 커뮤니티, SNS 등

1. 프로젝트 기획

1) 주제 : Workation(work + vacation의 합성어)

2) 페이지 구성

  • 페이지는 크게 Home / MyPage 로 나눴다.
    • Home
      • 네비게이션바(로고, 프로필사진)
      • 카테고리(탭)
      • 피드보기
      • 도전과제 : 로그인했을 때 보일 팔로워∙팔로잉
    • MyPage
      • 탭을 내 게시물 / 좋아요 누른 게시물 로 나눠 보여주기로 했다.
      • 도전과제 : 프로필 사진 변경하기
  • 나머지 회원가입 및 피드 전체보기, 게시물 작성 폼은 페이지로 구분짓지 않고 모달로 나타내기로 했다.

3) 역할분배

4명의 팀원에서 분배했으며, 나는 피드를 자세히 보여주는 모달을 만들기로 했다.

4) 코드 컨벤션

  • 변수: 카멜케이스 (ex. camelCase)
  • 함수: 동사/전치사 시작 (ex. countNumber, withUserId)
  • 상수: 대문자 (ex. SPECIAL_NUMBER)

5) git 관리방안

브랜치 네임을 분류하고, 커밋할 때 깃모지를 사용하기로 했다.


2. 협업관리 세팅

1) supabase

이번 과제에서는 데이터베이스를 비롯한 백엔드 시스템(BaaS; Backend as a System)을 이용하기 위해서 사용하는 도구를 사용하는 게 목표이다.
해당시스템을 위해 가입하고, 협업자를 초대했으며, vscode에 설치 및 초기세팅을 완료했다.!

2) prettierrc 설정

3) 각종 주요 패키지 설치

yarn create vite Oreo_Workation_Project --template react

yarn

yarn add styled-components

yarn add react-router-dom

4) 기본 라우팅 설정

profile
24.07.15 프론트엔드 개발 첫 걸음

2개의 댓글

comment-user-thumbnail
2024년 8월 29일

현기증나요 빨리 다음글 올려주세요

1개의 답글