- ID : [email protected]
- PW : abc12345
- 💪 복근곰 마켓 서비스는 운동을 즐기는 사람들을 위한 SNS입니다.
- 🏋️ 운동과 관련한 상품들을 업로드하여 판매할 수 있습니다.
- 🏞️ 상품을 등록하지 않아도 일상을 공유하며 즐거운 SNS 활동을 할 수 있습니다.
- ✏️ 글과 사진과 함께 게시물을 작성하여 자신의 일상을 공유하고 운동 인증을 할 수도 있습니다.
- ❤️ 다른 사용자를 팔로우하여 소식을 공유할 수 있고 댓글과 좋아요를 통해 소통할 수 있습니다.
gantt
title 프로젝트 개발 기간
dateFormat YYYY-MM-DD
section 복근곰마켓
프로젝트 개발, 배포 :a1, 2022-12-07, 29d
프로젝트 리팩토링 :after a1, 14d
| 🤖 정수현 (팀장) | 🔥 강세민 | 🏅 김성준 | 🦁 한혜지 |
|---|---|---|---|
 |
 |
 |
 |
- 멋쟁이사자처럼 프론트엔드 스쿨 3기 프로젝트 15조
15조는 리액트를 찢오입니다. - 이 프로젝트를 통해 팀원 모두 낯설었던 리액트를 찢어보자! 라는 의미에서 다음과 같은 팀명을 짓게 되었습니다.
- 원본 밈인
북극곰은 사람을 찢어에서 비롯하여 저희의 대표 캐릭터도 북극곰으로 지정했습니다. 🐻❄️
- 스플래시 페이지
- 회원가입 페이지
- 프로필 페이지
- 반응형 디자인 구현
- 토스트 메시지 구현
- 로딩중 & 404 페이지
- 게시글 상세 페이지 댓글 더보기 기능 구현
- 로그인 유효성 검사
- 디자인 총괄
- 게시글 상세보기 + 댓글 페이지
- 게시글 수정 페이지
- 프로필 페이지
- 프로필 수정 페이지
- 채팅 페이지
- 로그인 페이지
- 게시글 업로드 페이지
- 상품 업로드 페이지
- 팔로잉 팔로우 리스트 구현
- 프로필 페이지
- 홈피드 페이지
- 검색 페이지
- 홈피드에서 페이지네이션 구현
- 프로필 내 피드에서 무한 스크롤 구현
- top 버튼 구현
- 공통 컴포넌트
| 프론트엔드 | 백엔드 | 배포 | 디자인 | ||
|---|---|---|---|---|---|
React
|
styled-components
|
부트캠프에서 제공된 API 사용 |
Vercel
|
Adobe Photoshop
|
Figma
|
| 모듈명 | 용도 |
|---|---|
| react-router-dom | 페이지 라우팅을 위해 사용 |
| axios | 서버와 통신을 위해 사용 |
| react-intersection-observer | 무한 스크롤 구현을 위해 사용 |
| styled-reset | 스타일 구현의 편의를 위해 사용 |
| uuid | 컴포넌트 리스트의 유니크한 key 생성을 위해 사용 |
| browser-image-compression | 업로딩 이미지 압축을 위해 사용 |
- 프로젝트 노션 페이지 내 남은 작업 목록에서 원하는 작업을 분담합니다.
- 해당하는 업무에 대해 GitHub Issue를 생성합니다. (이슈 템플릿 사용)
- GitHub Actions에 의해 자동으로 생성된 브랜치로 전환하여 해당하는 업무를 진행합니다.
- 작업을 완료하면 작업한 브랜치에서(main브랜치 X) 코드를 push합니다.
- PR(Pull Request) 을 오픈합니다.
-
PR(pull request)을 오픈하면, 푸시한 사람 외 다른 팀원 1명이 코드를 확인하고 승인합니다.
-
PR이 오픈되면 다른 팀원들이 바로 확인할 수 있도록 디스코드 웹 훅 설정을 통해 팀 채팅방으로 알람을 받을 수 있도록 했습니다.
-
코드 리뷰 & 승인은 생산성을 위해 리뷰어를 1명으로 지정하되, 팀원들이 코드 스타일을 공유하며 서로 잘 이해할 수 있도록 순서를 정해 돌아가며 골고루 리뷰하도록 했습니다.
-
컨펌 순서
- 성준 :
수현→세민→혜지 - 수현 :
성준→혜지→세민 - 세민 :
혜지→수현→성준 - 혜지 :
세민→성준→수현
- 성준 :
- PR이 merge되어 close 되면 해당 이슈는 자동으로 Done상태로 변경됩니다.
-
- 간편한 이슈 생성을 위해 이슈 템플릿을 만들어 사용했습니다.
- 이슈 템플릿으로 어떤 이슈인지, 어떤 페이지에 해당하는 지, 구현 해야 하는 내용이 무엇인지를 적도록 했습니다.
- 팀원이 현재 어떤 작업을 진행하고 있는지를 바로 알 수 있어 의사소통 비용을 줄일 수 있었습니다.
-
- 칸반 보드로 프로젝트 진행 상황을 한 눈에 확인할 수 있어 일정을 관리하기 수월했습니다.
- 개발과 동시에 지속적으로 배포를 진행할 것이 아니라, 기능을 모두 개발하고 최종적으로 배포를 할 예정이었기 때문에 Git Flow 전략보다는 GitHub Flow 전략이 적합하다고 생각했습니다.
- 프로젝트 기간 동안 팀원들이 같은 시간에 작업하기 때문에 잦은 충돌이 발생할 것을 우려하여 충돌의 크기를 줄이고자 GitHub Flow 전략을 채택하여 작은 단위로 이슈를 쪼개 이슈 별로 브랜치를 분기하고 main 브랜치에 지속적으로 merge 하는 방식으로 진행했습니다.
-
이슈를 생성하면 GitHub Action으로 해당 이슈에 해당하는 브랜치가 자동으로 생성되도록 설정하여 브랜치명을 고민하고 브랜치를 생성하는 시간을 줄였습니다.
- 브랜치 자동화 설정 상세 내용
-
예) 자동 생성된 브랜치를 pull 하고
git checkout -t origin/feat/issue-81하여 해당 브랜치로 이동합니다.
팀원 간의 원활한 소통과 협업을 위해 커밋 컨벤션과, 코드 컨벤션을 만들어 이를 따랐습니다. 리드미에는 간략히 작성하고, 자세한 컨벤션은 각각의 타이틀에 링크된 깃허브 위키에 적어두었습니다.
-
다양한 사례를 참고하여 프로젝트에서 주로 쓰일 것 같은 커밋 유형을 간추려 컨벤션으로 지정했습니다.
1. 커밋 유형 지정 - 커밋 유형은 영어로 작성하며, 첫 글자를 대문자로 합니다 - 커밋 유형 - Feat : 새로운 기능, 특징 추가 - Fix : 수정, 버그 수정 - Docs : 문서에 관련된 내용, 문서 수정 - Style : 스타일링 - Refactor : 리팩토링 - Test : 테스트 코드 수정, 누락된 테스트를 추가할 때, 리팩토링 테스트 추가 - Chore : 빌드 업무 수정, 패키지 매니저 수정 🧾 2. 커밋 메시지는 제목 & 본문으로 구성합니다. git commit -m "Feat: 로그인 기능 구현 #13 //제목 - 로그인 유효성 검사 //본문 - 로그인 정보 서버로 전송" //본문 #️⃣ 3. 커밋메시지의 제목 끝에는 이슈 번호를 달아 이슈와 연결해줍니다. git commit -m "Feat: 로그인 기능 구현 #13" ↩️ 4. 커밋메시지의 제목과 본문은 빈 행으로 분리합니다. - 본문에는 변경한 내용과 이유를 설명합니다. - 어떻게 보다는 무엇 & 왜를 설명합니다. - 제목과 본문은 한글로 작성하여 내용이 잘 전달될 수 있도록 합니다. ⏺️ 5. 여러가지 항목이 있다면 글머리 기호를 통해 가독성을 높입니다. 👆 6. 한 커밋에는 한 가지 문제만 담습니다.
-
리액트 코딩에 주로 쓰이는 컨벤션을 참고하여 저희 조만의 코드 컨벤션을 만들었습니다.
-
문자열 처리 시 쌍따옴표/홑따옴표의 사용, 혹은 문장 끝 세미콜론의 사용여부와 같은 개인적 취향이 반영될 수 있는 항목들의 경우에는 사전 설문을 통해 다수결에 따라 지정했습니다.
🛼 컴포넌트로 분리된 파일은 PascalCase으로 작성합니다. 🐫 컴포넌트가 아닌 파일, 함수명, 변수명은 camelCase로 작성합니다. 💄 다른 스타일 시트 파일(Styled-components)은, 스타일 시트 적용할 파일명 .style.js를 붙여주고, 앞글자는 소문자로 합니다. (확장자는 .js) 🐫 함수명, 변수명은 camelCase로 작성합니다. ❓ 만약 변수에 할당되는 값이 boolean인 경우에는 is를 접두사로 붙입니다. 🔠 상수는 대문자로만 작성합니다. 🔢 컴포넌트 파일 내 import 순서는 모듈 → 컴포넌트 → 스타일컴포넌트 순으로 합니다. 💬 문자열을 처리할 때는 쌍따옴표를 사용하도록 합니다. 🔚 문장이 종료될 때는 세미콜론을 붙여줍니다. 👆 가독성을 위해 한 줄에 하나의 문장만 작성합니다. ✏️ 주석은 설명하려는 구문에 맞춰 들여쓰기 합니다. 🧮 연산자 사이에는 공백을 추가하여 가독성을 높입니다. 📠 콤마 다음에 값이 올 경우 공백을 추가하여 가독성을 높입니다.
| 스플래시 페이지 | |
|---|---|
| 스플래시(데스크탑 🖥️) | 스플래시(모바일 📱) |
|
|
| 회원가입 페이지 | |
| 회원가입(데스크탑 🖥️) | 회원가입(모바일 📱) |
|
|
|
| 로그인 페이지 | |
| 로그인(데스크탑 🖥️) | 로그인(모바일 📱) |
|
|
| 홈 피드 페이지 | |
| 홈 피드(데스크탑 🖥️) | 홈 피드(모바일 📱) |
|
|
| 게시글 상세 보기 + 댓글 페이지 | |
| 게시글 상세 보기 + 댓글(데스크탑 🖥️) | 게시글 상세 보기 + 댓글(모바일 📱) |
|
|
| 게시글 업로드 페이지 | |
| 게시글 업로드(데스크탑 🖥️) | 게시글 업로드(모바일 📱) |
|
|
| 상품 업로드 페이지 | |
| 상품 업로드(데스크탑 🖥️) | 상품 업로드(모바일 📱) |
|
|
| 검색 페이지 | |
| 검색(데스크탑 🖥️) | 검색(모바일 📱) |
|
|
| 프로필 페이지 | |
| 프로필(데스크탑 🖥️) | 프로필(모바일 📱) |
|
|
| 프로필 수정 페이지 | |
| 프로필 수정(데스크탑 🖥️) | 프로필 수정(모바일 📱) |
|
|
| 로그아웃 페이지 | |
| 로그아웃(데스크탑 🖥️) | 로그아웃(모바일 📱) |
|
|
| 채팅 페이지 | |
| 채팅(데스크탑 🖥️) | 채팅(모바일 📱) |
|
|
| 404 페이지 | |
| 404(데스크탑 🖥️) | 404(모바일 📱) |
|
|
- 레포지토리 클론
git clone https://github.com/nailedReact/bokgungom-market.git
- 프로젝트 소스 코드 폴더로 이동
cd my-app
- 필요한 모듈 설치
npm install
- 로컬 환경에서 리액트 앱을 실행
npm start