Yummy-yummy!_팀프로젝트3_요리레시피_뉴스피드사이트만들기_01

정소현·2024년 8월 28일
0

팀프로젝트

목록 보기
10/50

🌟프로젝트 명 : Yummy yummy!

🌼 개요

지금까지 배웠던 React hook, react-route-dom 들을 이용하여 뉴스피드 사이트를 만들게 되었다. 저번에 이어 팀장을 맡게되었고 프로젝트 관리, 일정 관리 등 신경써야 할 부분들을 놓치지 않고 챙기기 위해 많이 노력할 것이다.
팀원들과 함께 주제를 정하기 전 뉴스피드 사이트의 주제를 스스로 고민해보았고 하나의 분야에 특화된 뉴스피드 사이트면 좋을 것 같다고 생각했다. 치솟는 물가, 1인가구가 늘어나며 요리에 관심을 가지고 취미를 가지는 사람이 많아졌다는 생각이 들면서 나만 알고 있는 요리 레시피들을 공유하고 떄론 정보를 얻어갈 수 있는 커뮤니티 사이트를 만들면 좋을 것 같아 구체적으로 사이트 예시를 적어가 팀원들과 이야기하게 되었다.
최종적으로 내가 제시했던 요리레시피사이트가 주제로 선정되었고 바로 코드 컨벤션, 깃 컨벤션, 깃세팅, 프로젝트 세팅, 와이어 프레임 제작을 시작하게 되었다.

🌼 사이트 소개

: 유저들이 공유한 요리 레시피 기록을 한 눈에 볼 수 있는 뉴스피드 사이트

🌼 기능

: 레시피 게시글 CRUD, 유저 로그인/회원가입, 상세페이지 열람, 마이페이지, 프로필수정, 내가 작성한 게시글확인하기 , 내가 작성한 리뷰 확인하기, 게시글 댓글 CRUD (기능 추가 구현 예정)

🌼 페이지 분배

  • 공통
    • Header
    • Footer
  • 메인페이지
    • 레시피 리스트 - 무한 스크롤
  • 상세페이지
    • 레시피 상세정보
    • 댓글 CRUD
  • 게시글 작성페이지
    • 사진, 제목, 게시글 업로드
  • 로그인, 회원가입페이지
    • 로그인, 회원가입 기능(아이디(이메일), 패스워드)
  • 마이페이지
    • 프로필수정
    • 내가 작성한 게시글 확인
    • 내가 작성한 댓글 확인
  • 로그인 한 작성자가 볼 수 있는 페이지
    • 마이페이지
    • 로그인, 회원가입

🌼 개발환경

  • yarn vite
  • React
  • styled-component

🌼 코드 컨벤션

  • ES Lint , prettier 사용
  • 컴포넌트일 경우에만 .jsx확장자 사용
  • customHook을 사용하는 경우 : use + 함수명
  • Props의 경우: on (onClick 등등)
  • 함수인 경우: handle (handleClick 등등)
  • 상수 : 모두 대문자 스네이크 케이스(snake_case) 예시) SNAKE_CASE
  • js(변수, 함수, 인스턴스) : 카멜 케이스(camelCase) 예시) const createMovie = [];
  • css, html : 케밥 케이스(kebab-case) 예시)
  • image 명 : 케밥 케이스(kebab-case) 예시) movie-img.jpg
  • 주석 최대한 활용하기 : 해당 코드 제목, 설명 간단하게 적어놓기
  • 약칭은 되도록 사용하지 않기

💥 팀장으로서 나의 역할

저번 팀 프로젝트에 이어 이번에도 팀장을 맡게되었다.
1. 프로젝트를 원활하게 진행하기 위해 계획서 작성
2. 팀장으로서 프로젝트를 만들고 Git repository를 생성 후 연결
3. 프로젝트 초기세팅 후 git push
4. supabase 연결

💥 팀원으로서 나의 역할

  1. 로그인, 회원가입페이지 만들기
  2. 로그인, 회원가입기능 개발

⭐️ 진행순서

1. 사이트페이지, 사이트기능구현 계획서 작성

2. 개발환경, 코드컨벤션 정하기

3. 와이어프레임제작

: 필요한 사이트개수와 기능들을 상의한 다음 바로 와이어프레임 제작에 들어갔다.
1. 필요한 사이트 레이아웃 생성 후 간단한 레이아웃 만들기

  1. 포인트 컬러 & 폰트 선정

4. 깃허브 레퍼지토리 생성 & collaborators 초대

5. yarn create vite 로 프로젝트 생성

6. 프로젝트 셋업

  1. ES Line & prettier 설정
    .prettierrc을 생성 후 아래 코드 삽입
{
  "prettier.tabWidth": 4,
  "prettier.printWidth": 5000,
  "prettier.proseWrap": "never",
  "prettier.bracketSameLine": true
}

  1. shared, pages, components 폴더 생성 후 react-router-dom을 사용해 router 생성

    • pages에는 총 5개의 페이지가 들어감. 페이지 별로 폴더를 만들어 컴포넌트 생성
    • components에는 공통된 컴포넌트만 주입
    • shared에 header 와 footer등 공통된 레이아웃을 넣을 Layout.jsx와 router.jsx 생성
    • reset.css 생성
    • styles폴더생성후 GlobalStyle.jsx 에 색상변수설정, 공통font지정
    • main.jsx에서 router, GlobalStyle, reset.css 연결

어려웠던 점 🥵

1. 컴포넌트 구분법

문제점

컴포넌트를 어떤 기준으로 구분하는 게 좋을 지 고민이 되었다. 팀원들과 여러가지 방법과 구글 서치를 하며 이야기를 나누었고 UI/UX, features로 구분하는 방법 페이지별로 구분하는 방법 등 여러가지 제시방안이 나왔다.
여러가지 고민을 해보다가 튜터님께 찾아가게되었고
두가지 방안을 제시해주셨다.

해결 방법

  1. src > common
    폴더를 생성 후 공통 컴포넌트를 넣어준다.
    ex) button, input, layout, router...
    src > common > page > {페이지이름}page > 파일
    page에서 사용하는 component들은 components 폴더 안에 page 폴더 생성 page 안에 페이지별 폴더를 만들어 그 안에 컴포넌트를 작성하는 방법
  2. src > common
    common폴더에는 재사용되는 공통된 컴포넌트를 넣어주고
    src > pages > {페이지이름}page
    page별로 폴더를 생성해 그 안에 페이지 내에서만 사용되는 컴포넌트를 적는다.

우리는 위의 두 가지 방법 중 2번째 방법으로 컴포넌트 구분 기준을 정하였다. import depth를 생각했을 때, 가독성을 고려했을 때 더 편리하게 쓸 수 있을 것 같다고 판단했기 때문이다.

☘️ 느낀 점

supabase를 이전에 사용해본 적이 없었는데 새로운 방법을 사용해 로그인 회원가입 기능을 만들고 하는 게 욕심이 났다.
내일부터 본격적으로 기능 개발에 들어가게 될텐데 한 번도 해보지 않은 기능 구현이라 쉽지 않겠지만 새로운 것을 또 하나 알아가는 게 재밌을 것 같기도 하고 조금은 두렵기도 하다.. ㅎㅎ
팀원들이 함께 으쌰으쌰 하고 있으니 서로 모르는 부분이 있으면 같이 도와주고 git pr 기능을 적극 활용하여 서로에게 좋은 선생님이 되어주고 동료가 되어줄 수 있을 것을 기대한다 !!

profile
정소현
so
이전 포스트

프로젝트2_영화페이지 빌드업_4(최종제출, 발표)

다음 포스트

Yummy-yummy!_팀프로젝트3_요리레시피_뉴스피드사이트만들기_02

0개의 댓글