본문 바로가기
반응형

Front-End/React4

[React] Uncaught ReferenceError: setImmediate is not defined 해결 [ 문제 상황 ] react 에서 nodemailer를 사용하는데 다음과 같은 오류가 나왔다. [ 해결 방법 ] github을 찾아보니 jest 버전 문제라는 경우도 있고, 여러 경우가 있었는데 정확히 어디서 문제가 생긴건지는 파악하지 못했다. 그러나 맨 아래의 링크를 참고하여 오류는 해결하였다. 먼저 setImmediate가 없다고 하니 이를 install 해준다. npm install setimmediate 그 다음 오류가 난 페이지에서 다음과 같이 Import 를 해준다. import 'setimmediate'; [ 출처 ] 2022. 8. 17.
[React] Failed to execute 'connect' on 'AudioNode': cannot connect to an AudioNode belonging to a different audio context 에러 해결 [ 문제점 ] Web Audio API의 MediaStream, Analyzer, AudioContext 등을 사용하여서 녹음하고, 이를 시각화 하는 작업을 하고 있었다. 그러나 웹을 실행시키면 다음과 같은 에러가 나와서 아예 웹이 죽어버렸다. [ 해결 방법 ] AudioNode 라는 것이 다른 context에 연결되어서 에러가 났다는 것이었다. 나는 분명 audio context를 새로 만들거나 다른 것에 연결한 적이 없었는데 위와 같은 오류가 떠서 해결하는데 많은 시간이 걸렸다. 오류가 일어난 원인은 React의 2번 렌더링 하는 것이었다. Create React App 을 사용하여서 React를 시작할 경우 React.StricMode 로 App을 감싸서 개발할 때 렌더링을 2번한다. import .. 2022. 8. 1.
[React] 함수형(function, arrow) 컴포넌트에서 generic 사용하기 React에서 함수형 컴포넌트를 작성하는 방법은 두 가지가 있습니다. 첫 번째는 function 을 사용하여서 나타내는 방식이고 두 번째는 ECMA6 에 추가된 화살표 함수를 사용하는 방식입니다. 각각의 방식에서 generic을 어떻게 선언해야 하는지 알아보겠습니다. 1. function 키워드를 사용한 경우 interface Props { value: T } function App(prorps: Props) { return App } export default App 2. Arrow function을 사용하는 경우 interface Props { value: T } const App = (props: Props) => { return App; } export default App 이와 같은 방식으로 g.. 2022. 7. 25.
[React | Jest] unit test raises error because of .getContext() is not implemented [ 문제점 ] jest를 사용하여 테스트 하는 과정에서 canvas element가 있었다. 이를 조작하는 메소드 .getContext()를 사용하는데 여기서 에러가 발생하였다. canvas를 테스트 하는 것은 아니기에 테스트는 성공하였지만, 하는 과정에 에러가 났다. [ 시행착오 ] 구글에 검색해보니 jest-canvas-mock을 설치, createElement 함수를 jest.fn()을 사용해서 조작하기 여러 방법을 찾았다. 그러나 jest-canvas-mock은 install 하니 .getContext()까지는 에러가 없이 되지만 undefiend가 반환이 되면서 이후 과정에서 다시 에러가 발생하였다. createElement를 조작하는 방식은 마찬가지로 .getContext() 까지는 작동되지만.. 2022. 7. 20.
반응형