[Dev_Log] 8/18 (수) 김정빈

## 오늘 할 일 (To Do)

- bubble upload modal 제작
- 메인페이지 기능 구현하기
- bare 기능 마무리

## 오늘 한 일 (Done)

- [x] bubble upload modal 제작
- [x] 메인페이지-마이크 canvas 기능 구현

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

- **typeScript에서 canvas 사용하기**

우리 프로젝트의 핵심 기능이라고 할 수 있는 버블이미지 만들기에 드디어 성공했다.
오디오의 인풋값을 받아 Hz값으로 변환하고, 이를 HSL의 Hue부분에 지정하여 음역대별로 다른 색이 찍히게끔 만들었다.
우선 400*400크기의 캔버스를 만들고, 캔버스의 절대 좌표(offsetX, offsetY)를 랜덤함수를 만들어서 찍어주었다.
그리고 canvas에 원을 찍어주는 과정을 진행하는데, 일반적인 javascript에서 할때와는 다른 에러가 정말 많이 떴었다.
그중 가장 큰 문제는 typescript에서 canvas의 타입을 지정해주지 않았기 때문에,
`if (!context) throw new Error("error")` 이부분을 설정해주지 않는다면 context의 값일 일시적으로 null값으로 들어올때가 있기 때문에 `null.fillStyle` 등의 하위 기능들을 사용하지 못하여 null 에러가 나게 되었다.
자세한 에러코드는 다음과 같다. (#100)
DOM을 이용하는 부분에서 null 혹은 undefined등을 처리해줄때는 에러를 미리 잡아주면 더이상 에러가 뜨지 않는다.

```tsx
const handlePainting = (viewPitch: number) => {
const randomPosition = {
x: Number(getRandom(0, 400)),
y: Number(getRandom(0, 400)),
};

console.log(`(${randomPosition.x},${randomPosition.y})좌표에 ${viewPitch}Hz를 가진 색을 찍어보자`);
const canvas = canvasRef.current;

if (!canvas) throw new Error("error");
const context = canvas?.getContext("2d");
const image = canvas?.toDataURL();
setViewImage(image);

if (!context) throw new Error("error");
context?.beginPath();
context?.arc(randomPosition.x, randomPosition.y, 100, 0, 10 * Math.PI);
context?.stroke();
context?.fill();
context.strokeStyle = "rgba(0,0,0,0)";
context.fillStyle = `hsla(${viewPitch}, 100%, 40%,0.5)`;
};

// 이미지 저장
function handleSaveClick() {
const canvas = canvasRef.current;
if (!canvas) throw new Error("error");
const image = canvas?.toDataURL();
const link = document.createElement("a");
link.href = image;
link.download = "myBubble";
link.click();
}
```

# 내일 할 일

- [ ] 버블 업로드 기능 구현하기 (소리 저장)