들어가며
첫 번째 프로젝트였다. 처음 느끼는 것이지만, 팀을 꾸리고 모집하는 것이 매우 힘들었음. 기획 및 설계를 진행하는 것도 좀 힘들었다. 원래 초기에 기획했던 방향은 gitHub API를 사용하여, Git을 통한 수행되는 다양한 활동들의 정보를 가져오는 개발자 전용 SNS를 제작하는 것이었다. 하지만 Git에서 유용한 정보를 반환하지 못하다는 사실을 파악하면서 계획이 틀어졌다. 시간은 한정되어있으니 급하게 노선을 변경한 것이 아래 ProG이다.
Prog
목차
1. 서비스화면
프로젝트를 생성해 팀원을 모집하고 프로젝트를 진행하며 협업을 위한 서비스를 제공한다.
회원가입 및 로그인
프로젝트 모집
프로젝트 멤버 승인 및 추방
프로젝트 시작
프로젝트 업무
회고 및 액션 등록
2. 개발 환경
⚙ Management Tool
🛠 IDE
🧲 Infra
🎨 FrontEnd
💻 BackEnd
3. 기술소개
BackEnd
-
Member
- Security Filter와 JWT Token을 사용하여 API 요청 시 요청자의 권한을 검사한다.
- OAuth2 인증을 이용해 깃허브 회원가입, 로그인, 계정 연동을 통해 불필요한 개인정보 최소화
- Redis에 Acces Token과 Refresh Token을 관리해 유저가 로그아웃 요청 시 Refresh Token을 지우고 BlackList에 Acces Token을 저장해 Acces Token 탈취에 대한 대비
- 자체 회원가입시 이메일 인증을 통해 무분별한 가입을 방지
-
Code, CodeDetail
- 공통으로 사용되는 값들을 정의해 DB에 부하를 줄였다.
-
Attendance, Attendance_Log
- 서버 시간을 기준으로 출/퇴근 시간을 기록
- 퇴근 요청시 출근 시간과 비교해 업무 시간을 기록/합산 한다.
-
Feed
- 특정 이벤트에 Kafka Topic을 등록해 이벤트가 발생하면 피드를 저장하는 함수가 실행된다.
FrontEnd
-
Component
- 분량이 길거나 다른 페이지에서도 사용하는 기능은 Component화 시켜서 재사용할 수 있도록 하였다. -
useUserStore
- 사용자 프로필을 localStorage에 저장한 뒤 zustand를 통해 상태관리를 진행하여 Props를 사용하지 않고 모든 페이지에서 유저의 정보를 이용할 수 있게 하였다 -
useAuthStore
- 사용자별로 할당된 Access Token을 관리하는 useAuthStore Hook을 생성하여 Access Token을 모든 페이지에서 사용하여 접근할 수 있도록 하였다. -
axios.ts
- zustand로 관리한 Access Token을 자동으로 api 요청의 Header에 담게 하여 Access Token의 노출 없이 api 요청을 보낼 수 있게 하였다. -
useActionQuery
- react-query를 사용해 Action Data를 fetch할 수 있게 하였다.
- Data Fetch 로직을 컴포넌트로부터 추상화하여 자동으로 Data를 fetch, cache할 수 있게 하였다. -
Recruit
- 필터와 검색을 통해 프로젝트를 검색할 수 있게 하였다.
- 각 프로젝트별로 사용자와 프로젝트의 관계를 파악해 참여 중인 프로젝트를 확인할 수 있게 하였다. -
Project
- 멤버, 프로젝트 관리 등 관리자 권한이 필요한 기능을 zustand를 통해 권한을 부여하였다.
4. 설계 문서
- 요구사항 정의서
-
기능 명세서
-
API 명세서
PostMan API 명세서 -
ERD
- Figma
피그마 링크
깃 컨벤션
브렌치 생성 컨벤션
- 브랜치 이름 생성
- 구분/commit type/기능명_지라 이슈 넘버
- be/feature/login_#72
- fe/feature/login_#99
- 구분/commit type/기능명_지라 이슈 넘버
- 형상 관리
- main : 기준이 되는 브랜치 (재품 배포)
- dev : 개발 브랜치, 배포전 최종 확인
- hotfix : 버그 수정
- feature : 기능단위 개발
- 커밋 컨벤션
- commit type
- Feat : 기능 추가, 수정
- Fix : 버그 수정
- Docs : 문서 수정
- Refactor : 기능 고도화
- Style : 코드 포멧팅
- Chore : 빌드 업무 수정
- Design : UI 관련 코드
제목 : [BE] Feat : Add security 본문 : 시큐리티 설정 추가 - commit type
나의 느낀 점
- 먼저 좋았던 것을 적어보려고 하는데, 좋았던 것은 세 가지다.
1) 개발의 프로세스를 파악할 수 있었다. 우리는 사실 Agile하게 급하게 급하게 쳐냈지만 (이유는 곧 알 수 있다.) 개발 과정에서 얻었던 사소한 IT 지식들은 나의 자양분이 되어서 지금 정보처리기사 공부에도 큰 도움이 되는 중!
2) 문서 작성에 큰 도움이 되었다. 요구사항 정의서, 개발 명세서, 프레임 워크 제작등에 강점이 생기게 되었음. 또한 나의 장점은 큰 그림을 빠르게 파악해서 그것을 그려내는 능력인데, 현직자로 근무했던 형에게 지식을 잘 배울 수 있었다.
3) 리액트를 다룰 줄 알게 되었음. 물론 페이지단이나 함수, props등의 기능을 사용할 수 있게 된 것이지만 말이다. - 아쉬웠던 점이다.
1) 프로젝트를 진행하는데에 있어서 한 가지 기능에 집중해야함을 알았다. 업무 모집 및 관리 툴의 특성상, 생각보다 많은 기능이 들어갔고, 많은 분기 처리에 따라 다양한 예외사항, 확인사항에 대한 페이지 및 모달을 추가해야 했었다. 이 과정에서 생각보다 많은 시간이 소요되서, 더 깊게 공부할 수 없었음.
2) 위의 이유와도 이어져, 리액트의 더 중요한 부분인. 상태관리, query등에 대한 지식을 채울 수 없었다. 이 때문에 이번 프로젝트는 꼼꼼하게 공부하고 준비하면서 나아갈 것.
