📗 톡후감 | TALKHOOGAM 📗

톡후감 바로가기🔗
Test ID : talkhoogam@test.com
Test PW : test123

*️⃣목차

1. 📄프로젝트 소개
2. 👨‍👩‍👧‍👦팀 소개 및 역할
3. 🗓️개발 일정
4. 🔨기술 스택 및 이유
5. 🔍기능 및 구조
6. 👫협업 방식
7. ♻️리팩토링

1. 📄프로젝트 소개

• <톡후감>은 서로의 독후감을 공유하는 독서 SNS 플랫폼입니다.
• 책과 함께 짧은 톡후감 또는 긴 독후감 모두 공유할 수 있습니다.
• 중고책을 거래할 수 있는 거래 서비스를 제공합니다.
• 마음 맞는 사람끼리 모여 독서할 수 있는 독서 모임 구인 서비스를 제공합니다.

2. 👨‍👩‍👧‍👦팀 소개 및 역할

저희는 "🦝도와줘 너굴맨🦝" 조 입니다.

최창호	안정현	황시하	박예빈
ChangHoChoi92	nonelijah	coo1river	yebinholmes

역할 분담

3. 🗓️개발 일정

주차	내용
1주차 (10/16 - 10/21)	기획 프로젝트 주제 선정 및 서비스 기획. 화면 기능 및 목록 작성. 기술 스택 및 협업툴 결정. 초기설정 협업 툴 결정 및 협업 기술 사용 숙달. 컨벤션 및 기타 초기 세팅 결정 등
2주차 (10/22 - 10/28)	마크업 및 기능 구현 명세에 따른 필수 기능 위주의 마크업 및 기능 구현. 페이지 및 기능별 역할 분담.
3주차 (10/29 - 11/03)	마크업 및 기능구현 서비스 기획에 따른 세부 기능에 대한 마크업 및 기능 구현 리팩토링 기존 코드에 대한 리팩토링(버그 수정 및 기능 보완 등)
4주차 (11/04 - 11/06)	마무리 구현 기능에 대한 추가적인 리팩토링(디테일 및 오류 수정, 코드 정리 등). README 작성 등

4. ⛏️기술 스택 및 이유

기술 스택

사용 기술
패키지
포맷터
협업
디자인
IDE

사용 이유

• React
  • 가상 DOM을 사용함으로써 빠른 렌더링 속도를 보장하고 컴포넌트 단위로 모듈화 하여 코드 관리하기 용이 합니다. 또한 SPA 개발을 하며 사용자 경험을 위해 사용 했습니다.
• Recoil
  • 전역에서 데이터를 관리하므로 컴포넌트 간 데이터 전달을 간단하게 만들어 주어 복잡한 상태 관리 문제를 해결 하기 위해 사용했습니다.
• React Router
  • SPA에서 페이지 이동을 관리하고 사용자의 편의성을 높이기 위해 사용했습니다.
• Styled-Components
  • JavaScript 내에서 CSS 스타일을 작성할 수 있게 해줌으로써 컴포넌트 단위의 스타일링이 가능해져 코드의 재사용 성과 가독성을 높이며, 동적인 스타일링도 쉽게 할 수 있기에 사용했습니다.

5. 🔍기능 및 구조

기능

welcome	회원가입(이메일 등록)	회원가입(프로필 등록)

로그인	유저 검색	NotFound

피드 조회	댓글(등록, 삭제)	피드 등록

상품 등록	상품 삭제	상품 수정

나의 프로필	프로필 수정	팔로우/팔로워

다른유저프로필	채팅	독서모임

📁폴더 구조

• src/api/ : API을 이용하기 위한 hook
• src/assets/ : 전역에서 사용하는 이미지, 폰트
• src/components/ : 공통 컴포넌트
• src/pages/: 서비스에 사용되는 각 페이지
• src/routes/: 페이지 라우팅
• src/recoil/: 전역에서 사용되는 Reocil
• src/utils/: API 외 사용될 기능

📦final-19-Talkhoogam
┣ 📂public
┃ ┣ 📜index.html
┃ ┗ 📜Logo.ico
┣ 📂src
┃ ┣ 📂api
┃ ┃ ┣ 📂comment
┃ ┃ ┣ 📂post
┃ ┃ ┣ 📂product
┃ ┃ ┣ 📂profile
┃ ┃ ┗ 📂upload
┃ ┣ 📂assets
┃ ┃ ┣ 📂chat
┃ ┃ ┣ 📂fonts
┃ ┃ ┃ ┗ 📂pretendard
┃ ┃ ┣ 📂icons
┃ ┃ ┗ 📂images
┃ ┣ 📂components
┃ ┃ ┣ 📂comment
┃ ┃ ┣ 📂common
┃ ┃ ┃ ┣ 📂button
┃ ┃ ┃ ┗ 📂input
┃ ┃ ┣ 📂empty
┃ ┃ ┣ 📂footer
┃ ┃ ┣ 📂Gathering
┃ ┃ ┣ 📂header
┃ ┃ ┣ 📂modal
┃ ┃ ┗ 📂profile
┃ ┣ 📂pages
┃ ┃ ┣ 📂chat
┃ ┃ ┣ 📂post
┃ ┃ ┣ 📂product
┃ ┃ ┗ 📂profile
┃ ┣ 📂recoil
┃ ┣ 📂router
┃ ┣ 📂styles
┃ ┣ 📂utils
┃ ┣ 📜App.js
┃ ┗ 📜index.js
┣ 📜.gitignore
┣ 📜.prettierrc
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜README.md

6. 👫협업 방식

문화

---

• 월/목 오전 9시 반 회의(회고 및 작업 계획)
• 실시간 쉐어 프로그래밍을 통한 문제 해결
• 개발 중에는 프로젝트 디스코드 채널에 접속하여 진행

notion

노션 링크

---

• 진행 상황 공유, 버그 리포트, 회의록, 깃 사용법 등을 노션에서 문서화 하여 관리했습니다.

GitHub

---

중앙 원격 저장소 및 Git Issues 활용

• 중앙 원격 저장소를 통해 팀원들은 프로젝트 관련 이슈를 공유하고 조율합니다.
• Git Issues를 활용하여 작업 내용, 버그, 기능 요청 등을 효율적으로 관리합니다.

Default Branch 설정

• Develop 브랜치를 Default branch로 설정하여 팀원들은 PR을 제출할 때 전달 브랜치를 선택할 필요가 없습니다.
• 이를 통해 휴먼 에러를 방지하고 혼란을 줄입니다.

작업 브랜치 관리

• 각 팀원은 Develop 브랜치에서 작업할 개별 브랜치를 생성하여 코드 작성합니다.
• PR이 완료되면 해당 작업 브랜치를 즉시 삭제하여 저장소의 브랜치 관리를 깔끔하게 유지합니다.

메인 브랜치 업데이트

• 메인 브랜치(main)가 배포 branch로 사용되며, 팀장은 Develop 브랜치에서 메인 브랜치로 PR을 생성하고 승인합니다.

Discord

---

• commit, PR 등을 실시간으로 알림 받을 수 있도록 디스코드를 사용하였습니다.

컨벤션

---

• 커밋

🌼 init: 초기 설정
✨ feat: 기능 추가, 삭제, 변경
🐛 fix: 버그, 오류 수정
📃 docs: readme.md, json 파일 등 수정, 라이브러리 설치 (문서 관련, 코드 수정 없음)
🎨 style: CSS 등 사용자 UI 디자인 변경 (제품 코드 수정 발생, 코드 형식, 정렬, 주석 등의 변경)
🔨 refactor: 코드 리팩토링
🧪 test: 테스트 코드 추가, 삭제, 변경 등 (코드 수정 없음, 테스트 코드에 관련된 모든 변경에 해당)
⚙️ ci: npm 모듈 설치/ 패키지, 매니저 설정할 경우, etc 등
✏️ Rename : 파일명 혹은 폴더명 수정, 위치 이동
🗑️ Remove : 파일 삭제

• Pull requests

• Prettier

{
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "singleQuote": true, // single 쿼테이션 사용 여부
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비
  "semi": true, // 세미콜론 사용 여부
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "bracketSpacing": true, // 객체 리터럴에서 괄호에 공백 삽입 여부
  "arrowParens": "always", // 화살표 함수 괄호 사용 방식
  "quoteProps": "preserve" // 객체 속성에 쿼테이션 적용 방식
}

---

7. ♻️리팩토링

• 반응형 웹 개발
  
• 시멘틱 마크업 준수
  
• 새로운 기능 추가
  
• 팀원 코드 리팩토링