REACT
-
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted 위 처럼 에러가 나는 경우는 useRouter를 next/router에서 가져와서 생긴 문제입니다. NEXT.js 13 이상 버전은 next/router가 아닌 next/navigation에서 useRouter를 가져와야 합니다. 다음 코드를 참조해주세요. 'use client' import { useRouter } from 'next/navigation' export default function Page() { const router = useRouter() return ( router.push('/dashboard')}> Dashboar..
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mountedError: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted 위 처럼 에러가 나는 경우는 useRouter를 next/router에서 가져와서 생긴 문제입니다. NEXT.js 13 이상 버전은 next/router가 아닌 next/navigation에서 useRouter를 가져와야 합니다. 다음 코드를 참조해주세요. 'use client' import { useRouter } from 'next/navigation' export default function Page() { const router = useRouter() return ( router.push('/dashboard')}> Dashboar..
2024.03.28 -
다음은 React 컴포넌트로 드래그로 요소를 선택하는 기능을 구현한 예제입니다. 드래그하는 동안 선택 영역에 포함된 요소들을 감지하여 선택된 요소들을 표시합니다. CSS 스타일은 별도의 styles.css 파일에서 정의합니다. import React, { useState } from 'react'; import './styles.css'; // 스타일 시트를 import function DragSelect() { const [isDragging, setIsDragging] = useState(false); // 드래그 상태를 관리하는 상태 const [startX, setStartX] = useState(0); // 드래그 시작 X 좌표 const [startY, setStartY] = useState(..
[React] 드래그로 DOM 요소 선택다음은 React 컴포넌트로 드래그로 요소를 선택하는 기능을 구현한 예제입니다. 드래그하는 동안 선택 영역에 포함된 요소들을 감지하여 선택된 요소들을 표시합니다. CSS 스타일은 별도의 styles.css 파일에서 정의합니다. import React, { useState } from 'react'; import './styles.css'; // 스타일 시트를 import function DragSelect() { const [isDragging, setIsDragging] = useState(false); // 드래그 상태를 관리하는 상태 const [startX, setStartX] = useState(0); // 드래그 시작 X 좌표 const [startY, setStartY] = useState(..
2024.03.21 -
next.confg.mjs에서 아래처럼 설정했는데도 undefined 뜬다면 const nextConfig = { env: { API_BASE_URL: process.env.BASEURL, }, }; exports default = nextConfig; version 9.4 미만 해당 상위폴더에 .env를 생성해주시고 환경변수를 입력해주세요. NEXT_PUBLIC_
Next.js에서 process.env 값이 undefined 뜰때next.confg.mjs에서 아래처럼 설정했는데도 undefined 뜬다면 const nextConfig = { env: { API_BASE_URL: process.env.BASEURL, }, }; exports default = nextConfig; version 9.4 미만 해당 상위폴더에 .env를 생성해주시고 환경변수를 입력해주세요. NEXT_PUBLIC_
2024.03.19 -
Access to fetch at 'http://targeturl' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 위의 에러가 난 경우 CORS policy 메세지를 내뱉어서 CORS를 체크하는 경우가 많습니다. 하지만 해당 url을 직접 웹브라우저나 insomnia, postman..
Access to fetch at 'http://targeturl' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to '..Access to fetch at 'http://targeturl' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 위의 에러가 난 경우 CORS policy 메세지를 내뱉어서 CORS를 체크하는 경우가 많습니다. 하지만 해당 url을 직접 웹브라우저나 insomnia, postman..
2024.03.19 -
더이상 axios v0.22.0부터 CancelToken을 쓰지 않습니다. 참고: https://github.com/axios/axios?tab=readme-ov-file#cancellation 이제 CancelToken의 현대판인 AbortController로 이전 요청을 취소하는법을 알려드릴거에요. 코드부터 봅시다. const source = useRef(null); const controller = new AbortController(); const handleChange = () => { try { if (source.current !== null && !source.current.aborted) { // already exists request console.log('request cancele..
React axios 이전 요청 취소 최신버전!!더이상 axios v0.22.0부터 CancelToken을 쓰지 않습니다. 참고: https://github.com/axios/axios?tab=readme-ov-file#cancellation 이제 CancelToken의 현대판인 AbortController로 이전 요청을 취소하는법을 알려드릴거에요. 코드부터 봅시다. const source = useRef(null); const controller = new AbortController(); const handleChange = () => { try { if (source.current !== null && !source.current.aborted) { // already exists request console.log('request cancele..
2024.01.31 -
yarn start 했을때 아래와 같이 'System limit for number of file watchers reached'에 관한 에러가 나오는 이유는 React의 프로젝트 소스코드의 변화를 감지하는 watcher의 감지 가능 파일의 limit이 초과해서 나타나는 것입니다. Error: ENOSPC: System limit for number of file watchers reached, watch '경로' at FSWatcher. (node:internal/fs/watchers:247:19) at Object.watch (node:fs:2418:34) at createFsWatchInstance (/node_modules/chokidar/lib/nodefs-handle 해결법은 아래의 명령어들을..
Error: ENOSPC: System limit for number of file watchers reached, watchyarn start 했을때 아래와 같이 'System limit for number of file watchers reached'에 관한 에러가 나오는 이유는 React의 프로젝트 소스코드의 변화를 감지하는 watcher의 감지 가능 파일의 limit이 초과해서 나타나는 것입니다. Error: ENOSPC: System limit for number of file watchers reached, watch '경로' at FSWatcher. (node:internal/fs/watchers:247:19) at Object.watch (node:fs:2418:34) at createFsWatchInstance (/node_modules/chokidar/lib/nodefs-handle 해결법은 아래의 명령어들을..
2024.01.22 -
"ENOSPC: System limit for number of file watchers reached"라는 오류 메시지는 파일 감시자 수에 대한 시스템 제한이 초과되었음을 나타냅니다. 파일 감시자는 다양한 응용 프로그램과 서비스에서 파일 및 디렉터리의 변경 사항을 모니터링하는 데 사용됩니다. 파일 감시자의 시스템 제한에 도달하면 더 이상 감시자를 만들 수 없어서 이 오류가 발생할 수 있습니다. 이 오류는 주로 Linux 시스템에서 볼 수 있지만 다른 플랫폼에서도 발생할 수 있습니다. 이 문제를 해결하려면 다음 단계를 시도해볼 수 있습니다: 시스템 제한 증가: 시스템에서 허용하는 파일 감시자의 최대 수를 증가시킬 수 있습니다. 이는 일반적으로 시스템 구성을 수정하여 수행할 수 있습니다. Linux에서는 ..
Error: ENOSPC: System limit for number of file watchers reached, watch"ENOSPC: System limit for number of file watchers reached"라는 오류 메시지는 파일 감시자 수에 대한 시스템 제한이 초과되었음을 나타냅니다. 파일 감시자는 다양한 응용 프로그램과 서비스에서 파일 및 디렉터리의 변경 사항을 모니터링하는 데 사용됩니다. 파일 감시자의 시스템 제한에 도달하면 더 이상 감시자를 만들 수 없어서 이 오류가 발생할 수 있습니다. 이 오류는 주로 Linux 시스템에서 볼 수 있지만 다른 플랫폼에서도 발생할 수 있습니다. 이 문제를 해결하려면 다음 단계를 시도해볼 수 있습니다: 시스템 제한 증가: 시스템에서 허용하는 파일 감시자의 최대 수를 증가시킬 수 있습니다. 이는 일반적으로 시스템 구성을 수정하여 수행할 수 있습니다. Linux에서는 ..
2023.08.16 -
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }' - install 'timers-browserify' If you don't want to include a polyfill, you can..
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }' - install 'timers-browserify' If you don't want to include a polyfill, you can..
2023.02.28