본문 바로가기
반응형

개발 프레임워크/Next.js21

[Next.js, Nextra] Parsing error: Cannot find module 'next/babel' ... Parsing error: Cannot find module 'next/babel' 해결방법Parsing error: Cannot find module 'next/babel' ... 해결 방법 프로젝트 루트 경로에 아래 두 파일을 생성 및 수정해준다..babelrc{ "presets": ["next/babel"], "plugins": []} .eslintrc.json{ "extends": ["next/babel","next/core-web-vitals"]}babel 파싱 에러가 사라진 것을 확인할 수 있다. 2023. 8. 4.
[Next.js, Nextra] Error: Invalid src prop "(domains)" on `next/image` Error: Invalid src prop "(domains)" on `next/image` 해결방법 Next.js, Nextra에서 외부에서 이미지 파일을 불러오면 아래와 같은 Error가 발생한다.위와 같은 Error는 next.config.js에 domain을 설정해주면 된다. module.exports = { reactStrictMode: true, images: { domains: [ "www.notion.so", "s3.us-west-2.amazonaws.com", ], // 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 되고 배열로 여러가지 입력이 가능하다. }}이후 next.config 파일을 수정했기 때문에 서버를 껐다가 다시 켜면 정상적.. 2023. 7. 30.
[Next.js] 컴포넌트에 props로 useState값 넘기기 컴포넌트를 재사용하기 위해 분리시켜 props를 넘겨 제어할 때 useState를 props 넘겨줘야 하는 상황이 온다. * useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예를 들어 아래와 간은 DatePicker UI를 컴포넌트방식으로 만든다고 하자. 예제 코드는 다음과 같다. 1. 이번달의 첫 날과 마지막 날을 선언해주고 각각의 DatePicker로 전달할 useState값 또한 초기화 한다. const firstFormat = dayjs().startOf("month").toDate(); const lastFormat = dayjs().endOf("month").toDate(); const [selectedDate1,.. 2023. 5. 15.
[Next.js] Module parse failed: Shorthand property assignments are valid only in destructuring patterns, [js] SyntaxError: Invalid shorthand property initializer [Next.js] Module parse failed: Shorthand property assignments are valid only in destructuring patterns 에러 [js] SyntaxError: Invalid shorthand property initializer 에러 아래와 같이 객체 안에서 c = 3으로 선언하였을 경우의 코드가 존재하였을 경우 x = { a:1, b:2, c=3 } console.log(x) [Next.js]에서의 에러창 ./src/main.tsx Module parse failed: Shorthand property assignments are valid only in destructuring patterns (62:34) File was processe.. 2023. 4. 19.
[Next.js] undefined, null strict모드 해제 tsconfig.json의 compilerOptions내부의 strictNullChecks를 false로 설정해주면 된다. "compilerOptions": { ... "strictNullChecks": false, ... } 2023. 4. 14.
[Nextjs] client의 IP주소를 가져와 비교하여 특정 IP주소에서만 홈페이지 이용을 허용 [Nextjs] client의 IP주소를 가져와 비교하여 dev, qc서버를 허용하고 싶은 IP 주소 (ex. 회사 IP주소 or 집 IP 주소)가 아니라면 리다이렉트하기 1. Next.js에서 client의 IP주소를 가져오는 방법 axios.get("https://geolocation-db.com/json/").then((res) => { console.log(res?.data?.IPv4); }); 출력값 "내가 사용하고 있는 IP주소가 string 형태로 출력" 2. router를 사용하여 외부주소로 리다이렉트하는 방법 import { useRouter } from "next/router"; const router = useRouter(); router.push("redirect하고 싶은 주소");.. 2023. 4. 3.
[js] 유한수인지 판별하는 isFinite() 메소드 [js] 유한수인지 판별하는 isFinite() 메소드 정리 isFinite() 전역 함수는 주어진 값이 유한수인지 판별합니다. 필요한 경우 매개변수를 먼저 숫자로 변환한다. 문법 isFinite(testValue); 매개변수 ( testValue ) 유한한지 판별할 값이다. 반환 값 testValue가 양 또는 음의 Infinity, NaN, 또는 undefined면 false, 아니면 true가 출력된다. 예제) console.log( isFinite(Infinity), isFinite(NaN), isFinite(-Infinity), isFinite(0), isFinite(2e64), isFinite(-910), isFinite(null), isFinite('0') ); Infinity, NaN, -.. 2023. 3. 30.
[Next.js] window is not defined, document is not defined 1. Next.js에서 window is not defined, document is not defined가 출력되는 이유 1. Next.js는 서버측에서 움직이는 SSR(Server Side Rendering)과 클라이언트 측에서 움직이는 CSR(Client Side Rendering)을 수행하는 프레임워크이다. 2. document, window 두 객체는 클라이언트 측에서만 정의되는 전역 변수이다. 3. 서버측에서 Redeing을 할 때, 코드를 읽으면서 document와 window 두 객체를 읽을 수 없기 때문에 window is not defined, document is not defined 두 error가 출력된다. 4. 따라서 document, window를 쓴다면 서버쪽에서 docume.. 2023. 3. 29.
[Next.js] <Link> 태그 사용 Next.js에서 URL 혹은 경로이동을 할 때, Link 태그 사용 pages 하위 디렉토리 구조일 때 pages/index.js pages/about.js pages/blog/[slug].js import Link import Link from 'next/link' 사용하는 방법 // pages/index.js Home // pages/about.js About Us // pages/blog/[slug].js Blog Post Link의 props정리 필수 값 1. href ... 이동할 경로 혹은 URL을 입력한다. 옵션 값 1. as ... 브라우저의 주소창에 표시될 URL을 입력한다. 2. passHref (기본값: false) next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역.. 2023. 3. 27.
[React, Next.js] useEffect 정리 (마운트, 언마운트, 값 변경) useEffect Hook 정리 1. useEffect를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다. 2. deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다. 3. useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup함수라고 부른다. * cleanup함수는 useEffect 에 대한 뒷정리를 해주는 개념으로 렌더링이 될 때, 이전에 남은 함수가 실행되어 메모리 누수가 일어나는 일을 막을 수 있다. 마운트 시에 하는 작업들 - props 로 받은 값을 컴포넌트의 로컬 상태로 설정 - 외부 API 요청 (REST API 등) - 라이브러리 사용 (D3, Video.js 등.. 2023. 3. 18.
반응형

티스토리툴바