반응형 개발 프레임워크/Next.js24 [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. [React, Next.js] useEffect를 사용해서 값이 변경될 때 코드실행 [React, Next.js] useEffect라는 Hook을 사용해서 값이 변경될 때 제어코드 React 값이 변경될 때, 일부 코드를 실행해야 할때 사용하는 코드 function HookComponent(data) { useEffect(() => { // 렌더링 이후 실행할 코드 console.log('data 값이 설정'); return () => { // 컴포넌트가 사라질 때 실행되는 코드 console.log('data 값이 설정 전'); } }, [data]); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 1. 처음에 페이지가 렌더링 됐을 때 L4의 콘솔이 찍힌다. 2. props로 받은 data값이 변경될 때 L4의 콘솔이 찍힌다. 3. data값이 변경되기 직전에 L7의 콘.. 2023. 3. 17. [React, Next.js] useEffect를 사용해서 컴포넌트가 사라질 때 코드실행 [React, Next.js] useEffect라는 Hook을 사용해서 컴포넌트가 사라질 때 제어코드 React 구성 요소가 사라질 때, 일부 코드를 실행해야 할때 사용하는 코드 function HookComponent() { useEffect(() => { return () => { // 컴포넌트가 사라질 때 실행되는 코드 } }, []); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 컴포넌트가 사라질 때(컴포넌트가 언마운트 될 때) L4주석부분의 코드가 실행된다. 2023. 3. 17. [React, Next.js] useEffect라는 Hook을 사용해서 렌더링 후 코드실행 [React, Next.js] 렌더링 후 코드 실행을 위한 React Hook, useEffect라는 Hook을 사용해서 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 제어 코드 React 구성 요소가 렌더링된 후 일부 코드를 실행해야 할때 사용하는 코드이고 useEffect Hook은 다음과 같이 사용된다. function HookComponent() { useEffect(() => { // 렌더링 이후 실행할 코드 }); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 렌더링 후(컴포넌트가 마운트 됐을 때, 처음 나타났을 때) L3 주석부분의 코드가 실행된다. useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.. 2023. 3. 17. [Next.js] Error: There was an error while hydrating this Suspense boundary. Switched to client rendering Next.js 13에서 Error: There was an error while hydrating this Suspense boundary. Switched to client rendering - 웹 사이트내에서 useEffect, useState를 사용하는 페이지에서 출력되는 Error - 콘솔창에서 useEffect, useState를 사용하는 페이지에서 출력되는 Error 서버 HTML이 에 를 포함할 것으로 예상하지 않는다고 Error가 명시되고 있다. Error: There was an error while hydrating this Suspense boundary. Switched to client rendering가 발생할 때 일반적으로 이 문제는 사전 렌더링과 브라우저 간에 다를 수 있는 .. 2023. 3. 6. [Next.js] 개발환경 구축 및 Next.js 13으로 업데이트 [Next.js] 개발환경 구축 명령어 및 Next.js 13으로 업데이트 명령어 Next.js 시작 $ npx create-next-app@latest $ yarn create next-app $ pnpm create next-app 위 3개 명령어 중 하나로 설치 TypeScript 프로젝트로 시작하려면 --typescript 플래그를 사용할 수 있다. $ npx create-next-app@latest --typescript $ yarn create next-app --typescript $ pnpm create next-app --typescript 위 3개 명령어 중 하나로 설치 react 및 react-dom 프로젝트에서 다음을 설치 $ npm install next react react-do.. 2023. 3. 4. [React, Next.js] 모달(Modal) 구현_2 (recoil을 통한 제어) [React, Next.js] 모달(Modal) 제어부 (실제 모달 제어부분) 1. 전역관리 도구인 recoil을 통해 모달 컴포넌트를 제어하는 각 컴포넌트 파일들 예제 코드 import { useRecoilState } from "recoil"; const [modalState, setModalState] = useRecoilState(atomModalState); - recoil이 필요하므로 modal을 제어할 컴포넌트에서 recoil을 import해준다. - useRecoilState로 recoil의 atom을 제어한다. 2. 전역적으로 모달 상태 선언 및 초기화를 해주는 전역관리 도구인 recoil의 atom을 모아놓은 atom.ts 파일 예제 코드 export const aModalState =.. 2023. 2. 22. [React, Next.js] 모달(Modal) 구현_1 (react-modal을 통한 생성) [React, Next.js] 모달(Modal) 생성 부 (모달 관련 파일 생성부분) 1. import ReactModal from "react-modal" 사용해 구현한 modal.tsx파일 http://reactcommunity.org/react-modal/ react-modal documentation react-modal Accessible modal dialog component for React.JS We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility .. 2023. 2. 22. 이전 1 2 3 다음 반응형
