배포 URL
이메일 로그인 테스트 계정
- ID :
[email protected]- Password :
252525
- 사용자간 먹을 친구를 구하는 게시글을 올릴 수 있습니다.
- 혼자 사기 힘든 음식이나 물건을 공동구매할 수 있습니다.
- 커뮤니티 서비스를 이용할 수 있습니다.
- 회원 가입 및 로그인 기능
- 피드 업로드 기능(같이 먹을사람!)
- 공구상품 등록 기능
- 사용자간 팔로우 기능
- 프로필 수정
| 정종미 | 김지우 | 신기찬 | 정선빈 |
|---|---|---|---|
 |
 |
 |
 |
| 🔗jjo-mi | 🔗jiuuij | 🔗KichanShin | 🔗 정선빈 |
| 팀장 | 팀원 | 팀원 | 팀원 |
| 정종미 | 김지우 | 신기찬 | 정선빈 |
|---|---|---|---|
 |
 |
 |
 |
- 1주차 (2023-06-01 ~ 2023-06-07) : 서비스 기획 및 설계
- 2주차 (2023-06-08 ~ 2023-06-11) : 공통컴포넌트 제작 및 마크업
- 3주차 (2023-06-12 ~ 2023-06-27) : 기능개발 및 버그 수정
- 제공된 API 사용
- 버전 관리 : Git, GitHub
- 진행 상황 관리(칸반 보드) : GitHub Projects
- 이슈 관리 : GitHub issues
- 문서 관리 : Notion
- 메신저 : Discord
- API 테스트 : Postman
src/api/: 유지보수와 재사용성을 위한 분리src/assets/: 서비스에서 사용하는 에셋 파일 (폰트, 아이콘, 이미지)src/components/: 서비스에서 사용하는 컴포넌트 (공통 컴포넌트, 공통 레이아웃)src/context/: 전역 데이터를 공유하기 위해 정의한 Context 파일(토큰, accountName)src/hooks/: 재사용을 위해 분리한 Custom Hooksrc/pages/: 공통 컴포넌트를 사용해 만든 페이지src/routes/: 페이지 라우팅을 위한 파일src/styles/: 전역 스타일 파일(글로벌, 리셋css)src/utils/: 재사용을 위해 분리한 유틸 파일
📦 FINAL-25-WOULD-YOU
├─ 📦 public
│ └─ 📜 index.html
└─ 📦 src
├─ 📂 api
├─ 📂 assets
│ ├─ 📂 fonts
│ └─ 📂 images
├─ 📂 components
│ ├─ 📂 common
│ │ ├─ 📂 Chat
│ │ ├─ 📂 Comment
│ │ ├─ 📂 Header
│ │ ├─ 📂 HeaderTest
│ │ ├─ 📂 Input
│ │ ├─ 📂 Modal
│ │ ├─ 📂 Post
│ │ ├─ 📂 Product
│ │ ├─ 📂 Profile
│ │ ├─ 📂 TabMenu
│ │ └─ 📂 User
│ └─ 📂 layout
├─ 📂 context
├─ 📂 hooks
├─ 📂 pages
│ ├─ 📂 Chat
│ │ ├─ 📂 ChatList
│ │ └─ 📂 ChatRoom
│ ├─ 📂 Feed
│ ├─ 📂 Join
│ │ ├─ 📂 JoinEmail
│ │ └─ 📂 JoinProfileSetting
│ ├─ 📂 Login
│ │ ├─ 📂 LoginEmail
│ │ └─ 📂 LoginMain
│ ├─ 📂 NotFound
│ ├─ 📂 Post
│ ├─ 📂 Product
│ ├─ 📂 Profile
│ │ └─ 📂 MyProfile
│ ├─ 📂 ProfileModification
│ ├─ 📂 SearchUser
│ ├─ 📂 Splash
│ └─ 📂 Upload
├─ 📂 routes
├─ 📂 styles
├─ 📂 utils
├─ 📜 App.jsx
└─ 📜 index.jsx
- 프로젝트 규모가 크지 않으므로 main Branch를 보호하기 위해 3개의 Branch 사용
- main : 배포만을 위한 브랜치(언제나 실행가능한 상태 유지)
- develop : main으로 가기전 각기능과 유기적으로 돌아가는는 개발만을 위한 브랜치
- feature : 기능을 개발하는 브랜치
- 브랜치명 규칙 :
feat/#이슈번호orfeat/login/#이슈번호 - 예)
feat/#1orfeat/login/#1
- 브랜치명 규칙 :
> 이슈관리 GitHub issues 등록
> 진행상황관리 GitHub Projects등록
- 커밋 메시지는
[타입] 주제 #이슈번호와 같이 작성한다.[타입]뒤에 띄어쓰기 한 후에, 작성할 것! - 예)[add] ListView에 빠진 문구 추가 #2- 커밋 메시지는 제삼자가 봤을 때 무엇을 했는지 파악할 수 있게 자세히 작성한다.
- 커밋 메시지는 어떻게 보단 무엇과 왜를 설명한다.
- 타입의 종류
- 🐛 fix: 올바르지 않은 동작을 고친 경우 ⇒ 버그 수정
- ✨ feat: 새로운 기능을 추가한 경우 ⇒ 새 기능
- ♻️ refactor: 내부 로직은 변경하지 않고 코드를 개선한 경우 ⇒ 코드 리팩토링
- 🎨 style: 코드 개선과 상관없이 사소하게 코드를 수정한 경우 ⇒ 코드 구조 및 형태 개선
- 📝 (마크업) or 💄(css) design: 사용자 UI를 추가, 수정한 경우 (마크업, 퍼블리싱 작업)
- add: 폴더, 파일 등을 추가한 경우
- 🚚 move: 폴더, 파일, 코드 등의 위치를 이동한 경우 ⇒ 리소스 이동, 이름 변경
- rename: 폴더명, 파일명 등을 수정한 경우
- 🔥 remove: 폴더, 파일, 코드 등을 삭제한 경우 ⇒ 코드 및 파일 삭제
- assets: 에셋을 추가, 수정한 경우
- 📝 docs: 문서를 추가, 수정한 경우 ⇒ 문서 추가 및 수정
- chore: 위의 모든 경우에 포함되지 않는 기타 수정사항
- 공통적으로 알아야할 부분은 같이 공유할 수 있게 정리
- 테스트 후 오류 발견시 해당 내용 작성하여 담당자에게 전달
| 테스트중 오류 발견시 | 오류사항 수정 |
|---|---|
 |
 |
- 서비스 내용에 따라 게시글 input값 많아져서 데이터를 객체형태로 묶어서 전달
| 기본 화면 | 서비스에 맞춘 화면 |
|---|---|
 |
 |
- 재사용성과 api 통신하는 페이지의 코드량 축소로 가독성 높임.
- 추후 유지보수를 위해 api 분리하여 관리하여 효율성 높임 .
- api 통신시 회원가입 여부 확인을 위해 전역에서 필요한 token, accountname을 useContext를 이용하여 관리.
- useContext를 사용함으로써 필요하지 않은 자식컴포넌트에 전달하지 않고 내가 필요한 곳에서 바로 쓸 수 있음.(prop drilling 또는 불필요한 데이터 요방지)
- 페이지마다 레이아웃 통일을 위해 공통 컴포넌트로 만들어 여러 페이지에서 사용할 수 있도록 함.
- url을 기준으로 Header와 Footer의 type을 결정하여 props로 Header와 Footer 컴포넌트에 전달함.
- 페이지가 업데이트 되더라도 타입만 추가해주면 간단하게 레이아웃 적용 가능할 수 있도록 구현함.
- 라이브러리 사용으로 폼 요소의 상태(값 추적, 유효성검사 등)관리를 통해 간편한 관리.
- 복잡한 폼 로직 간소화로 개발 생산성 높임 .
| 시작 화면 | 회원가입 페이지 | 회원가입 프로필 설정 페이지 |
|---|---|---|
 |
 |
 |
| 피드 페이지 | 검색 페이지 | |
 |
 |
| 채팅 페이지 |
|---|
 |
| 게시글 상세 페이지 | 게시글 업로드 페이지 | 게시글 삭제 |
|---|---|---|
 |
 |
 |
| 게시글 신고 | 좋아요 기능 | |
 |
 |
| My Profile 페이지 | �Your Profile 페이지 | 리스트 / 앨범형으로 보기 |
|---|---|---|
 |
 |
 |
| 프로필 수정 페이지 | 팔로워/팔로잉 페이지 | 로그아웃 기능 |
 |
 |
 |
| 공구 중인 상품 등록 페이지 | 상품 수정 및 삭제 | 웹사이트 연결 |
|---|---|---|
 |
 |
 |
첫 프로젝트라 기대도 많고 걱정도 많았는데, 프로젝트 시작하자마자 앞만 보고 달렸는지 어느새 발표를 앞두게 되어 신기합니다... 알수 없는 오류를 만나면 너무 답답하고 풀고 싶어서 끝까지 붙잡고 그래도 답이 안나오면 꿈에서 코딩하는 기분으로 자다가 일어나서 코딩하고 정말 한달간 하얗게 불태웠구나 싶습니다ㅎㅎ 하면서 나의 부족함을 너무 많이 봐버려서 중간에 좌절도 많이하고 화도 났지만 최대한 내가 성장하고 있다는 것에 집중하려고 했습니다. 레파지토리 한번 날리고...깃, 깃헙 너무 어려워서 커밋도 잘 안하던 제가 이제는 마감시간에 쫓겨 호다닥 커밋하고 푸쉬하고 머지하는 절 보면 사람은 어떻게든 하게 되어있다! 싶었습니다. 이번 프로젝트를 하면서 최대한 팀원들과 소통도 많이하고 어려움점이 있다면 공유해서 같이 해결해 나갈려고 매일매일 현황 공유도 하고 그랬는데도 서투른 팀장을 잘 따라와준 팀원들에게 감사하고(마지막EO 최고에요 😍), 팀뿐만 아니라 타 팀과도 서로 교류하면서 플젝할 수 있는 환경을 만들어주시고 멋사! 그리고, 타팀분들도 너그러운 마음으로 모르는 것들을 같이 해결해주려는 모습이 너무 감동이였습니다. 프론트엔드 5기 포에버했으면 좋겠어용 ㅋㅋ(멋사매니저님들 너무 감사했습니당) 감사합니다!
프로젝트 시작 전 저는 JavaScript도 근근히 따라가는 수준이었습니다. 프로젝트를 리액트로 하게 되어 어떻게 쓰는지도 모르는 체 시작하려니 막막하기만 했지만, 일단 부딪혀보자! 그냥 해보자! 라는 마인드로 시작했습니다. 그래서 프로젝트 기간 동안 많은 시간을 쓰고 많은 시도를 해보았습니다. 프로젝트 발표 전 마지막 수정 때 코드의 흐름을 알고 ‘여기를 이런식으로 수정하면 되겠다’라고 생각하고 수정. 예상한대로 결과가 나왔을 때 너무 너무 신이 났고, 제가 동료들에게만 말하던 대단해요! 라는 말을 제가 들으니 ‘진짜 성장한게 맞나보다!’ 라는 생각이 들었습니다. 제가 너무나도 못한다는 생각에 작아질 때면 ‘할 수 있어요!’, ‘잘하셨어요!’라고 해주신 팀원들 덕분에 이만큼 성장할 수 있었던 것 같습니다. 리팩토링도 남은 힘 다 쥐어짜서 해보겠습니다! 다시 한번 잘 부탁드립니다! 마지막EO 대단해요👍🏻
제 개발 인생 중 첫번째 팀 프로젝트이고 기획부터 코드구현까지 무에서 유를 창조한 경험이기에 더욱 의미 있고 정이가는 활동이 었습니다. git & github-flow 부터 api로 서버 통신하는 법 시멘틱을 고려하지 않고 짰던 html 등등 모든 것에 있어 무지한 상태로 프로젝트를 들어가 심적으로 힘들고 속도 많이 상했습니다 하지만 도움의 손을 내밀면 손을 잡아주시는 따듯한 동료분들의 배려덕에 제가 맡은 파트의 기능구현을 해낼 수 있었습니다. 저는 프로젝트를 경험 할 수 있어서 정말 다행이라 생각하며 프로젝트를 진행하면서 배운 내용은 쉽게 증발하지 않을 것 같습니다. 또한 이번의 경험으로 개발자들의 '협업'을 조금이나마 이해를 한 거 같습니다. 아마 다음번에 팀프로젝트를 진행하게 된다면 이번 보다는 조금 덜 헤매고 더 성장하겠지? 라는 상상을 해봅니다. 수료 후에도 꿈을 향해 더욱 정진 할 수 있는 제가 되기 위해 노력하겠습니다. 감사합니다.
프로젝트 시작할 때는, 리액트로 하는 첫 프로젝트이기도 했고, 리액트에 대해 충분히 이해하고 있다고 생각하지 않아서 걱정이 많았습니다. 그래도 같이 하면 해 나갈 수 있을 거란 생각으로, 막상 부딪혀 보니 걱정했던 거 보다 수월하게 진행되었던 것 같습니다. 디자인, 기획부터 개발, 테스트까지 모든 단계를 경험하면서 의도한대로 안되서 속상할 때도 있고, 진행하다보니 욕심이 생겨서 아쉬움도 남지만, 깃 플로우 전략을 세우고, 막히는 부분이 있으면 함께 공유하며 해결하고, 우리 모두 API의 장인이 되는 등등 3주동안 정말 많은 경험을 할 수 있었던 것 같습니다. 마지막으로, 부족한 실력이지만 항상 넘치게 칭찬해 준 팀원들! 감사합니다