npx 명령어를 이용해 프로젝트를 생성한 후
사이드 프로젝트에서 webrtc를 이용해 화상대화를 구현하던중..
위와같은 에러가 나타났다 !
RTCPeerConnection은 하나의 P2P 연결 만 설정가능한데
하나의 SDP 응답이 먼저 도착한 상태에서
나중에 도착한 응답에 대해 setRemoteDescription을 시도하여 오류가 발생한다고 한다.
나는.. 1:1 화상대화를 구현하고있던 중이라 한번밖에 연결하지않았을텐데?
라고 생각하며 이리저리 작성한 소스를 살펴보던중
useEffect가 2번 발생하여 여러번 webrtc연결을 시도한것같다.
strict mode 때문이였다.
strict mode
리액트 공식 문서에 따르면 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구
(개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않음)
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
- Ensuring reusable state
의도적으로 두 번 호출하여 예상치 못한 문제가 되는 부분을 발견하도록 도와줌
(https://ko.legacy.reactjs.org/docs/strict-mode.html)
NextJS에서 strict mode 비활성화하기
npx 명령어를 이용해 프로젝트 생성시 자동적으로 strict mode가 true 되어있다.
이를 비활성화 하기위해서
next.config.mjs 파일에서 아래와같이 reactStrictMode: false를 추가해주자.
const nextConfig = {
reactStrictMode: false,
};
