매일 반복되는 하루, 잠시 휴식이 필요할 때
comma( , )는 문장의 중간이나 낱말과 낱말 사이에 위치한다.
우리는 항상 같은 문장, 혹은 단어 안에 살아간다.
매번 같은 하루에 지친 우리는 작은 쉼표를 마련해 줄 무언가를 소망한다.
| 이름 | 역할 | 링크 |
|---|---|---|
| 이준영 | 리더, 백엔드 개발 | 깃허브 |
| 박상진 | 백엔드 개발 | |
| 이환주 | 프론트엔드 개발 | |
| 이나연 | 프론트엔드 개발 | |
| 황혜연 | 기획&디자인 | |
| 경채원 | 기획&디자인 | |
| 최재영 | 기획&디자인 | |
| 노도균 | 기획&디자인 |
| 로그인 페이지 | 메인 페이지 |
 |
 |
| 플레이리스트 편집 | 플레이리스트 상세 |
 |
 |
| 트랙 재생 | 플레이리스트 시간 설정 |
 |
 |
| 탐색 > 트랙 검색 | 탐색 > 가수 검색 |
 |
 |
| 마이 프로필 | 알람 |
 |
 |
2. API 명세서 링크
comma-front-end
├── public
└── src
├── apis
├── assets
├── components
├── constants
├── hook
├── pages
├── stores
├── styles
└── utils
comma-back-end
├── comma-submodule
└── src
├── docs
├── main
│ ├── java
│ │ ├── domain
│ │ ├── global
│ │ └── spotify
│ └── resources
└── test- user_tb, playlist_tb, track_tb, artist_tb를 중심으로 연관 테이블을 구성
Atomic Design
- 작업량이 많아지지 않을 것을 고려하여 보통의 Atomic(아주 작은)을 사용하지 않고 적절한 단위의 Component로 만들었습니다.
Custom hooks
- 모든 API는 react Query를 사용했고 useMutation, uesQuery 등 Custon hooks을 사용하여 코드를 읽고, 쓰기 편하도록 구성하였습니다.
- API이외에도 Page에 코드가 난잡해지지 않도록 필요시 Custom hooks를 이용하였습니다.
SSR
- getStaticProps(Nextjs)를 활용하여 Rendering이 되기 전(pre-rendering)에 Navigation, Login Session 상태를 확인하는데 이용하였습니다.
PWA
- Native개발에서 할 수 있는 알림기능을 활용하기 위해 PWA기술을 적용했습니다.
낙관적 업데이트
- 좋아요, 알람 On/Off 같은 기능은 성공할 것이라는 것을 가정하여 미리 상태를 업데이트 후 서버에 API 요청을 진행했습니다.
- 사용자의 경험을 개선하였습니다.
Spring Security
- 권한에 따라 접근할 수 있는 API 를 분리했습니다.
- CSRF : disable
- password encryption : BCryptPasswordEncoder
- Session Creation Policy : STATELESS
- JwtAuthenticationFilter : before UsernamePasswordAuthenticationFilter.class
JPA & QueryDSL
- 객체 중심 설계와 반복적인 CRUD를 Spring Data JPA 로 최소화 하여 비즈니스 로직에 집중합니다.
QueryDSL : 복잡한 JPQL 작성시 발생할 수 있는 문법오류를 컴파일 시점에 빠르게 찾아냅니다.
TDD & Spring RestDocs
- 테스트 주도 개발 방법론을 이용하여 소프트웨어 품질을 향상시켰습니다.
- 200 여개가 넘는 테스트 코드를 Red , Green , Refactor 사이클을 따라 작성했습니다.
- Controller Test 에서 Spring RestDocs 를 이용하여 API 문서를 제작했습니다.
SSE ( Server Send Event ) & Spring Scheduler 푸시 알람
- SSE 를 이용하여 사용자 푸시 알림을 구현했습니다.
- 로그아웃 상태의 사용자에게 전송된 데이터는 제거 ( 유실 ) 합니다.
- Spring Scheduler 를 통해 10분마다 특정 시간에 설정된 알림을 계속 조회합니다.
- 단방향 통신을 이용하여 리소스 낭비를 최소화했습니다.
OAuth2.0 & JWT
- 구글 & 네이버 & 카카오 소셜 서버를 이용해 불필요한 회원가입을 줄이고 , JWT을 이용해 사용자 인증 정보를 클라이언트에 보관합니다.
- Access Token과 Refresh Token은 웹 브라우저 쿠키에 저장하며 httpOnly 옵션으로 보안처리 했습니다
CI/CD
- Jenkins 를 이용하여 지속적인 배포를 구성 , Github Action 을 통해 지속적인 통합을 구성
- Github Action 을 통해 테스트에 통과되지 않을 경우 Merge가 되지 않습니다.
- 병합된 코드는 Jenkins WebHook 을 통해 AWS 에 호스팅됩니다.
- AWS 서버는 프론트엔드 개발자가 테스트를 용이하게 하기 위해 가동했습니다.
협업 방법
- Gather Town 활용 주 2~3회 온라인 회의
- Notion 페이지 활용 회의록 및 컨벤션 정리
- Jira 프로젝트 활용 2주 단위 스프린트 진행
- Git, GitHub 활용 프로젝트 형상 관리