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객체를 함수로 반환하게하고 반환 타입에서 키값을 스트링 타입으로 지정해주고..

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

다음은 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(..

next.confg.mjs에서 아래처럼 설정했는데도 undefined 뜬다면 const nextConfig = { env: { API_BASE_URL: process.env.BASEURL, }, }; exports default = nextConfig; version 9.4 미만 해당 상위폴더에 .env를 생성해주시고 환경변수를 입력해주세요. NEXT_PUBLIC_

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

더이상 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..