codestates / codestates/SoundBubble
[Dev_Log] 8/19 (목) 김재우
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
### 오늘은 어떻게 프로젝트에 기여했나요?
* 클라이언트 로그아웃 요청
클라이언트의 로그아웃 버튼을 눌렀을 때 블랙리스트 등록을 위해 서버로 요청을 보내는 axios를 추가했다.
* HTTPS 배포
도메인(soundbubble.io)을 구매하고 인증서를 발급받은 뒤 클라이언트 및 서버 HTTPS 배포를 완료하였다. 클라이언트의 경우 CloudFront에서 정적 웹페이지 배포중인 S3와 연결된 Distribution을 생성하고, Route 53 등록을 위해 Alternate domain names에 사용할 도메인(www.soundbubble.io), 인증서를 입력한다. 인증서가 버지니아 북부에 생성돼 있어야 Route 53에서 CloudFront 라우팅이 가능하다.
서버의 경우 Application Load Balancer를 생성하며 HTTP, HTTPS 리스너에 Target(서버 EC2)을 등록한다. 생성된 LB와 Distribution을 Route 53에 사용할 도메인과 함께 등록하면 HTTPS 배포가 완료된다.
* 클라이언트 버블 업로드 기능
그리고 클라이언트 오디오 및 캔버스를 녹음, 캡처하여 서버로 업로드하는 로직을 1차적으로 구현하였다.
getUserMedia를 통해 사용자의 마이크에 입력된 오디오는 MediaRecorder를 이용해서 녹음하여 Blob으로 변환하고, 캔버스는 녹음이 종료되었을 때 toBlob 메소드를 사용해 Blob으로 변환한다. 이후 폼데이터에 담아서 서버로 업로드한다.
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
* 토큰 블랙리스트 로직
현재 블랙리스트는 Redis에 Key(사용자id)-Value(토큰의 배열)로 저장된다. 사용자가 로그아웃할 때마다 해당 액세스 토큰의 남은 만료 시간 만큼의 유효 시간을 가지며 저장되는데, 액세스 토큰의 유효기간이 1일이므로 하루가 지나기 전에 계속 로그아웃을 하는 유저는 토큰 배열이 초기화되지 않고 계속 누적되며 배열이 커지는 문제점이 있다. 해시테이블 구조로 저장하여 내부적으로 각 토큰마다 유효 시간을 지정하려 했지만 Redis는 최상위 Key에만 유효 시간을 지정할 수 있다. 개별적인 토큰을 Key로 저장하면 토큰마다 expire second를 정할 수 있지만 그만큼 모든 유저의 인증 시간이 길어지는 단점이 생긴다. 때문에 사용자id를 Key로 하여 탐색 시간을 줄였는데, 로그아웃을 자주하는 유저의 블랙리스트가 너무 길어지지 않도록 하는 방법이 필요하다.
* 버블 오디오 및 이미지 업로드
오디오를 녹음할 때 사용되는 MediaRecorder는 MIME type으로 WebM만 지원하여 wav 파일로 저장하려면 컨버팅 과정이 필요하다. 그냥 WebM로 저장해도 괜찮은지, wav로 변환한 뒤에 저장해야하는지 고민이 된다. 캔버스는 Blob으로 변환시 기존 캔버스 모양대로 사각형이 된다. 캔버스를 처음부터 원형으로 만들 수 있는지, 또는 원형을 유지하며 캡처하는 법을 찾아봐야겠다.
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
* [ ] 버블 오디오 및 이미지 업로드 로직 수정
* [ ] 서버 로그 추가
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.