Next.js에서 useSearchParams() 사용 시 주의사항문제 상황다음과 같은 에러 메시지를 보신 적 있나요?useSearchParams() should be wrapped in a suspense boundary at page "/loginPage". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout 이 메시지는 "/loginPage"에서 useSearchParams()를 사용할 때 Suspense 경계로 감싸지 않아 발생하는 오류입니다. Suspense는 리액트 18버전에서 도입이 되었습니다. 다음 링크를 참조해주세요.-> https://ko.react.dev/reference/react/Suspense..

ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label) React 프로젝트에서 자주 마주치는 ESLint 오류 중 하나인 "A control must be associated with a text label.(jsx-a11y/control-has-associated-label)"에 대해 알아보고, 이를 해결하는 방법을 공유하려고 합니다.오류의 의미이 오류는 웹 접근성(Web Accessibility)과 관련이 있습니다. 간단히 말해, 사용자 인터페이스의 컨트롤(예: 버튼, 입력 필드)에 연관된 텍스트 레이블이 없을 때 발생합니다. 텍스트 레이블은 스크린 리더 사용자를 포함한 모든 사용자가 해..

next js 에서 build할때 window is not defined error 뜨면서 build가 안되는 경우가 있습니다. 다른 블로그에서 참고했을때는 대부분 렌더링 이전에 window를 사용해서 그렇다라고하며 use client로 client 컴포넌트를 사용하고 useEffect안에서 window를 사용하고나 아래처럼 조건문을 추가하는것을 알려주고 있습니다.if (typeof window !== 'undefined'){ // codes}하지만 진짜  문제는 window를 사용하지 않았을때가 문제입니다. 문제되는 페이지에서 한줄한줄 확인해보니 저같은 경우는 heic2any 라이브러리 사용 코드에서 문제가 생겼었는데요.기존에 문제되는 코드입니다. 위의 코드를 다음처럼 바꿔주니 정상적으로 build되었..

Warning: validateDOMNesting(...):  cannot appear as a descendant of . 말 그대로 p 태그 안에 div 태그를 써서 생긴 문제이다. HTML에서 p 태그는 문단을 나타내는 데 사용되며 p 태그는 텍스트를 하나의 문단으로 그룹화하여 구조화된 텍스트를 작성하는 데 유용하다. 문단은 주로 여러 문장을 포함하며, 웹 페이지의 가독성을 높이는 데 중요한 역할을 한다. 이런식으로 사용하면 Error까지는 아니지만 Warning이 뜬다. (x) hello  p 태그를 다른 태그로 바꾸면 된다. (O) hello

Unhandled Runtime ErrorError: Invalid src prop (http://127.0.0.1:8020/api/files/background.jpg) on `next/image`, hostname "127.0.0.1" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host `next/image` Un-configured HostUsing App Router Features available in /appnextjs.org Nextjs에서 Image를 사용할때 다이렉트로 src에 웹 이미지 url을 사용하..

No index signature with a parameter of type string was found on type타입스크립트에서 string key로 객체에 접근하면 위와 같은 에러가 날 수 있다.const obj = { foo: "hello",}console.log(obj["foo"]) 타입스크립트에서 객체에 접근할때 string literal 타입만 허용되는데 여기에 string 타입을 사용해서 생긴 문제이다. 하지만 switch case 보다는 내가 원하는 키에 따라 다른 값을 적은 코드로 얻고자할때 유용하게 쓰이므로 obj로 값을 얻는게 필요할때가 있다.  빠르게 다음의 해결책을 참고하여 사용해보자.Solution객체를 함수로 반환하게하고 반환 타입에서 키값을 스트링 타입으로 지정해주고..

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..

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 해결법은 아래의 명령어들을..