| 선택 | 이름 | MBTI | Github | Blog |
|---|---|---|---|---|
| FE / React | 이한결(L) | INFJ | https://github.com/Tbug-debug | https://velog.io/@h6325g |
| FE / React | 김태혁 | ENFP | https://github.com/VIVID89 | https://velog.io/@vivid0930 |
| BE / Spring | 이도경(L) | ENTJ | https://github.com/colleenInKorea | https://velog.io/@colleen_korea |
| BE / Spring | 김정규(VL) | INTP | https://github.com/kimregular | https://velog.io/@kimregular |
| BE / Spring | 이선옥 | INTP | https://github.com/wuzudog | https://voyage221215.tistory.com |
| DE / Figma | 이다빈 디자이너님 | INFP |
| 선택 | 이름 | 담당 |
|---|---|---|
| FE / React | 이한결(L) | Ouath2 구현. 로그인 회원가입 페이지 생성(api 및 css). 프로파일 페이지 제작(api 및 css). 앨범 생성 및 수정 페이지 제작.(api 및 css) 클립 생성 및 수정 페이지 제작(api 및 css). Notfound 페이지 제작. Search 페이지 Tap 기능 제작. api 모듈화 및 리덕스 모듈 파일 생성. Throttle 적용 |
| FE / React | 김태혁 | //프로젝트 제작 및 css LNB 제작 메인 페이지 제작(api 및 css) 카테고리 페이지 제각 (api 및 css) 검색 페이지 제작(최근 검색어 적용 ,api 및 css), 앨범 상세 페이지 제작(api 및 css), 내 앨범 페이지 (api 및 css), 클립 모두보기 페이지 제작 (api 및 css), SSE를 이용한 실시간 알람페이지 제작(api 및 css,웹브라우져 알림 적용) |
| BE / Spring | 이도경(L) | //프로젝트 기획 프로젝트 기획, 디자이너와 일정 조율및 소통, 이벤트 기획, 진행 //백엔드 배포 AWS EC2, S3, RDS 담당, Ec2 swap 적용, 도메인 적용, nginx https 적용, 무중단 배포(적용중), CI/CD, EC2 서버 담당 //백엔드 코드 audioclip(comment& like), member api 적용, audio album api 중 clip과 연관성이 있는 경우, api 작성 SSE 실시간 알림 api 수정 및 보완, swagger 적용, spring web security, jwt 적용, oauth2 kakao, naver login api, Test Code 작성 //디자인 기본 앨범, 클립 이미지 디자인 , 원페이지 노션 서비스 이미지디자인 //프론트 배포 vercel frontend 배포, 프론트 도메인 적용, 브라우저 → 검사→ 소스 에서 리엑트 코드 보이지 않게 적용 |
| BE / Spring | 김정규(VL) | // 프로젝트 제작 audioalbum 관련 api spring web security GlobalExceptionHandler 제작 ErrorType Enum 지정 및 적용 responseDto List, Map 적용, 출력 // 데브옵스 EC2 AWS 로드밸런서 HTTPS 적용 CI/CD |
| BE / Spring | 이선옥 | SSE 관련 실시간 알람 api, follow 담당 |
| DE / Figma | 이다빈 디자이너님 | 디자인 담당 |
하루의 마지막, 서로의 소리를 공유 하는 플랫폼
개인이 만든 음악, 오디오 드라마, 오디오 북등 다양한 음성 파일을 앨범을 만들어서 공유하는 플랫폼입니다.
💛 어셈블 노션
🍊Backend Repository: https://github.com/Hanghae12th-Assemble/Sogonsogon_BE
🍋Frontend Repository: https://github.com/Hanghae12th-Assemble/Sogonsogon-FE
✏️ Architecture
🗒️ 기술적 의사 결정
-
CI/CD
문제상황과 도입이유 프로젝트 초기 코드 변경 및 수정 사항이 많아 지는 상황에서 반복적으로 빌드와 배포의 반복이 발생 → 빌드와 배포의 반복으로 클라이언트에 빠른 피드백 반영이 어렵다. → 이를 해결 하고자 CI/CD를 적용하기로 결정. 해결 방안 Github Action과 AWS CodeDeploy를 이용하여 CI/CD 적용 -
SSE
문제상황과 도입이유 타인이 나를 팔로우 하는 경우, 내가 팔로우한 사람의 앨범 또는 클립생성등의 알림기능이 필요하다는 의견이 다수인 상황에서 알림 기능을 구현하고자 함. 해결방안 SSE를 이용한 실시간 알림적용 의견조율과 의견결정 Websocket보다는 일방향으로 보내는 SSE가 현재 “소곤소곤” 서비스에 적합하다고 생각 → SSE로 결정
✨주요기능✨
-
🌻앨범 CRUD 기능(앨범 만들기, 수정, 삭제, 카테고리별 조회, 내 앨범 조회..)
→ lnb → 내앨범 → 앨범 CRUD 기능
-
🌻클립 CRUD기능 (클립 만들기, 수정, 삭제, 조회)
클립 모두보기에서 좋아요순, 최신순 기능 정렬 + 클립 CRUD 기능
-
🌻 follow 기능
내가 원하는 앨범 생성자 또는 청취자를 팔로우 할 수 있습니다.
-
🌻 카카오톡 로그인/ 네이버 로그인
-
🌻 다양한 정보를 받을 수 있는 실시간 알림 기능
lnb→ 알림 페이지
🧑🏼💻 트러블슈팅
-
[BE] HikariCp Pool Connection
문제
- SSE 관련 api 중 subscribe api를 부른 이후, application.log에 • org.hibernate.exception.JDBCConnectionException: unable to obtain isolated JDBC connection 위와 같은 코드가 보이며, 다른 기능인 오디오 클립또는 앨범의 생성, 수정, 삭제 등. 기능이 되지 않는 오류가 발견 되었습니다.
시도
spring.datasource.hikari.maximum-pool-size= 8사이즈를 늘리면, 상황이 개선 된다고 하여, 진행 했으나 문제가 있었고, 결국 SSE 에서 일정 시간이 지나면 연결을 끊도록 만들었습니다. 부가적인 문제로 cpu 사용량이 빠르게 증가 하는 점도 따로 swap으로 해결하였습니다.
해결
- 결국 SSE 에서 일정 시간이 지나면 연결을 끊도록 코드를 수정 하였습니다.
-
[BE] 카테고리 타입 에러
문제
- 오디오 앨범 생성시, 카테고리를 고를 수 있도록 enum 형태로 카테고리 타입을 만들어 놓았습니다. 하지만 카테고리를 고르고 앨범을 생성하고자 하면
Incorrect integer value: '일상' for column 'category_type' at row 1이러한 에러가 발생하였습니다.
시도
-
카테고리를 나열만 하는 게 아닌 아래와 같은 코드 형태로 만들었습니다.
@Getter public enum CategoryType { 음악(Value.음악), 일상(Value.일상), 도서(Value.도서), ASMR(Value.ASMR); private final String value; CategoryType(String value) { this.value = value; } public String getValue() { return this.value; } public static class Value { public static final String 음악 = "음악"; public static final String 일상 = "일상"; public static final String ASMR = "ASMR"; public static final String 도서 = "도서"; } }
해결
- 위와 같이 코드 수정이후, 에러가 해결 되는 것으로 확인 되었습니다.
- 오디오 앨범 생성시, 카테고리를 고를 수 있도록 enum 형태로 카테고리 타입을 만들어 놓았습니다. 하지만 카테고리를 고르고 앨범을 생성하고자 하면
-
[FE] 프로필 수정 이후, 업데이트 관련 문제
문제
- 프로필 수정 페이지 데이터 변경 후 데이터가 업데이트 되지 않는 문제가 발생했습니다.
- 프로필 수정 페이지에서 발견됐고, 다른 페이지에서도 이와 같은 문제가 발생할 수 있어서 문제 해결을 위해 방안을 찾기로 하였습니다.
시도
- 의존성 배열의 문제인가 싶어 get함수 자체를 넣어보았는데 데이터는 정상적으로 들어왔으나 무한렌더링이 발생하여 이 방법은 아닌 것 같아 다른 방법을 고민해보았습니다.
- 의존성 배열에 변화는 값을 주기 위해 수정 완료 버튼을 누를 때 true/false값을 바꿔주어 넣어주었으나, 역시나 데이터를 정상적으로 get해오지 못했습니다.
- useEffect에 get함수 위 아래로 콘솔로그로 데이터 값을 확인했을 때 정상적으로 출력 되는 것을 확인했고, 이를 통해 useEffect로 get함수를 작동하는 것에는 문제 없음을 확인했습니다.
- put으로 프로필 업데이트 통신 시 데이터가 정상적으로 DB에 반영 되는지 백엔드와 확인 결과 DB에는 실시간으로 반영이 잘 됐습니다
- 일단 put 하고, response 값을 받아와 그 값과 get한 값 둘 다 이용하는 것으로 조치를 취했습니다.
해결
- 멘토링 시간에 put과 동시에 get이루어져 업데이트가 반영이 안되는 것 같다는 힌트를 얻었고, put 통신시마다 response 값이 들어오기 때문에 그 값을 의존성 배열에 넣는 방안을 생각했습니다. 이렇게 하여 업데이트값 반영 후 get이 이루어져 정상적으로 업데이트값이 반영됐습니다.
- 프로필 수정 페이지 데이터 변경 후 데이터가 업데이트 되지 않는 문제가 발생했습니다.
-
[FE] 무한 스크롤 적용 후, 데이터 Get 관련 문제
문제
- 무한 스크롤 적용 후에 다른 카테고리로 갔을 때, 페이지가 불러와 지지 않는 에러가 발생하였습니다.
시도
- useEffect의 문제로 생각되어 console로 useEffect가 정상적으로 작동하는지 확인 하였습니다. 그러나 useEffect는 정상적으로 작동했습니다.
- redux의 모듈에서 데이터를 잘못 불러오는 걸로 생각되어 모듈을 console로 확인하였으나, 데이터는 잘 불러와졌습니다.
- 페이지의 바닥에 ref가 작동을 안 하는 것으로 판단하여 ref를 다른 곳으로 옮겼으나, ref의 문제는 아니었습니다.
해결
- 메인 페이지에서 다른 카테고리페이지로 이동 시 발생하던 문제의 원인은 페이지 떄문이었습니다. 예를 들어 메인에서 페이지가 4페이지에서 끝났으나, 다른 카테고리 이동시 페이지가 초기화 되지않고 그대로 4페이지 없는 페이지에서 시작되었습니다. 이 때문에 문제가 발생하여 초기에 데이터를 불러올 때, 페이지를 1페이지로 초기화 시켜주도록 하였습니다.