본문 바로가기

next.js21

[리액트 next.js 테이블 에러] Expected server HTML to contain a matching <tr> in <table> # Next.js에서 React로 table 생성시 에러 해결 방법 - 문제 현상 Next.js 환경에서 React로 생성시, 아래와 같은 에러가 발생할 수 있다. Expected server HTML to contain a matching in . Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. There was an error while hy.. 2024. 1. 17.
[Next.js 13] head 태그 - title 및 meta 데이터 추가/수정 방법(Metadata API) # Next.js 13 - 메타 데이터 추가/수정 방법 (Metadata API) 검색최적화(SEO)를 위해서는 HTML페이지의 태그에 메타 데이터를 잘 정의해주어야 한다. 그러나 직접 루트 레이아웃(`/app/layout.js`) 파일의 html 태그에 head 태그를 삽입하고 수정해서는 안 된다. 공식 문서에도 다음과 같이 쓰여있다. (not에 볼드체 처리가 되어 있다.) "You should not manually add tags such as and to root layouts. Instead, you should use the Metadata API." 따라서 Next.js가 제공하는 MetaData API를 이용해 meta data를 추가 정의해야 한다. MetaData API를 이용하면 Ne.. 2023. 8. 29.
[Next.js 13] layout.js: 레이아웃 기본 정리 # Next.js 13 - 레이아웃(layout.js)란? Next.js 13부터 도입된 layout.js 파일은 여러 페이지(page.js) 들에 공통적으로 적용되는 UI를 정의하는 컴포넌트이다. layout.js는 하위의 page.js 및 layout.js 를 자식(children)으로 감싸서 화면을 렌더링 한다. 따라서 여러 레이아웃을 만들어 두고, 부모-자식 레이아웃 구조로 중첩하여 적용하는 방식도 가능하다. 또한 레이아웃(Layout)에 정의된 UI와 상태 값들은, (경로 이동-Navigation 등이 발생하더라도) 계속해서 유지되며 재렌더링 되지 않고 재활용된다. # layout.js(레이아웃) 정의 방법 layout.js 를 정의하는 방법은 다음과 같다. /app 디렉터리, 혹은 그 내부의 .. 2023. 8. 29.
[Next.js 13] page.js : 페이지 컴포넌트 기본 정리 # Next.js13 - Page.js 컴포넌트란? page.js 는 Next.js에서 App Router를 위해 제공하는 React 컴포넌트 파일이다. 따라서 파일명을 바꾸면 안된다. 타입스크립트의 .tsx는 가능하다. page.js 컴포넌트는 크게 아래의 두 가지 역할을 수행한다. Routable 브라우저에서 접속 가능하게 만든다. page.js 파일이 속해있는 폴더명을 브라우저에서 접속 할 수 있는 경로(url segment)로 만든다. UI 현재 접속한 화면의 UI를 만든다. 결과적으로 JSX를 리턴하는 React 컴포넌트이다. # Page.js 사용 방법 (라우트 정의) page.js 를 통해 라우트(접속 경로 및 화면 UI)를 정의하는 방법은 다음과 같다. /app 디렉터리 내부에 폴더를 만든.. 2023. 8. 29.
[Next.js 13] 라우팅 정의 방법 (Defining Routes) # Next.js 13 라우팅 정의 방법 Next.js 13은 파일 시스템 기반의 라우터를 사용한다. /app 디렉토리 내부에 폴더를 만들면, 각 폴더명은 라우팅 경로(Route Segement)가 된다. 폴더 내부에 또 다른 폴더를 만들면, 중첩 라우팅 경로(Nested Route)가 된다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # 라우트 만들기 (Creating Routes) Route를 만드는 방법은 다음과 같다. /ap.. 2023. 8. 23.
[Next.js 13] 라우팅 기본 정리 (Routing fundamental) # Next.js 13의 라우팅 기본 모든 웹사이트의 뼈대는 사실상 여러 페이지로 구성된 라우팅 구조이다. 라우팅이란 구분된 경로를 통해 각 페이지에 접근하는 방식을 의미한다. 예를 들면, http://localhost:3000/board 의 /board 등, 브라우저 등에서 접속 가능한 경로 시스템이다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # File-System Based Router Next.js 13은 `/app` 디.. 2023. 8. 23.
[Next.js 13] Server Component vs. Client Component 기본 및 사용 방법 # Server Component vs. Client Component 기본 Next.js 13에서는 Server Component와 Client Component를 개발자가 선택적으로 정의하여 사용할 수 있다. 이에 대한 기본적인 이해를 위해 렌더링부터 가볍게 정리해본다. # 렌더링(Rendring)이란? 렌더링이란 결국 코드를 UI로 만드는 것을 의미한다. 따라서 React에서의 렌더링은 React Component를 HTML 로 만드는 과정이다. # React 18 이전의 렌더링 1. CSR (Client Side Rendering) React 18이 나오기 전, 리액트 컴포넌트의 모든 렌더링은 클라이언트(브라우저)에서 이루어졌다. - 서버는 React로 작성한 JS 코드 뭉텅이들을 브라우저에 응답.. 2023. 8. 21.
[Next.js 13] 프로젝트 폴더/파일 구조 이해하기 # Next.js 13 프로젝트 (폴더/파일) 구조 Next.js 13 프로젝트를 설치하면, 기본적으로 아래와 같은 프로젝트 구조를 갖게 된다. 최상위 루트 폴더 /app 폴더 /public 폴더 /src 폴더(Optional) /.next 폴더 /node_modules 폴더 최상위 루트 파일 Next.js 설정 파일들 next.config.js 파일 .next-env.d.ts 파일 .env 파일 그외 환경 설정 파일들 package.json 파일 .gitignore 파일 tsconfig.json 파일 .eslintrc.json 파일 [ VS Code 상에서 본 프로젝트 구조 ] # Next.js 13 폴더/파일의 구조 및 역할 각 폴더와 파일의 역할에 대해서 간단하게 살펴보면 다음과 같다. 1. 최상위.. 2023. 8. 19.
[Next.js 13] import alias @ 설정/추가/수정/삭제 방법 # Next.js 13 - import alias 란? import alias 란 import 할 때마다 매번 복잡한 경로를 입력할 필요 없이, 공통되는 부분은 @로 치환하여 사용하는 방법을 의미한다. import Header from "@/components/common/Header"; export default function BoardPage() { return ( BoardPage ); } 만약 import alias 없다면, 매번 import 할때마다 "../../components/common/.." 등의 복잡한 경로를 작성해주어야 한다. import Header from "../../components/common/Header"; export default function BoardPage(.. 2023. 8. 19.

티스토리툴바