[Dev_log] 8/20 (금) 김재우

### 오늘은 어떻게 프로젝트에 기여했나요?
* 클라이언트 버블 업로드 기능 완성

버블 이미지와 오디오 업로드 기능 구현을 완성했다. 버블을 클릭하여 녹음을 중지하면 모달 컴포넌트로 오디오와 이미지가 담긴 객체를 업로드 모달 컴포넌트로 전달한다. 그리고 모달 창에서 업로드 버튼을 누르면 서버로 데이터가 전송된다. 오디오는 webm 포맷으로 저장하며, 이미지를 원형을 유지하며 업로드하기 위해 html2canvas 라이브러리를 사용하여 캔버스 정보를 가져온 뒤 Blob으로 변환한다.

* DB 초기화 명령어

명령어로 DB를 초기화하는 로직을 구현했다. 사용자의 실수를 방지하기 위해 터미널에서 npm 명령어를 입력하고 한 번 더 확인 과정을 거친다. 초기화 설정 문구가 떴을 때 yes를 입력하면 연결된 DB의 테이블들이 전부 truncate된다. readline 라이브러리를 사용하여 터미널의 입력값을 받아온다.

* 중복 닉네임 처리

유저 구분을 명확하게 하기 위해 닉네임 또한 중복되지 않게 지정하며 서버 쪽 로직을 일부 수정하였다. 클라이언트에서 중복 확인 버튼 등으로 사용할 수 있는 값인지 확인하기 쉽게 이메일, 닉네임 중복 확인 컨트롤러를 생성했다. 소셜 로그인 사용자의 경우 해당 서비스 제공자의 닉네임을 그대로 사용하는데, 이 닉네임이 이미 사용 중이면 뒤에 0~9999 숫자를 랜덤하게 붙이면서 유효한 닉네임을 생성하는 재귀 함수를 정의했다.

### 오늘의 프로젝트에서 배운 점은 무엇인가요?
* Node.js에서 터미널 명령어 입력

Node 환경에서 프로그램 실행 중에 터미널의 입력 값을 받으려면 일반적으로 readline 패키지를 사용한다. readline interface 인스턴스를 선언 및 할당하고 question 메소드를 사용해서 입력한 값에 따라 다른 코드를 실행할 수 있다.

```js
const rl: readline.Interface = readline.createInterface({
input: process.stdin,
output: process.stdout,
});

rl.question(`Do you really want to initialize the connected DB? [yes/no] `, async answer => {
switch (answer.toLowerCase()) {
case "yes":
await truncateDB(connection);
console.log("DB Initialization completed");
process.exit();
break;
default:
console.log("DB Initialization cancelled");
process.exit();
break;
}
});
```

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
* 유효 닉네임 생성 함수 구현

재귀적으로 랜덤하게 유효한 닉네임을 생성하는 함수를 구현할 때 await 키워드를 빠트리고 종료 조건을 명확하게 지정하지 않아서 Maximum call stack size exceeded가 발생했다. 유효한 닉네임을 발견하면 순차적으로 리턴하고, 무한 호출을 방지하기 위해 최대 100회만 검사하도록 지정했다.

```js
static async getValidNickname(originalName: string): Promise {
// 닉네임 길이 제한 검사 (임시로 최대 30자로 지정)
if (originalName.length >= 26) {
originalName = originalName.slice(0, 26);
}

// 닉네임 중복 확인
const userUsingNickname = await this.findOne({ nickname: originalName });
if (!userUsingNickname) {
return originalName;
}

let count = 0;
// 보조 재귀 함수: 랜덤으로 0~9999 숫자를 닉네임 뒤에 붙이며 중복되지 않는 닉네임 생성
const getNicknameRecursive = async (nickname: string): Promise => {
// 최대 100회 시도
if (count > 100) {
return;
}
count++;

const userUsingNickname = await this.findOne({ nickname });
if (!userUsingNickname) {
return nickname;
} else {
const newNickname = await getNicknameRecursive(originalName + String(Math.floor(Math.random() * 10000)));
if (newNickname) return newNickname;
}
}

const newNickname = await getNicknameRecursive(originalName + String(Math.floor(Math.random() * 10000)));
return newNickname;
}
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
* [ ] 클라이언트 유저 정보 갱신 로직 수정
* [ ] 클라이언트 소셜 로그인 사용자의 마이페이지 플레이스 홀더 지정
* [ ] 서버 토큰 타입 재정의
* [ ] 서버 응답 데이터 타입 정의