🎗 프로젝트 소개 Notion
- 커뮤니티 "SOOP"
- koreaIt 학원의 강의실 스케줄 정보와 수강생들이 이용 할 수 있는 자유 게시판, 점심 추천 페이지, 스터디 모임 커뮤니티등 학원 수강생들의 편의를 위해 제작된 프로젝트 입니다.
- 팀원 3명
- 2024.04.01 ~ 2024.05.17
-
회원가입 및 로그인 (권한 설정)
-
유저
정보수정
자유게시판 글쓰기, 수정, 삭제
스터디 페이지 글쓰기, 수정, 삭제 / 스터디 인원 글 관리
점심추천 페이지 글쓰기
댓글 쓰기, 수정, 삭제 / 좋아요 / bookmark
게시물 신고하기
자신이 쓴 게시물 관리
-
관리자
스케줄 페이지 관리
신고된 게시물 관리
가입된 유저 관리
| 이정찬(팀장) | 김유승 | 강진영 |
|---|---|---|
|
|
|
- 유저 회원가입 및 로그인
- 유저 비밀번호 변경
- 이메일 인증
- OAuth2 회원가입 및 로그인
- Oauth2 계정 통합
- Secret Filter 및 JWT 토큰
- 메뉴추천 페이지 작성 및 조회
- BOOK MARK 추가, 삭제
- 신고 관리
- 유저 관리, 권한 설정
- 알림 보내기
- 로그인, 회원가입 페이지
- 메뉴추천 페이지 및 css
- 메뉴추천 상세페이지
- 관리자 유저 페이지 및 css
- 관리자 신고 페이지 및 css
- 신고 css
- 프로젝트 최종 발표
- 스케줄 조회
- 스케줄 등록 및 수정,삭제
- 스케줄 상세 페이지
- 스터디 페이지 등록,조회 및 수정,삭제
- 스터디 상세 페이지
- 스터디 신청 및 수락,거절
- 스터디 검색 필터 및 카테고리 필터
- 알림 조회
- 유저 정보 수정
- 쓴 게시물 조회
- 필터 날짜순
- 스케줄 페이지 및 css
- 스케줄 상세 페이지 및 css
- 스터디 페이지 및 css
- 스터디 상세페이지 및 css
- 회원 정보 수정
- 쓴 게시물 페이지 css
- 알림 css
- 자유게시판 조회
- 자유게시판 작성 및 수정, 삭제
- 댓글 작성 및 수정, 삭제
- 좋아요 추가, 삭제
- 쓴 게시물 페이지 조회
- 전체적인 lay-out
- 회원가입 페이지 css
- 로그인 페이지 css
- 쓴 게시물 css
- 자유게시판 페이지
- 글쓰기 컴포넌트
- 버튼 컴포넌트
- 댓글 입력창 및 조회
- 좋아요 조회
공동작업
- 디자인 도안 작업
- Front 명세서 작성
- API 명세서 작성
- DB 설계
- 해당하는 업무에 대해 GitHub Issue를 생성합니다.
- GitHub Actions에 의해 자동으로 생성된 브랜치로 전환하여 해당하는 업무를 진행합니다.
- 작업을 완료하면 각자의 생성한 브랜치에서 코드를 push합니다.
- PR(Pull Request) 을 오픈합니다.
-
PR(pull request)을 오픈하면, 팀장이 코드를 확인하고 승인합니다.
-
코드 리뷰 & 승인은 팀장이 일임했지만, 팀원들의 코드 스타일은 다같이 공유하며 서로 잘 이해할 수 있도록 다 같이 정리하는 시간을 가지도록 하였습니다.
- PR이 merge되어 close 되면 해당 이슈는 자동으로 Done상태로 변경됩니다.
- 📋 GitHub Issues(Front) &
GitHub Issues(Back)
- 간편한 이슈 생성을 위해 이슈 템플릿을 만들어 사용했습니다. + 팀원이 현재 어떤 작업을 진행하고 있는지를 바로 알 수 있어 의사소통 비용을 줄일 수 있었습니다.
- 📁 GitHub Projects
- 칸반 보드로 프로젝트 진행 상황을 한 눈에 확인할 수 있어 일정을 관리하기 수월했습니다.
-
개발과 동시에 지속적으로 배포를 진행할 것이 아니라, 기능을 모두 개발하고 최종적으로 배포를 할 예정이었기 때문에 Git flow에 비해 흐름이 단순해짐에 따라 그 규칙도 단순한 GitHub Flow 전략이 적합하다고 생각했습니다.
-
프로젝트 기간 동안 팀원들이 같은 시간에 작업하기 때문에 잦은 충돌이 발생할 것을 우려하여 충돌의 크기를 줄이고자 GitHub Flow 전략을 채택하여 작은 단위로 이슈를 쪼개 이슈 별로 브랜치를 분기하고 main 브랜치에 지속적으로 merge 하는 방식으로 진행했습니다.
-
기본적으로 master branch에 대한 규칙만 정확하게 정립되어 있다면 나머지 가지들에 대해서는 특별한 관여를 하지 않으며 pull request기능을 사용하도록 권장하였습니다.
팀원 간의 원활한 소통과 협업을 위해 커밋 컨벤션과, 코드 컨벤션을 만들어 이를 따랐습니다. 리드미에는 간략히 작성하고, 자세한 컨벤션은 각각의 타이틀에 링크된 깃허브 위키에 적어두었습니다.
1. 커밋 유형 지정 - 커밋 유형은 영어 대문자로 작성하기 - 커밋 유형 - Feat : 새로운 기능 추가 - Fix : 버그 수정 - Docs : 문서 수정 - Style : 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우 - Refactor : 코드 리팩토링 - Test : 테스트 코드, 리팩토링 테스트 코드 추가 - Chore : 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore - Design : CSS 등 사용자 UI 디자인 변경 - Comment : 필요한 주석 추가 및 변경 - Rename : 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 - Remove : 파일을 삭제하는 작업만 수행한 경우 - !BREAKING CHANGE : 커다란 API 변경의 경우 - !HOTFIX : 급하게 치명적인 버그를 고쳐야 하는 경우
🧾 2. 제목과 본문을 빈행으로 분리 - 커밋 유형 이후 제목과 본문은 한글로 작성하여 내용이 잘 전달될 수 있도록 할 것 - 본문에는 변경한 내용과 이유 설명 (어떻게보다는 무엇 & 왜를 설명)
#️⃣ 3. 제목 첫 글자는 대문자로, 끝에는 . 금지
↩️ 4. 제목은 영문 기준 50자 이내로 할 것
⏺️ 5. 자신의 코드가 직관적으로 바로 파악할 수 있다고 생각하지 말자
👆 6. 여러가지 항목이 있다면 글머리 기호를 통해 가독성 높이기
🛼 문자열을 처리할 때는 쌍따옴표를 사용하도록 합니다.
🐫 문장이 종료될 때는 세미콜론을 붙여줍니다.
💄 함수명, 변수명은 카멜케이스로 작성합니다.
🐫 가독성을 위해 한 줄에 하나의 문장만 작성합니다.
❓ 주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.
🔠 연산자 사이에는 공백을 추가하여 가독성을 높입니다.
🔢 콤마 다음에 값이 올 경우 공백을 추가하여 가독성을 높입니다.
💬 생성자 함수명의 맨 앞글자는 대문자로 합니다.
🔚 var는 절대 사용하지 않는다. (const를 let 보다 위에 선언한다)
👆 const와 let은 사용 시점에 선언 및 할당을 한다. (함수는 변수 선언문 다음에 오도록한다.)
✏️ 외부 모듈과 내부 모듈을 구분하여 사용한다.
🧮 배열과 객체는 반드시 리터럴로 선언한다. (new 사용 X)
📠 배열 복사 시 반복문을 사용하지 않는다.
😎 배열의 시작 괄호 안에 요소가 줄 바꿈으로 시작되었다면 끝 괄호 이전에도 일관된 줄 바꿈 해야한다. (일관되게 모두 줄 바꿈을 해주어야 한다.)
🧶 객체의 프로퍼티가 1개인 경우에만 한 줄 정의를 허용하며, 2개 이상일 경우에는 개행을 강제한다. (객체 리터럴 정의 시 콜론 앞은 공백을 허용하지 않음 콜론 뒤는 항상 공백을 강제)
🧂 메서드 문법 사용 시 메서드 사이에 개행을 추가한다.
🌭 화살표 함수의 파라미터가 하나이면 괄호를 생략한다.
🍳 변수 등을 조합해서 문자열을 생성하는 경우 템플릿 문자열을 이용한다.
🧇 변수 등을 조합해서 문자열을 생성하는 경우 템플릿 문자열을 이용한다.
🥞 wildcard import는 사용하지 않는다. (import문으로부터 직접 export하지 않는다.)
🥖 한 줄짜리 블록일 경우라도 {}를 생략하지 않으며 명확히 줄 바꿈 하여 사용한다.
🥯 switch-case 사용 시 첫 번째 case문을 제외하고 case문 사용 이전에 개행한다.
🥐 삼중 등호 연산자인 ===, !==만 사용한다.
🚐 반복문 사용은 일반화된 순회 메서드 사용을 권장한다.
🚑 람다함수 안에서 밖에 있는 변수를 사용하지 말라
🚚 코드 블럭 주석 처리를 위해서는 한 줄 주석을 사용한다. 여러 줄 주석을 작성할 때는 *의 들여쓰기를 맞춘다. 주석의 첫 줄과 마지막 줄은 비워둠
💫 시작 괄호 바로 다음과 끝 괄호 바로 이전에 공백이 있으면 안 된다.
| 라이브러리 | 용도 |
|---|---|
| lombok | 어노테이션(@)으로 코드 자동 생성 |
| spring-boot-starter-security | spring security 적용 |
| spring-boot-starter-validation | 입력 값 검증 |
| spring-boot-starter-web | Spring Web 프로젝트에 필수 라이브러리 |
| spring-boot-starter-test | 프로젝트 작동을 테스트하는 역할 |
| mybatis-spring-boot-starter | 백엔드에서 MyBatis 문법 적용 |
| spring-boot-devtools | 빠른 재시작 |
| mysql-connector-java | DB인 MySQL과 연결 |
| jjwt-api / jjwt-impl / jjwt-jackson | JWT(JSON Web Token) 활용 |
| spring-boot-starter-oauth2-client | Oauth2 인증 |
| spring-boot-starter-aop | spring aop 적용 |
| spring-boot-starter-thymeleaf | 동적인 화면 생성의 역할 |
| 모듈 이름 | 용도 |
|---|---|
| emotion/react, emotion/styled | 리액트 내 css 적용 |
| portone/browser-sdk | QR 코드로 결제 기능 구현 |
| testing-library/jest-dom, testing-library/react, testing-library/user-event | 리액트 dom 테스트 |
| axios | 서버로 요청을 보내 통신 |
| firebase | 저장된 이미지를 업로드 |
| react-dom, react-router-dom | 주소 요청 발생 시 각 페이지로 이동 |
| react-icons | 리액트 아이콘을 불러와 사용 |
| react-query | 서버 데이터 동기화(fetching, caching) 지원 |
| react-select | select 요소를 쉽게 사용 |
| react-modal | 모달 창 쉽게 사용 |
| react, react-scripts | 리액트 라이브러리 적용 |
| recharts | 가져온 데이터를 차트로 시각화하는 역할 |
| recoil | 전역 상태 관리 |
| styled-reset | 초기 CSS 스타일 재설정 |
| react-quill | 글작성 모달 및 커스텀 가능 |
| react-slideshow-image | 슬라이드 커스텀 가능 |
https://www.notion.so/API-7880fc2a9cdc496da839793e14437be3
로그인 화면
로그아웃 화면
회원가입 화면
로그아웃 화면
자유게시판 작성 화면
댓글 작성
댓글 수정
댓글 삭제
스케줄 조회
스케줄 등록
스케줄 수정
스케줄 삭제
스터디 카테고리 조회
스터디 작성
스터디 수정
스터디 삭제
스터디 신청 관리
필터 순서
좋아요
즐겨찾기
유저 조회
유저 권한 변경