서론 이번 글은 "TypeError: r.map is not a function"에 대해 다루었다. 이번 문제 역시 프로젝트 파일 내부에서 발생하는 것으로 로컬에서는 잘 작동하지만 배포된 도메인에서만 발생했다. 오류 메시지 TypeError: r.map is not a function Uncaught TypeError: r.map is not a function r.map에서 r이라는 변수를 사용한 적이 없는데 왜 이런 에러가 발생하는지 이유를 모르겠어서 에러 메세지를 자세히 보다가 에러가 발생한 곳의 위치를 쭉 따라가다 보니 빌드 후 배포된 코드는 실제 코드와 똑같이 쓰는 것이 아니라 약간씩 이름이 다르게 작성되어진다는 것을 알게 되었고 본 코드 위치도 알게 되었다. 오류 코드 {probs && pro..

서론 이번 블로그 글에서는 Firebase Hosting을 사용하는 도중 마주한 메인 화면이 빈 화면으로 나오는 이슈와 이를 해결하는 과정을 다루겠다. 문제는 프로젝트 파일 내부에서 발생하는 것으로, 로컬에서는 잘 작동하지만 배포된 도메인에서만 발생했다. 이는 로컬 환경과 배포 환경 간의 차이로 인한 문제로 의심되었고 다른 페이지에서는 모든 기능이 정상 작동하는데, 메인 화면에서만 이슈가 발생하는 점, '/' 경로에서만 화면이 나오지 않는 현상을 보고 다음과 같은 가설을 세울 수 있었다. route path 설정이 담긴 app.tsx 파일에 문제가 있을 것이다. MainPage만 나오지 않는 것이니 MainPage 관련 컴포넌트에서 에러가 있을 것이다. 둘 다 체크를 해보았고, MainPage 컴포넌트 ..

//에러코드 import { Fade } from "@mui/material"; const FadeIn = ({ children, index }) => { return ( {children} ); }; . . . 코드는 다소 이상하지만...위 같은 느낌의 코드로 mui fade 를 이용해서 FadeIn 효과를 주는 컴포넌트를 만들고 있었는데 갑자기 에러가 발생했다. 도무지 해결방법을 모르겠어서 여기저기 뒤지다가 한가지 사실을 발견했다. mui Fade 컴포넌트를 사용한 커스텀 컴포넌트 FadeIn 내부에 있는 컴포넌트를 태그로 묶어주면 오류가 해결된다. //해결코드 import { Fade } from "@mui/material"; const FadeIn = ({ children, index }) => ..

문제 상황 프로젝트 진행 중 다음과 같은 오류 메시지에 직면했다. Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function 이 오류는 잘못된 모듈 임포트 때문에 발생했음을 알 수 있었다. 그러나 정확한 원인을 찾기 위해 코드를 더 깊게 들여다봐야 했다. 해결 과정 코드를 검토하던 중, ReactDOM 모듈을 잘못 임포트한 것을 발견했다. 초기 코드는 아래와 같았다. import ReactDOM from 'react-dom/client'; 이를 바로잡기 위해, 다음과 같이 코드를 수정했다. import ReactDOM from 'react-dom'; 이렇게 수정한 후, 프로젝트를 다시 실행하니 오류가 ..

1. 문제 상황 리액트 앱을 개발하면서 영화 정보를 표시하고 선택한 영화에 대한 모달을 보여주는 기능을 구현 중 에러가 발생했다. 2. 에러 원인 분석 2.1 에러 메시지 이해 먼저, 이 에러 메시지가 무엇을 의미하는지 이해해야 한다. 이 에러는 일반적으로 무한 루프가 발생했음을 나타내며, 이는 리액트가 특정 구성 요소를 너무 많이 다시 렌더링하려고 시도했음을 의미한다. 2.2 리액트의 리렌더링 한계 리액트는 무한 루프를 방지하기 위해 리렌더링 횟수에 한계를 둔다. 이를 이해하는 것이 이 문제의 핵심이다. 3. 해결 방법 문제의 핵심은 handleClick 함수에서 발견되었다. 이벤트 핸들러에 직접 함수를 호출하는 대신, 함수 참조를 전달해야 한다. 4. 코드 수정 변경 전: {movies.map((mo..