그동안 있었던 일

오랜만에 블로깅을 한다.

블로그를 매일같이 쓰자고 맘 먹었으나 확실히 힘들었다.

그동안 있었던 일들을 나열해보겠다.

visualizer Error 1

context를 담고있는 변수가 undefined가 되는 문제를 해결하는데 많은 시간을 할애했다.
답은 생각보다 가까이 있었으며, 생각해내는데까지 오랜시간이 걸렸다.
이전에 1분 미리듣기 구현하였을때, setInterval을 저장한 변수가 리 렌더링 되었을때 변수가 초기화 되는 문제가 있었는데 그때 state에 저장시켜줬었다.

이를 활용해서 해결했다.
하지만 조금 다른 방향이다.
1분 미리듣기에서는 state에 저장시켜서 리렌더링시 초기화를 시켜주는거였는데,
여기서는 state에 AudioContext를 저장시켜 기억해주는것이다.

class컴포넌트다 보니 초기값을 설정하는 일이 없고 state 객체에 저장만 시켜주니
리 렌더링 되도 값이 사라지지 않는다.

그리고 음원 재생시 실행되는 함수에서 state에 저장시킨 AudioContext를
다시 변수에 저장하도록 하였다.

visualizer Error 2

전부터 계속 문제였었던 CORS에러를 집중해서 해결해보았다.
이 error를 해결하는데 가장 많은시간을 할애 하였다.

우선 aws s3버킷에는 CORS 설정을 할 수 있다.

aws계정이 내 계정이 아니라서 이 이미지는 퍼왔다..
여튼 CORS 규칙을 설정하는데, origin과 method등을 설정 가능하다.
localhost:3000과 배포링크를 허용해주고 method는 모든 method를 허용하도록 일단 설정하였다.

다음은 audio객체에 crossOrigin 속성을 설정했다.
MDN에서는 crossOrigin 속성을 다음과 같이 설명한다.

anonymous element의 CORS 요청의 credentials flag가 'same-origin'으로 지정됩니다.
use-credentials element의 CORS 요청의 crendentials flag가 'include'로 지정됩니다.

그래서 use-credentials로 crossOrigin 속성을 설정해놨으나 여전히 CORS에러가 발생했다.

원인은 에러 메세지에 다 나와있었다.

브라우저가 알아서 Get 요청을 보내고 있었고, header 반환이 이뤄지지 않아 block된 것이었다.

이에 대해서 나는 soundTrack의 url에 직접 Get요청을 보냈다.
요청에는 응답이 왔는데 status code가 200이었다.
그리고 응답 데이터로 url을 주는데, 그 url을 soundTrack state에 적용시키니 더이상 CORS에러가 발생하지 않았따!