트러블슈팅

[React - Trouble Shooting] state 값이 변경되지 않는 문제

이번 포스트에서는 state와 setState는 간단하게만 보고 넘어가자. 배경 지식 state state 값은 setState()를 통해서만 변경이 가능하다. setState useState로 만든 useState는 비동기적 특성을 갖는다!! 문제점 useEffect 훅 안에서 이벤트 리스너가 실행되면서 state 값이 변했다. 이 state 값이 의존성배열에 들어가있는 다른 useEffect 훅을 실행시켜 state 값을 확인해보면 값이 잘 나온다. 하지만 이벤트 리스너의 처리가 모두 끝나지 않았고, 변한 state 값을 통해 다른 로직이 실행되도록 구현되어 있었다. 여기서 문제가 발생한다!! 원인 앞서 말했듯이 React의 setState는 비동기적으로 실행된다. 정확히는 현재 setState는 이..

[Trouble Shooting] 미디어 스트림 오류 ->> TypeError: Cannot read properties of undefined (reading 'getUserMedia')

AWS S3에 React 클라이언트를 배포하고 테스트를 진행했다. const constraints = { audio: true, video: true }; navigator.mediaDevices.getUserMedia(constraints) .then((stream) => { setLocalStream(stream); }) .catch((error) => { console.error(error); }); 미디어 스트림 데이터를 localStream 에 저장하는 코드에서 오류가 생겼다. 미디어 스트림에 접근할 수 없었고, 이를 해결하기 위해서는 https로 ssl 인증서를 발급받아 적용시키는 법이 있었다. 하지만 이거슨.... 이 프로젝트의 목적은 상용화가 아니기 때문에 다음 방법을 사용했다. 해결 방법..

[Trouble Shooting] CORS 에러 ->> The request client is not a secure context and the resource is in more-private address space `private`.

React 클라이언트를 AWS S3에 배포하면서 로컬 상황에서는 없었던 CORS 오류가 생겼다. 서버에 CORS 허용 헤더를 넣었지만 생기는 오류이다. 브라우저 설정을 통해 해결할 수 있다. ( 크롬 ) chrome://flags/#block-insecure-private-network-requests 이 설정을 disabled 해준다.

[React - Trouble Shooting] 불필요한 렌더링으로 인한 문제

하나의 페이지에 속해있는 컴포넌트에서 서버에 소켓 통신을 보내는 코드를 구현했다. 하지만 서버에 한 번의 소켓 연결이 이루어지는 것이 아니라 여러번의 연결이 이루어졌다. 불필요한 렌더링이 일어난 것이다. 이렇게 연결이 여러번 이루어지면서 서버에서는 여러 클라이언트가 연결되었다는 것으로 인식한다. 어떻게 해결할 수 있을까? 렌더링 자체를 제어할 수 있는 방법도 있지만 이번에는 그런 방법이 아니다. useEffect 훅을 사용할 수 있다. useEffect(() => { // 부수 효과 작업을 수행하는 콜백 함수 // ... return () => { // 정리(clean-up) 함수 // 컴포넌트가 언마운트되거나 의존성이 변경될 때 호출됨 // ... }; }, [/* 의존성 배열 */]); 의존성 배열 ..