클라이언트/Next.js (8) 리스트형 [Next.js] Zod를 사용하여 데이터 검증하기 // Zod- 타입스크립트의 타입 안정성을 향상시켜주는TypeScript-first 스키마 선언 및 검증 라이브러리- 공식 문서: https://zod.dev/ GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com▪ 설치npm install zod▪ 스키마 정의 및 검증import { z } from 'zod';const 스키마명 = z.자료형({ 데이터명: z.자료형().검증메소드(),});const 스키마명 = z.자료형().검증메소드();스키.. [Next.js] 렌더링 과정 및 개념 특정 페이지로 이동할 때, next.js는 서버에서 모든 page와 component를 render해서 HTML 형태로 브라우저에 넘겨준다.(SSR)그러면 사용자는 서버에서 렌더링된 초기 화면을 바로 볼 수 있다.초기 HTML이 제공되기 때문에 SEO 향상에 도움이 된다.그리고 그 즉시 React 애플리케이션을 생성하여 초기 HTML에 연결한다.(hydration)이를 통해 interactive한 SPA(Single Page Application) 가 된다.SSR은 모든 component에 발생하는데, hydration은 use client를 선언한 component에만 발생한다. [Next.js] 배포(Deploying) // 배포, Deploying - 실제 사용이 가능하도록 서버에 올리는 과정 - Next.js는 호스팅할 때 Vercel을 이용하는 것이 편리하다. (애초에 Vercel이 Next.js 개발..) 1. Github repository에 소스를 upload한다. - Vercel은 설정한 repository에서 코드를 가져오기 때문에 간편하다. - 애초에 github랑 연동해서 쓰고 있었으면 생략해도 되는 단계! (나는 nextjs 공부 프로젝트의 하위 디렉토리로 배포 연습 중이라 private repository를 새로 파서 옮겼다..) - private repository여도 환경변수 파일은 올리지 않도록 한다! 따로 처리 예정.. - 추후 main branch를 수정하면 Vercel 이 자동으로 반영해.. [Next.js] head(meta data) 추가하기 // head(meta data) 추가하기- SEO 향상을 위해 heade elements를 추가하는 것은 매우 중요하다.- meta data 중 title과 description은 특히 필수!1. Head의 meta data를 추가하기 위해서는 root 페이지또는 layout에서 작업해야 한다2. title과 설명을 추가한다.import Head from 'next/head';function 메인컴포넌트명() { return ( 제목 );}Head 컴포넌트 안에 title과 content를 정의한다.title은 별도의 태그를 사용하고, description은 meta 태그의 name 속성을 이용하여 식별한다.export con.. [Next.js] API 라우터 (API Router) // API Router - HTML 코드를 리턴하지 않고 HTTP request를 받는다. - DB와 연결해 데이터를 주고받을 수 있다. 1. 서버 코드 작성 - pages 폴더 하위에 api 폴더를 생성한다. - 포함되는 파일의 이름은 URL에서 경로가 된다. - pages > api > 파일명 => api/파일명 - Server-side 코드를 포함하는 함수를 정의한다. - Next.js에서 DB연결 코드는 https://sorrel012.tistory.com/402 참고 2. 클라이언트에서 서버 연결 await axios .post('/api/파일명', data) .then((response) => { console.log(response); }) .catch((error) => { window... [Next.js] 사전 렌더링 시 데이터 가져오기 // 사전 렌더링 시 데이터 가져오기 - 초기에 반환하는 HTML 코드에 데이터가 있는 페이지를 사전 렌더링해야 Next의 의미가 있다. > SEO 향상! - Next.js의 사전 렌더링 방법 두 가지 Static Generation Server-side Rendering // Static Site Generation (SSG) - production 용으로 build하는 시점에 사전 렌더링된다. - 항상 다시 생성하는 것이 아니라 cache하고 다시 사용하기 때문에 빠르다. - page 컴포넌트에 데이터를 가져와서 추가해야 한다면 page 컴포넌트 파일 안에서 getStaticProps 함수를 export 해야 한다. > Next는 Promise 반환을 기다린다. export async function.. [Next.js] 라우팅(Routing) // 라우팅, Routing- 페이지 간의 이동- 경로명은 파일명과 일치한다. ▪ index.js 파일은 일반적으로 root page 역할을 한다.('/') ▪ index.js 파일을 제외하고 다른 파일 이름은 경로 이름으로 사용된다.- pages 하위의 index.js > /- pages 하위의 news.js > /news- 중첩 경로는 디렉토리를 생성하하여 디렉토리명/파일명으로 경로가 사용된다.- pages 하위의 news 하위의 index.js > /news- pages 하위의 news 하위의 edit.js > /news/edit// 동적 라우팅- 파일명에 [] 를 사용하면 동적 페이지로 사용된다.- pages 하위의 news 하위의 [newsID].js import { useRoute.. [Next.js] Next.js란? // Next.js - React의 기능을 강화해주는 fullstack 프레임워크 - 서버 사이드 렌더링(SSR) > 서버에서 React 컴포넌트를 사전 렌더링할 수 있다. > SEO 향상 - SPA을 제공하여 서버에 요청이 오면 single page에 동적으로 사전 렌더링을 거쳐 콘텐츠를 포함한 초기 페이지를 보여준다. - 클라이언트 사이드와 서버 사이드를 혼합한다. - 코드 기반이 아닌 파일, 폴더 기반 라우팅을 제공한다. - React 프로젝트에 백엔드 코드를 쉽게 추가할 수 있다.(Node js) 1. Node.js 설치 - https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript en.. < 1 >
