썸네일 React v18에선 이제 안써요!!"ReactDOM.render is no longer supported in React 18" 현재 기준 리액트는 Version 18.1.0이 공개돼 있다. CRA(create-react-app)로 React 프로젝트를 생성하면 18.1.0 버전이 다운로드하여진다. 하지만 버전이 달라지면 항상 이전 버전에서 더 이상 사용하지 않는 것들이 발생하게 되는데, 18.0.0 버전부터 ReactDOM.render을 사용하지 않는다는 에러가 나온다. 사실 아직 나는 한 번도 보지 못했는데, 동기분의 에러 메시지를 통해 처음 알게 되었다. 17 버전 이하를 사용하다 18 버전으로 버전업을 한다고 했을 때 만날 수 있는 에러라고 생각해서 정리를 하려고 마음을 먹었다. ReactDOM.render는 index.js 파일에서 찾아볼 수 있는데, 우리가 흔히 보던 React의 index.js 내부 내용이다.(조금 간..
썸네일 'Uncaught Error: useLocation() may be used only in the context of a <Router> component.' 에러 해결방법 MBTI 테스트 같은 테스트를 만들고 있는 과정에서 home 페이지에서 test 페이지로 그리고 test 페이지에서 result 페이지로 이동할 때 매끄러운 Page Transition을 주기 위해서 AnimatePresence를 Router에 사용했는데 그 때 에러가 발생했다. App.tsx function App() { const location = useLocation(); return ( ); } 맨 처음에는 이런 식으로 코드를 짰는데 계속해서 'Uncaught Error: useLocation() may be used only in the context of a component.' 에러가 발생했다. 그래서 구글링을 통해 StackOverFlow 에서 해결 방법을 찾아낼 수 있었다. 답변은 in..
썸네일 React + TypeScript(tsx) 에서 영상 배경 사용하고 싶을 때 React + TypeScript 에서 영상 배경 사용법 내가 이 글을 쓰는 이유는 방금 영상 배경화면 설정하는 법을 구글링을 통해 알아냈기 때문이다. TypeScript error: Cannot find module '../videos/video.mp4'. TS2307 위와 같은 module을 찾지 못한다는 에러가 뜬다면 참고했으면 좋겠다. 위의 에러는 파일의 유형을 찾을 수 없다는 유형 스크립트 오류이다. 예시 코드 import bgVideo from "../video/clouds.mp4"; function Home() { return ( ); } 위에서 src가 무슨 타입인지를 typescript에 선언해주어야 한다. 해결 방법 react-app-env.d.ts 파일이나 새로운 하나의 .d.ts 파..