[회고] 메인프로젝트 HelFit 회고
2023.04.01(토)
팀 명: 💪🏼 식스맨 👨👦👦프로젝트 명: HelFit프로젝트 기간: 2023.03.02 - 2023.03.29한줄 소개: HelFit ! 유저 데이터를 기반으로 신체정보 통계 및 건강관리 기능을 제공, 커뮤니티를 통해 유저 간 정보 공유 및 교류, 주변의 운동시설을 안내해주는 위치 기반 서비스를 제공하는 헬스 종합 플랫폼 사이트팀원: 김준희(팀장), 김세훈, 윤영원, 김태형(부팀장), 현지원, 김지열배포 링크: 🌐 HelFit ( 현재 백엔드 서버가 닫혀있어 정상적으로 동작하지 않습니다. )작업 깃허브 링크:
HelFit 사용자 요구사항 정의서: 사용자요구사항 정의서개발자 테스트 체크리스트: 개발자 테스트 체크리스트
💼 Team
| 김준희 (FE, 팀장) |
김세훈 (FE) |
윤영원 (FE) |
김태형 (BE,부팀장) |
현지원 (BE) |
김지열 (BE) |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
| - Pages - Main page - Calendar page Components - LNB - Layout - Chatbot CRUD - TodoList CRUD with Calendar Features - Data Visualization - Chatbot using Chat GPT - Recommend a diet using Chat GPT - Look up posts - move posts - Keynote presentation |
- Pages - Login page - Sign up page - All Community page - WritePost page - Detail Page - Search page Components - Search bar - User Nav - Category - Tag CRUD - Board - BoardTag - Comment - Like - Category - Photo Features - Signup - Agree with personal information - Validation - JWT - OAuth2(Google, Naver, Kakao) - HotBoards - SNS - Search by title, tags, text, nickname - ReadMe File |
- Pages - My page - Map Components - Modal - Loader CRUD - Profile Image - Edit nickname Features - Modify password - Calculate calories - View post, comment - Change current location coordinates - Mark user’s location - Find gym near user - Unsubscribing |
- CRUD - Calculator - Statistics - Exception handling QueryDsl - Calculator - Statistics Test - CalculatorController - StatController RestDocs - Calculator - Statistics |
- Spring Security - Jwt & OAuth2(Google, Naver, Kakao) - XSS Fileter CRUD - Users - Calendar - Physical - file - withdraw OpenAPI - ChatGPT Restdocs - Automated QueryDsl - SupportImpl Spring Batch - Users Scheduling(inactive: LastloggedIn < 1 year) Thymeleaf - Email Templates AWS - Automated QueryDsl - Deployment (Github Actions) - FileUpload With S3 Redis - EmailConfirmToken & RandomKey |
- CRUD - Board - BoardTag - Comment - Like - Category - Tag - Photo Exception handling ** Search HotBoards Search QueryDsl - Tag - Like - Board Restdocs** |
⚙️ Tools
| Github | Discord | Notion |
|---|---|---|
|
 |
 |
🖥 Front-end
Main Stack / Sub Stack
| Html | CSS | TypeScript | NextJS | Figma |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| Sementic UI | axios | Prittier | esLint | React-Quill | React-HookForm | DayPicker | D3 | Kakao Map |
|---|---|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
🔒 Back-end
| Java | AWS | mySQL | JWT | Spring | Spring Boot |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
🌟 Pages & Features
| 메인 페이지(대시보드) [준희] | 로그인 / 회원가입 페이지 [세훈] |
|---|---|
 |
 |
| 인기 게시판 페이지 [세훈] | 각 카테고리 페이지 [세훈] |
 |
 |
| 게시글 작성 & 수정 페이지 [세훈] | 상세 페이지 [세훈] |
 |
 |
| 검색 결과 페이지 [세훈] | Map 페이지 [영원] |
 |
 |
| 캘린더 페이지 [준희] | 마이페이지 [영원] |
 |
 |
🙆♂️ 사용자 리뷰
나의 메인프로젝트 시작
이번 프로젝트는 6명의 남자로 구성되어 있었다. 이전에 페어 활동을 함께 했던 준희님께서 같이하자고 제안을 주셨고 그렇게 팀에 합류하게 되었다. 팀에는 7년정도 프론트 개발을 진행하시다 백엔드를 공부해보고 싶어서 이번 교육에 합류하신 지원님도 계셨다. 프로젝트를 하면서 정말 많이 배웠고 나도 백엔드까지 하는 풀스택 개발자가 최종 목표이기 때문에 나의 롤모델 같은 분이셨다.
메인프로젝트는 저번 프리보다는 확실히 시간과 정성이 더 많이 들어갔던 프로젝트인 것 같다. 이유도 이유인게 수강기간동안 배우지 않았던 타입스크립트와 Next.js를 사용하자는 의견이 나왔고 나도 흔쾌히 동의했다. 우선 타입스크립트를 써보고 싶었던 이유는 현재 많은 기업에서 타입스크립트로 개발을 하고 있다는 이유가 가장 컸고 그 다음으로 동적타입의 인터프리터 언어인 자바스크립트에 비해 타입스크립트는 정적타입의 컴파일 언어이기 때문에 자바스크립트처럼 런타임에서 에러를 발견하는 것이 아닌 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 타입을 미리 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다는 점에서 꼭 한번 사용해보고 싶었다.
Next.js를 사용한 이유는 SSR으로 구현되어 seo향상에 큰 도움을 준다는 점이였고 라우팅의 용이성 때문에 사용해보자는 이야기가 나왔고 리액트와 크게 다르지 않다고 생각해 나도 흔쾌히 동의했다. 실제로 개발을 하면서도 SSR도 체감했고 라우팅의 용이성도 체감했다. 하지만 제대로 공부하지 않고 진행했던 탓인가 배포를 하고 난 뒤 로컬환경에서는 발생하지 않던 에러들이 마구 발견되기 시작했다. 치명적인 에러들은 아니였지만 대부분은 새로고침을 했을 때 어느 페이지에 있던 Home으로 라우팅 된다는 점이였다. 지금 다시 초기 기획단계로 돌아간다면 우선 정해진 시간이 짧으니까 React로 개발을 하고 Next.js로 리팩토링 해보자고 제안해볼 것 같다.
KPT
✅ Keep
OAuth의 성공
이전 프리때 실패했던 OAuth를 이번 메인에서는 성공할 수 있어서 굉장히 기뻤다. 지원님께 많은 도움을 받았고 구조 자체를 잘못 이해하고 있었다는 사실을 알게되었다. 프론트 쪽에서는 굉장히 쉬운..? 작업이었다.
새로운 기술 스택에 대한 도전
팀원분들 모두 새로운 기술스택에 있어 두려움보단 기대감이 더 크셨던 것 같다. 사실 현업에서는 새로운 기술 스택 도입에 굉장히 보수적이라고 들었다. 하지만 이번에 도전했던 TS와 Next는 현업에서도 많이 사용중이고 장점도 많아서 꼭 공부해보고 싶었는데 이번 기회에 도전해볼 수 있어서 좋았다.
기간내에 업무 마무리하기
프리때 팀으로 작업했던 내용을 이번엔 혼자서 진행해야 했다. 작업량이 많았음에도 기간내에 잘 마무리할 수 있어서 좋았다.
아이디어 제공
이번 프로젝트에서 식단 정보제공에 있어 ChatGPT를 활용해보자던지 게시판 중 일부 갤러리를 SNS형식으로 만들겠다는 등 다양한 아이디어를 제공했고 이게 잘 이루어지고 칭찬도 많이 받아서 굉장히 뿌듯했다.
Git에 대한 이해
프리때 팀장님께서 굉장히 꼼꼼하셨던 분이여서 Git에대한 중요성을 많이 강조하셨는데 이번 메인에 오면서 Git사용에 있어 팀원들에게 많은 도움을 줄 수 있어서 좋았던 것 같다. 아직 공부를 더 해야하지만 기본적인 구조를 익혔으니 다른 기능들도 금방 익힐 수 있을 것 같다.
팀원들과의 소통
우리 팀은 개발 기간 동안 2번의 실제 미팅을 가지면서 정말 많이 친해졌고 서로 많은 이야기를 나눌 수 있었다. 덕분에 개발하는 내내 화기애애한 분위기를 유지하며 개발할 수 있었다.
✅ Problem
전역 관리
User 정보처리에서 팀원분 중 한분이 state로 전역에서 편하게 관리하는게 어떻겠냐고 하셨고 나는 진행중인 작업이 끝나고 바로 해보겠다고 하고 redux 개발을 진행했다. redux로 구현까지 되었는데 새로고침을 했을 때 state가 날아가는 것을 잡지 못했다. 이후에 useContext도 활용해보았지만 같은 결과를 도출했다. 새로고침을 했을 때 State값을 유지하는 방법을 계속 찾아보았지만 시간관계상 마무리하지 못하고 결국 로컬스토리지를 이용하기로 했는데 이부분은 꼭 다시 제대로 공부해보고 싶다.
배포 후 에러
Next로 개발이 얼추 마무리될때 쯤 CI/CD를 늦게 구현했다. 로컬환경에서는 이상없이 잘 진행되었던 코드들이 배포를 하고 난 뒤 다양한 에러를 발생시켰다. CI/CD를 좀 더 일찍 구축했어야 했고 Next에 대한 이해가 부족했다고 생각한다.
백엔드에 잦은 요청
게시판 작업을 하면서 필요한 데이터에 변동이 생각보다 많아서 함께 작업을 하는 백엔드분께 잦은 수정요청을 했었다. 나름 정리를 해놓고 작업시간 내에서 부탁을 드리긴 했지만 분명 한번에 말씀 드릴 수 있었던 부분도 너무 잦게 부탁을 드려 죄송했다….
Next에 대한 이해부족
1번 문제와 비슷하다. Next.js를 사용하면서 페이지 라우팅의 장점을 너무나도 잘 느낄 수 있었지만 배포에서 생각보다 많은 에러를 발견하면서 Next에 대한 이해가 많이 부족한 상태로 개발을 진행했던 것이 많이 아쉬웠다.
✅ Try
기획 단계의 중요성
이번 프로젝트로 기획 단계에서 개발시 필요한 개발 툴을 확실하게 알고 진행해야 한다는 걸 느꼈다. semantic-ui, Next.js 등 개발을 하며 너무 많은 내용이 변경되었고 예상치못한 에러로 많은 시간을 허비하기도 했다. 앞으로는 기획단계에서 더 세밀한 계획을 세워야할 것 같다.
메모를 습관처럼
메모를 잘 활용하기는 했지만 대제목? 느낌으로만 메모를 작성해서 회의때 내가 부탁하려던 내용, 전달하려던 내용이 구체화되지 않았던 적이 많았다. 메모를 더 자세하게 작성해서 꼼꼼한 프로젝트를 진행해야겠다.
성능 강화
현재 앞서 포스팅한 에러들 중 일부가 해결되지 않은 상태이다. 리팩토링을 하루빨리 진행해서 디테일한 에러들을 잡고 홈페이지 성능을 끌어올릴 생각이다.
첫 프로젝트를 마치며
나는 정말 운이 좋은 사람인 것 같다. 프리, 메인 모두 정말 좋은 팀원들을 만났고 정말 많은 도움을 받을 수 있었다. 이렇게 좋은 사람들을 얻었다는 사실이 나에게는 너무나도 큰 복인 것 같다. 프로젝트를 진행하기 전의 내 모습과 현재의 내 모습에는 너무나 많은 차이가 있다. 사용할 수 있는 기술스택도 늘어났고 코드에 대한 이해도 늘었다. 에러를 마주했을 때 어떻게 해결하는지에 대해서도 다양한 방법들을 얻은 것 같다. 아직 내가 만든 페이지들이 완벽하다고 말할 수 없다. 리팩토링을 통해 완벽한 페이지로 만들 것이고 실제로 서비스해도 손색이 없게 하고싶은 욕심이 많이 생기는 프로젝트였다.
🐶 화목한 10팀 팀원들 사진
🐶 멘토님 피드백
