분류 전체보기411 서버 컴포넌트 / 클라이언트 컴포넌트 app 폴더에 있는 컴포넌트는 기본적으로 서버 컴포넌트이다. 되도록 무조건 서버 컴포넌트로! 정말 필요한 곳에서만 클라이언트 컴포넌트로! 1. Next.js 13부터는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 작동합니다. 2. 서버 컴포넌트로 실행된 코드는 서버에서 만들어져 HTML 형태로 클라이언트에 전송되기 때문에 콘솔 로그는 브라우저에서 실행되지 않습니다. 3. 서버에서 동작하기 때문에 브라우저에서 제공하는 API는 사용할 수 없지만, Node.js API는 사용 가능합니다. 클라이언트 컴포넌트 - app 폴더가 아닌 별도의 components 폴더에 파일을 생성 'use client'; import { useState } from 'react'; export default function Cou.. 2023. 7. 24. PageRouter - AppRouter 비교 최종 수정 : 2024-06-03PageRouterNext.js 13.4 이후 버전부터 지원하기 시작했다. page router과 app router의 차이와 무엇으로 개발을 하는 것이 나은지 취업을 위한 목표라면, page router로 만들고 나서 app router를 경험하면서 비교하는 게 낫다. 아직은 pageRouter를 사용하는 곳이 많다. 무엇보다 둘의 차이를 알아야 한다. PageRouter를 모른 채 AppRouter를 하기는 아쉽다. 또한, AppRouter는 자리를 잡아가는 단계이다. 그러나 둘이 다른 점들만 있는 게 아니다. 최적화에 관해서는 동일하다. === app router 기능을 통해, FCP, TTI가 단축됐는데v12 는 렌더링 방식(SSG, SSR, ISR, CSR).. 2023. 7. 24. 렌더링 전략 - SSG / SSR / CSR / ISR 최종 수정 : 2024-06-21렌더링 전략웹 페이지 또는 웹 애플리케이션을 웹 브라우저에 제공하는 방법을 의미한다. # 장점프리 렌더링을 하면 검색 엔진 최적화(SEO)에 도움이 되고, 페이지의 로딩 속도가 빠르다. # 프리 렌더링(Pre-rendering)웹 브라우저가 페이지를 로딩하기 이전에 렌더링 하는 것1) 정적 생성(Static Generation) : 빌드할 때 렌더링 2) 서버 사이드 렌더링(Server-side Rendering) : 리퀘스트가 들어오면 렌더링 Next.js에서는 기본적으로 모든 페이지를 정적 생성한다.리퀘스트가 들어올 때마다 매번 렌더링을 하는 것보다 미리 렌더링을 해서 저장해 둔 것을 보내 주는 게 훨씬 빠르기 때문이다.--코드 스플리팅 서버 사이드 렌더링(SSR, s.. 2023. 7. 24. 최적화 - 구글 폰트 적용 / Image 컴포넌트 / Head 컴포넌트 최종 수정 : 2024-05-31구글 폰트 적용Next.js에서는 구글 폰트를 위한 기능도 제공한다. 편하게 쓰는 것뿐만 아니라 여러 가지 최적화도 함께 제공한다.import { Noto_Sans_KR } from '@next/font/google';const notoSansKR = Noto_Sans_KR({ weight: ['400', '700'], subsets: [],});weight 프로퍼티에는 사용할 폰트 굵기에 400, 700을 갖는 폰트를 쓸 거라고 명시한다. 여기서 주의할 점은 숫자(400, 700 같은 형태)가 아니라 문자열('400', '700' 같은 형태)라는 것이다.subset은 폰트에서 영문, 한글 이런 식으로 사용할 글자들만 골라 사용할 때 작성한다. 빈 배열로 작성하면, 일단 .. 2023. 7. 24. 라우팅 / 404page / Layout / Link / SEO 최종 수정 : 2024-06-01Next.js 기초와 내장 컴포넌트Next.js는 단순히 서버 사이드 렌더링만 제공하는 프레임워크가 아니다. 훌륭한 내장 컴포넌트와 함수를 제공하여 성능이 뛰어난 동적 웹 사이트를 쉽게 만들 수 있다.라우팅 시스템라우팅(Routing) : 어떤 주소에 어떤 페이지를 보여줄지 정하는 것을 의미한다. Next.js는 '파일시스템 기반 라우팅'으로 동작한다. : 파일의 경로가 주소에 매칭되는 라우팅 방식 정적 라우팅(Static Routing)?어떤 주소에 어떤 페이지를 보여줄지 정하는 것 동적 라우팅(Dynamic Routing)?여러 주소를 하나의 페이지 컴포넌트에서 처리하는 것 API 라우팅 Layout 컴포넌트Next.js에서는 무조건 a 태그 대신에 Link 컴.. 2023. 7. 18. 이전 1 ··· 57 58 59 60 61 62 63 ··· 83 다음