728x90 728x90 이슈관리11 Three.js R3F: P is not part of the THREE namespace! Did you forget to extend? 오류 문제 상황 react에서 Three.js를 활용해서 3D 모델을 띄우려고 했다. Canvas가 로딩되는 동안 Progress 컴포넌트를 렌더링 하기위해 Suspense의 fallback 속성을 사용하였지만 다음과 같은 오류가 발생하였다. ⚠️R3F: P is not part of the THREE namespace! Did you forget to extend? 잘못된 코드 React Three Fiber Canvas 요소 내에 표준 HTML 태그를 추가하려고 하면 발생하는 문제였다. React에서는 Three.js를 사용할 때 Dom을 직접 조작하지 않고 React Three Fiber를 사용한다. React Three Fiber는 HTML 태그를 해석할 수 없고 Three.js scene을 렌더링 하.. 2023. 4. 27. Error: error:0308010C:digital envelope routines::unsupported 문제 상황 리액트 서버 실행을 위해서 npm start를 입력하니 아래와 같은 오류가 발생하였다. ⚠️Error: error:0308010C:digital envelope routines::unsupported 잘못된 코드 import ... from './Component'; 개선한 코드 import {...} from './Component'; react 모듈에는 복수의 함수가 있는 라이브러리 형태의 모듈로서 default 키워드를 사용하지 않고 있다. 따라서 중괄호를 붙여 import한다. 2023. 3. 26. next 환경변수 undefined 오류 문제 상황 aws s3 이미지 업로드에 필요한 s3 config 설정을 하는 중에 각각의 설정 값에 직접 문자열을 넣었을 때는 정상적으로 파일 업로드가 되었으나 .env 환경변수를 사용했을 때 undefined 에러가 발생하면서 값을 불러 올 수 없었다. 잘못된 코드 .env에서 값을 설정하고 config에서 process.env로 접근하는 부분은 문제가 없어 보였다. .env파일의 경로도 확인 해보았지만 모두 문제가 없었다. 개선한 코드 검색을 해본 결과 nextJS 에서는 NEXT_PUBLIC_ 이라는 접두사를 사용하지 않는 한 클라이언트 코드에서 환경 변수에 액세스 하는 것을 허용 하지 않는다는 것을 확인했다. NEXT_PUBLIC_ 접두사를 붙여서 정상적으로 파일이 업로드 되었다. 2023. 3. 20. 리액트 Failed to load resource : the server responded with a status of 404 () 문제 상황 react에서 작성했던 코드를 next로 옮기는 과정에서 api호출 시 404에러가 발생했다. react에서는 문제없이 get호출을 했으나 옮겨서 실행해보니 404에러가 발생하면서 컴포넌트를 렌더링하지 못했다. Failed to load resource : the server responded with a status of 404 () 잘못된 코드 처음에는 next의 param으로 username을 받아오는 문제가 있는 줄 알고 useEffect를 통해서 username을 잘 받아오는지 확인해보았다. username은 잘 받아오는데 GitHubCalendar 컴포넌트에 props로 username을 전달 할 때는 전달이 안되는 것 같았다. GET 요청을 자세히 보니까 username에 unde.. 2023. 3. 10. 이전 1 2 3 다음 728x90 728x90
