React 심화 프로젝트 (코리니🐘)

0. 프로젝트 목표 / 아이디어 / 요구사항

📌 프로젝트 목표

• 트러블 슈팅을 정리 할 수 있다.
• 기술 스택 선정의 이유를 설명 할 수 있다.
• 인증/인가 고려한 웹 서비스 구현 할 수 있다.

💡 아이디어

• main : 개발자가 되고 싶은 사람들의 커뮤니티(잡담방…) / 코린이
• 마이페이지 : 이력서 / 포폴 / 깃헙 연동 / 내가 쓴 글
• 게시판 : 학습 (기술 별 해시태그로!) / 자유 (내용은 해시태그로!)
• sub : 개발자들을 위한 간단한 서비스 chatGPT로 제공
• 변수명 짓기

📍 요구사항

• 좋아요 또는 북마크 기능에 리액트쿼리 Optimistic Update 적용
• 무한스크롤 기능에 리액트쿼리 useInfiniteQuery 적용
• form 유효성검사에 react-hook-form 라이브러리 적용
• Yarn Berry 적용하여 깃헙관리
• Supabase 적용

1. 프로젝트 제목 및 간단 설명

✔️ 프로젝트 제목

“코리니” : 우리와 같은 “코린이”들을 위한 웹 페이지 입니다.

✔️ 프로젝트 설명

• 게시판에 학습에 관한 질문을 할 수 있는 학습 게시판, 장비나 코딩 관련된 것들을 자랑할 수 있는 자유 게시판이 있습니다.
• 상세 페이지로 이동하면 내가 쓴 글들을 모아볼 수 있고, 북마크 기능을 사용하여 원하는 게시물을 나중에 볼 수 있습니다.
• chatGPT를 사용하여 “코린이들이 제일 힘들어하는!!! 변수명 이름 짓기”를 하여 이것에 대한 의견을 내며 자유로운 소통을 할 수 있습니다.
• 이 웹 페이지를 통해서 코린이들이 성장할 수 있는 의사소통의 장을 만들어 많은 정보를 알아가 취업에 성공하는 지름길이 되었으면 좋겠습니다.

✔️ 개발 기간

2023.08.07 ~ 2023.08.14

✔️ 사용 기술

• Redux toolkit
• typescript
• Chat GPT API
• supabase
• react-router-dom
• styled-components
• react-query

2. 와이어 프레임

3. 개발해야 하는 기능들

• 필수 기능
  • 회원가입 / 로그인 / (마이페이지)
  • 게시글 CRUD 및 게시글 조회 (상세 페이지)
  • 게시글 조회 (메인 페이지) 무한스크롤 (혹은 페이지네이션)
  • 댓글 CRUD 및 게시글 북마크
  • chatGPT 채팅 기능 구현
• 선택 기능
  • best 게시글 혹은 해시태그 별 필터링
  • 마이페이지 - git 잔디

4. DB 설계

• user : userid / email / name / profilepic / stack
• post : userid / name / category / tag / title / body / isDeleted / postid / date
• comment : userid / name / postid / commentid / contents / isDeleted / date
• bookmark: userid / postid
  

5. RESTful API

6. Ground Rule

• 소통 Rule
  • 장시간 자리 비움 시 미리 말씀해 주세요.
  • 계속해서 막힌다면 혼자 마음앓이 하지 말고 공유해요.
• 커밋 컨벤션
  • feat : 새로운 기능 추가
  • fix : 버그 수정
  • docs : 문서 수정
  • style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
  • design : css (styled-component)
  • refactor : 코드 리펙토링
  • test : 테스트 코드, 리펙토링 테스트 코드 추가
  • chore : 빌드 업무 수정, 패키지 매니저 수정
  • ex) reat-회원가입 오류 수정
• branch 이름
  • main
  • dev
    • feat-[기능이름]

      git branch [내가 만든 브랜치명] develop
      git checkout [내가 만든 브랜치명]
      // 위의 두 명령을 합하면
      git checkout -b [내가 만든 브랜치명] develop