728x90 프레임워크160 [Next.js] 두 가지 형태의 사전 렌더링 Next.js에는 두 가지 사전 렌더링 형태(형식)가 있습니다. - 정적 생성 (Static Generation = SSG) - 서버 측 렌더링 (Server-Side Rendering = SSR) 둘의 차이점은 폐이지에 대한 HTML을 생성할 때 나타납니다. 정적 생성 (SSG) 빌드 시 HTML을 생성하는 사전 렌더링 방식입니다. 사전 렌더링된 HTML은 각 요청에서 재사용됩니다. 서버 측 렌더링 (SSR) 각 요청에 대해 HTML을 생성하는 사전 렌더링 방식입니다 ❗개발 모드(npm run dev 또는 yarn dev)에서 모든 페이지는 정적 생성을 사용하는 페이지의 경우에도 각 요청에서 미리 렌더링(서버 측 렌더링) 됩니다. (정적 생성을 확인할 때는 빌드 후 확인할 수 있습니다. 개발자 모드에서.. 2022. 2. 18. [Next.js] 사전 렌더링 사전 렌더링 기본적으로 Next.js는 모든 페이지를 미리 렌더링 합니다. 즉, Next.js는 클라이언트 측 JavaScript로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성합니다. 사전 렌더링은 더 나은 성능과 SEO를 제공 할 수 있습니다. 생성된 각 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결 됩니다. 브라우저에서 페이지를 로드하면 해당 JavaScript 코드가 실행되고 페이지가 완전히 대화식으로 만들어 집니다. (이를 수화라고 합니다.) 사전 렌더링이 있으면 JavaScript가 비활성화 되더라도 앱을 볼 수 있습니다. Next.js가 없는 일반 React.js 앱인 경우 사전 렌더링이 없기 때문에 JavaScript가 비활성화 되면 앱을 볼 .. 2022. 2. 18. [React] useCallback useCallback도 useMemo와 마찬가지로 메모 이제이 션 기법을 사용하여 컴포넌트의 성능 최적화 해주는 React Hook입니다. 메모지 에이션이란? 이전에 이미 계산한 값을 캐싱해둠으로써 해당 값이 필요할 때마다 반복적으로 계산하는 게 아니라 메모리에서 꺼내서 재사용하는 최적화 기법을 말합니다. useMemo란? 첫 번째 인자로 들어온 Callback 함수에서 return 하는 값을 메모 이제이 션 해두었다가 재사용 하는 기법입니다. useCallback이란? useMemo와 마찬가지고 첫번째 인자로 들어온 Callback 함수를 재사용 하지만, useMemo와 다르게 callback 함수 자체를 메모이제이션 해두었다가 재사용하는 기법입니다. React에서 함수형 컴포넌트는 함수 자체이기 때문.. 2022. 2. 18. [Next.js] Assets(자산), Meta Data 및 CSS 다음 챕터로 넘어가기 전에 페이지 스타일과 코드를 다듬었습니다. Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 그 밖에도 도움이 될 수 있는 몇가지 스타일링 설명이 있으니 참고 Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-render.. 2022. 2. 17. [Next.js] 전역 CSS CSS 모듈은 구성 요소 수준 스타일에 유용합니다. 그러나 모든 페이지에서 일부 CSS를 로드 하는 경우도 Next.js에서도 지원합니다. 전역 CSS 파일을 로드하려면 pages/_app.js에서 설정합니다. _app.js는 다른 모든 페이지에서 공통적으로 사용하는 최상위 구성 요소입니다. 예를 들어 _app.js를 사용하여 페이지 사이트를 탐색 할 때 상태를 유지 할 수 있습니다. ❗pages/_app.js에 내용을 수정 할 때는 Ctrl+c로 서버를 중지 시킨 후 npm run dev로 다시 실행 시켜야 합니다. 전역 CSS 추가 Next.js에서는 전역 CSS 파일을 pages/_app.js에 가져와 추가 할 수 있습니다. 다른 곳에서는 전역 CSS를 가져 올 수 없습니다. 전역 CSS를 다른 곳.. 2022. 2. 17. [Next.js] CSS React에서 styled-components 라이브러리를 사용하여 JS 내에서도 CSS를 작성 할 수 있던 것처럼 Next.js에서는 CSS-in-JS라는 라이브러리의 styled-jsx를 사용하여 React 구성 요소 내에서 CSS를 작성하고, CSS 스타일의 범위를 지정(다른 구성 요소는 영향을 받지 않습니다.) 할 수 있습니다. Next.js에는 styled-jsx에 대한 지원이 내장 되어 있지만 styled-components 또는 Emotion과 같은 다른 인기 있는 CSS-in-JS 라이브러리를 사용 할 수도 있습니다. 1. CSS 작성 및 가져오기 Next.js에는 CSS 및 Sass에 대한 지원이 내장되어 있기 때문에 .css나 .scss로 파일을 가져 올 수 있습니다. 2. 레이아웃 구.. 2022. 2. 17. [Next.js] 외부 자바스크립트 외부 자바스크립트는 타사 소스에서 추가된 모든 스크립트를 나타냅니다. 일반적으로 분석, 광고 및 고객 지원 위젯과 같이 처음부터 작성할 필요가 없는 새로운 기능을 사이트에 도입하기 위해 외부 스크립트가 포함됩니다. 1. 외부 자바스크립트 추가하기 1) pages/posts/first-post.js에 아래와 같이 Head 태그를 삽입합니다. import Link from "next/link"; import Head from "next/head"; export default function FirstPost() { return ( First Post Back to home ); } 메타 데이터 외에도 가능한한 빨리 로드하고 실행 되어야 하는 스크립트는 일반적으로 이 스크립트에는 Facebook 소셜 플러그인.. 2022. 2. 17. [Next.js] Meta Data Next.js에서 HTML의 title 태그와 같은 페이지의 메타 데이터를 수정 하기 위해서는 어떻게 해야 할까요? title 태그는 HTML의 head 태그의 일부이기 때문에 Next.js에서 head 태그를 수정하는 방법에 대해 알아보겠습니다. Head 사용하여 index.js 수정하기 1) title을 수정 할 페이지를 엽니다. (pages/index.js) 2) 페이지 상단에 next/head의 Head를 import 하는 코드를 작성합니다. import Head from "next/head"; 3) 아래와 Head 요소 안에 title, link를 추가합니다. (그 외에도 meta keyword, meta content 등도 추가 할 수 있습니다.) import Link from "next/li.. 2022. 2. 17. [Next.js] Image [Next.js] Link 웹사이트에서 서로 다른 페이지를 연결할 때는 태그를 사용합니다. Next.js에서는 Link와 a 태그를 함께 사용합니다. 1) index.js에 JSX 구문에 아래 코드를 삽입합니다. import Link from "next/link"; export de.. eundol1113.tistory.com 위 포스팅에서 진행한 코드를 기반으로 진행 됩니다. 앞에서 추가한 두페이지에는 스타일이 없습니다. 페이지의 스타일을 지정하기 위하여 CSS를 추가 해보겠습니다. Next.js에는 CSS 및 Sass에 대한 지원이 내장되어 있습니다. 이 과정에서는 CSS를 사용합니다. 추가적으로 title 태그와 같은 페이지 메타 데이터 및 이미지와 같은 정적 자산을 처리하는 방법에 대해서도 설명합.. 2022. 2. 17. 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음 728x90
