[Dev_Log] 8/12 (목) 김정빈

## 특이사항

오늘은 Project weekly reflection 시간이 있는 날이였다.
교육 엔지니어분들이 우리의 프로젝트 아이디어와 진행상황을 보고 피드백을 해주고, 좀더 좋은 방향으로 제시해주는 날이였는데, 생각보다 엔지니어분들이 우리의 프로젝트에 더 큰 관심을 가져주시고 피드백해주셔서 정말 고마웠다.
디자인적으로 많이 고민이 됐었는데 그부분의 레퍼런스 참고 페이지와 리덕스에 대한 레퍼런스도 주셔서 보고 공부할것이 생겼고, 좀더 탄탄한 코드를 짤수있게 되었다.

## 오늘의 프로젝트에서 배운 점은 무엇인가요?

- **혼자서만 잘한다고 다 되진 않더라**

개인 프로젝트는 기술적인 부분과 엉덩이만 무거우면 잘 만들수 있지만, 팀 프로젝트는 확실히 달랐다.
팀원들과 코드작업 속도를 맞춰가며 서로 뒤쳐지는 부분은 끌어주고, 잘하면 더욱더 잘할 수 있게 부채질 해주는 것이 팀프로젝트임을 느꼈다.
이는 협업을 진행하면서 느낀점인데, 내가 빠르게하고 잘한다고 해서 코드를 작성해봤자, 팀원들과 속도가 맞지않다면 이는 서로에게 스트레스일 것이다. 그러므로 팀원들과 지속적인 소통을 통해 어떤부분이 부족한지, 어떤부분이 어려운지를 서로 확실하게 파악하고 도움을 주고받는 것이 중요하다고 생각이 들었다.

또한 내가 팔레트 페이지의 디자인을 맡았었는데, 불규칙하게 흩어진 버블들을 어떻게 구성할까 고민을 많이했다. 사실 혼자서 낑낑대고 있었으면 아직까지도 해답을 찾지 못했을 것 같은데, 오다경 팀원님이 정말 좋은 아이디어를 제시해주셨고, 이를 통해서 내일 구현해볼 예정이다.

이처럼 어려운 일이 있으면 팀원들과 즉시 소통을 하며 다같이 머리를 맞대고 생각해보는 것이 정말 좋다는 생각이 들었다.

- **인풋 사운드의 주파수를 측정하는 Pitchy 라이브러리 사용법**

주파수 분석하는 방법이 상당히 어려워 보였는데, 막상 코드를 뜯어보면 그렇게 어렵진 않다.
이는 pitchy 라이브러리를 이용해 주파수 분석을 하는 것이고, 이에 대한 예제를 바탕으로 코드를 재구성하여 만들었다. 우리 프로젝트에서는 크게 3파트로 나누어서 사운드 인풋값을 가져오는 함수, 인풋된 값을 주파수와 정확도로 표현해주는 함수, 종료하는 함수 3가지로 나누어서 사용했다.

### code

```jsx
async function getMicrophone() {
console.log("start!");
// 미디어 입력 장치 사용 권한 요청
const audio = await navigator.mediaDevices.getUserMedia({
audio: true,
video: false,
});
setAudio(audio);

const audioContext = new window.AudioContext();
const analyserNode = audioContext.createAnalyser();

//* pitchy
let sourceNode = audioContext.createMediaStreamSource(audio);
sourceNode.connect(analyserNode);
const detector = PitchDetector.forFloat32Array(analyserNode.fftSize);
const input = new Float32Array(detector.inputLength);
updatePitch(analyserNode, detector, input, audioContext.sampleRate);
}
```

우선 미디어 입력 장치 사용권한을 요청해주고, pitchy의 기본값을 아래에 세팅해준다.

```jsx
function updatePitch(analyserNode, detector, input, sampleRate) {
analyserNode.getFloatTimeDomainData(input);
const [pitch, clarity] = detector.findPitch(input, sampleRate);
const clarityPercent = Math.round(clarity * 100);
if (clarityPercent >= 80) {
// 80% 정확도인 피치만 출력
setPitch(Math.round(pitch * 10) / 10);
setClarity(Math.round(clarity * 100));
}

recoding = setTimeout(
() => updatePitch(analyserNode, detector, input, sampleRate),
100
);
}
```

pitchy의 기본 인풋값을 받아와서, pitch update 함수에 넣어준다.
아까 세팅해준 analyserNode, detector, input, smapleRate값을 updatePitch 함수에 넣어서 이를 분석해주고, 분석이 끝난 값은 set함수를 통해 pitch와 clarity값에 저장해준다.

```jsx
function stopMicrophone() {
if (audio) {
console.log("stop!");
audio.getTracks().forEach((track) => track.stop());
setAudio(null);
}
clearTimeout(recoding);
}
```

마지막으로 마이크를 꺼주면 되고, 이는
`audio.getTracks().forEach((track) => track.stop())`
으로 오디오를 종료할 수 있다.

# 내일 할 일

- [ ] 팔레트 페이지 구현하기
- [ ] 로그인 / 회원가입 기능 구현 완성하기