Learn NEXT.js FOUNDATIONS

hyeseon han·2022년 3월 22일
0

Learn Nextjs

Next.js

  1. Rendering User Interfaces

    • 브라우저가 어떻게 UI를 생성하는 코드를 해석하는지
      • 유저가 웹페이지에 방문하면 서버는 아래같은 HTML 파일을 브라우저에 반환한다. Untitled
      • 그 다음 브라우저는 HTML을 읽고 DOM(문서객체모델)을 구성한다.

  2. What is the DOM?

    • HTML 요소의 객체 표현

    • 코드와 유저 인터페이스를 연결하는 다리 역할

    • 부모와 자식 관계같은 트리 구조

      Untitled

    • DOM methods와 자바스크립트와 같은 프로그래밍 언어를 사용하여 유저의 이벤트를 듣고 유저 인터페이스에 특정 요소를 선택, 추가, 업데이트 및 삭제함으로써 DOM을 조작할 수 있습니다.

    • DOM 조작을 사용하여 해당 요소의 스타일과 내용도 변경할 수 있다.

    • script 태그 안에서 DOM methods getElementById() 를 사용하여 id 별로 div 요소를 선택 할 수 있다.

    <html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>
    • DOM methods를 사용하여 새로운 h1 요소를 만들 수 있다.
    <html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
			// 'app' id의 div요소를 선택 
      const app = document.getElementById('app')

			// 새로운 h1 요소 생성
      const header = document.createElement('h1')

			// h1 요소의 새 텍스트 노드를 만든다
      const headerContent = document.createTextNode('Develop. Preview. Ship, 🚀')

			// h1 요소에 텍스트를 추가한다.
      header.appendChild(headerContent)

			// h1 요소를 div 안에 배치
      app.appendChild(header)
    </script>
  </body>
</html>

  1. HTML vs the DOM

    • 개발자 도구에서 DOM 요소를 보면 h1 요소가 포함되어 있다. 페이지의 DOM은 HTML 파일과 다르다 Untitled
      • HTML은 초기 페이지 내용을 나타내고, DOM은 JS코드에 의해 업데이트된 페이지 내용을 나타내기 때문이다.
    • 자바스크립트로 DOM을 업데이트하는 것은 굉장하고 상세하다. 아래 코드는 텍스트가 있는 <h1> 요소를 추가하기 위해 작성되었다.
      <!-- index.html -->
<script type="text/javascript">
  const app = document.getElementById('app')
  const header = document.createElement('h1')
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀')
  header.appendChild(headerContent)
  app.appendChild(header)
</script>
      • 이런 식의 코드 작성은 많은 시간이 필요하다. 컴퓨터가 DOM을 업데이트하는 방법을 알게해보자

  2. Imperative vs Declarative Programming 명령형 vs 선언형

    • 예시 코드는 명령형 프로그래밍. 피자 만드는 방법을 단계별로 설명
    • 선언형 프로그래밍. 피자를 주문. 리액트

  3. React: A declarative UI library

  4. Getting Started with React 

    <html>
  <body>
    <div id="app"></div>

		// unpkg.com 외부 사이트를 이용해 react 사용가능
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app')
    </script>
  </body>
</html>
    • 자바스크립트로 직접 DOM을 조작하는 대신, react-dom 의 ReactDOM.render() 메서드를 사용하여 app 요소 안의 h1 을 렌더링할 수 있다.
    <html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app')
      ReactDom.render(<h1>리액트🚀</h1>, app) // 에러 발생 Uncaught SyntaxError: Unexpected token '<'
    </script>
  </body>
</html>
    • 에러가 발생하는데 <h1>...</h1> 이 유효한 자바스크립트가 아니고 JSX 코드이기때문이다.

  5. What is JSX?

    • JSX는 HTML과 유사한 구문으로 UI를 설명할 수 있는 자바스크립트 구문 확장입니다.

    • JSX는 JS파일 내에 HTML과 같은 마크업을 쓸 수 있는 자바스크립트 구문 확장이다.

    • 자바스크립트가 HTML을 담당하기 때문에 리액트에서 렌더링 로직과 마크업이 같은 컴포넌트 안에 있다.

    • JSX는 세가지의 JSX 규칙을 따른다.

      1. Return a single root element
        • Virtual DOM에서 컴포넌트의 변화를 감지하여 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.
        • 컴포넌트에서 여러 요소를 반환하려면 하나의 부모 태그로 감싸야한다.
          <>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    ...
  >
  <ul>
    ...
  </ul>
</>
// <> ... </> 
// 빈태그는 React fragment라고 부른다.
// 브라우저 HTML 트리에 어떤 흔적을 남기지 않고 그룹화 할 수 있다.
      2. Close all the tags
        • JSX에서는 태그를 명시적으로 닫아야한다.
      3. camelCase all most of the things
        • JSX는 자바스크립트로 바뀌고, JSX로 작성로 속성(attributes)은 자바스크립트 객체의 키가 된다. 이런 속성이 변수로 읽어야하는 경우가 있다. 그러나 자바스크립트의 변수 이름에 제한이있다.
        • dash 나 class와 같은 reserved words는 사용할 수 없다. stroke-width ⇒ strokeWidth class ⇒ className

    • 브라우저는 JSX를 바로 이해하지 못 한다.

    • JSX코드를 일반 자바스크립트로 변환하려면 babel과 같은 자바스크립트 컴파일러가 필요하다.

    • Converting HTML to JSX

      <h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>
      export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve the spectrum technology
    </ul>
  );
}

  1. Adding Babel to your project

    • 스크립트 타입을 type=text/jsx 로 변경하여 변환할 코드르 Babel에게 알려야한다.
    <html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
		 <!-- Declarative Programming -->
		<script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>
     <!-- Imperative Programming -->
<script type="text/javascript">
  const app = document.getElementById('app')
  const header = document.createElement('h1')
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀')
  header.appendChild(headerContent)
  app.appendChild(header)
</script>

  1. Essential JavaScript for React

  2. React Core Concepts

    • 세가지 핵심 개념
      • Components
      • Props
      • State

  3. Building UI with Components

    UI tree

    Render

    • Components : 작은 빌딩 블록
      • 재사용 가능
      • 유지 보수 용이

  4. Creating components

    • React에서 컴포넌트는 함수이다.
    • script 태그 안에 header 라는 함수를 입력한다.
      <script type="text/jsx">
  const app = document.getElementById("app")

  function header() {
  }

  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>
    • 컴포넌트는 UI 요소를 반환하는 함수이다. 함수의 반환문 안에 JSX를 쓴다.
      <script type="text/jsx">
  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

  ReactDOM.render(, app)
</script>
    • 이 컴포넌트를 DOM으로 렌더하려면 ReactDOM.render() 메서드에 첫번째 인수로 전달한다.
      <script type="text/jsx">

  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

   ReactDOM.render(header, app)
</script>
    • 에러가 발생하는데 두가지 작업을 해야한다
      • 리액트 컴포넌트는 HTML과 JS를 구분하기 위해서 대문자로 표시야한다.
        <script type="text/jsx">

  const app = document.getElementById("app")

  function Header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

   ReactDOM.render(Header, app)
</script>
      • 리액트 컴포넌트는 HTML 태그를 사용할 때와 마찬가지로 <꺽쇠 괄호>를 사용한다.
        <script type="text/jsx">

  const app = document.getElementById("app")

  function Header() {
     return <h1>Develop. Preview. Ship. 🚀</h1>
   }

   ReactDOM.render(<Header/>, app)
</script>

  5. Nesting Components

    • 리액트 컴포넌트를 서로 중첩할 수 있다.
      function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>
}

function HomePage() {
  return (
    <div>
      {/* Nesting the Header component */}
      <Header />
    </div>
  )
}

ReactDOM.render(<Header />, app)

  6. Component Trees

    • 리액트 컴포넌트를 중첩하여 컴포넌트 트리를 구성할 수 있다. Untitled
    • HOMPAGE 컴포넌트에 HEADER APTICLE FOOTER 컴포넌트가 포함될 수 있다.
    • 각 컴포넌트는 자식 컴포넌트를 가질 수 있다.
    • HOMPAGE 가 최상위 컴포넌트로 ReactDOM.render() 메서드에 전달할 수 있다.

  7. Displaying Data with Props

    • 다른 텍스트를 전달하거나 미리 정보를 알 수 없는 외부 소스에서 데이터를 가져오는 경우
      • props 를 사용해 정보를 속성으로 컴포넌트에 전달할 수 있다. Untitled
    • 리액트에서는 단방향 데이터. 부모에서 자녀로 props 전달

  8. Using props

    • HOMPAGE 컴포넌트에서 HTML 속성을 전달 때와 같이 Header 컴포넌트에 title 을 props 로 전달할 수 있다.

  9. Using Variables in JSX

    • 정의한 변수를 사용하기 위해서는, JSX 마크업 안에서 직접적으로 자바스크립트를 쓸 수 잇는 JSX 문법인 curly braces  {} 을 사용할 수 있다.
      // function Header({title}) {
//  console.log(title)
return <h1>{title}</h1>
// }
    • curly braces  {} : JSX 안에 있을 때 자바스크립트로 갈수 있는 방법
      function Header(props) {
  return <h1>{props.title}</h1>
}
      function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>
}

  10. Iterating through lists

    • array.map() 메서드를 사용해서 배열을 반복하고 화살표 함수를 사용하여 목록의 이름을 맵핑할 수 있다.
      function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton']

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map(name => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  )
}
      • 이 코드를 실행하면 리액트에서는 key 가 없다는 경고를 줄 것이다. 왜냐하면 리액트는 DOM에서 업데이트할 요소를 알 수 있도록 배열 내의 항목을 고유하게 식별할 수 있는게 필요하기 때문이다.

  11. Adding Interactivity with State

    • state 상태와 event handler

  12. Listening to Events

    • 버튼을 클릭 했을 때 무언가 작동하기 위해서 onCick 이벤트를 사용할 수 있다.
      function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}
    • 리액트에서 이벤트의 이름은 camelCased이다. onCick 이벤트는 사용자 상호 작용에 응답하느데 사용할 수 있는 많은 이벤트 중 하나이다.

  13. Handling Events

    • 트리거가 될 때마다 이벤트를 처리하기 위한 함수를 정의할 수 있다. 반환문 앞에 handleClick() 함수를 만든다.
      function HomePage() {
  // ...

  function handleClick() {
    console.log("increment like count")
  }}

  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
     )
   }
    • onClick 이벤트가 트리거될 때 handelClick 함수를 호출할 수 있다.

  14. State and Hooks

    • 리액트는 hooks 라고 부르는 기능이 있다. Hooks 는 state 같은 추가적인 로직을 컴포넌트에 추가할 수 있게 한다.
    • state 를 사용해서 유저가 버튼을 클릭한 횟수를 저장하고 늘릴 수 있다. 이런 상태 관리 Hook은 useStae() 라고 부른다.
      function HomePage() {
  React.useState()
}
    • useState 는 배열을 반환하고 배열 디스트럭처링을 사용하여 컴포넌트 안의 배열 값에 접근하고 사용할 수 있다.
      function HomePage() {
  const [] = React.useState()

  // ...
}
    • 배열의 첫번째 아이템은 상태 값으로로, 아무 이름을 지정할 수 있다.
      function HomePage() {
  const [likes] = React.useState()

  // ...
}
    • 배열의 두번째 아이템은 함수를 업데이트 값이다. 이름 정할 때 set 을 붙인다.
      function HomePage() {
  const [likes, setLikes] = React.useState()

  // ...
}
    • likes 의 초기값을 0으로 정할 수 있다.
      function HomePage() {
  const [likes, setLikes] = React.useState(0)
}
    • 그런 다음 컴포넌트 내의 상태 변수를 사용하여 초기값이 작동하는지 확인할 수 있다.
      function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0)

  return (
    // ...
    <button onClick={handleClick}>Like({likes});</button>
  )
}
    • 이전에 정의한 handleClick() 함수 안에서 상태 업데이트 함수 setLikes 를 호출 할 수 있다.
      function HomePage() {
  // ...
  const [likes, setLikes] = useState()

  function handleClick() {
    setLikes(likes + 1)
  }}

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  )
}
    • 버튼 클릭은 handleClick 함수를 호출한다. 이 함수는 likes + 1 단일 인수를 사용하여 setLikes 상태 업데이트 함수를 호출한다.
    • 함수의 첫번째 파라미터로 컴포넌트에 전달해주는 props 와 달리 state 는 컴포넌트 안에 저장한다. state 상태 정보를 props 로 자식 컴포넌트에 전달할 수 있지만 state 상태를 업데이트하는 로직은 처음 생성된 state 컴포넌트 안에서 유지되어야한다.

  15. Managing State

  16. How to continue learning Reat

    참고

  1. Getting Started with Next.js

    import { useState } from 'react'
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>
}

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton']

  const [likes, setLikes] = useState(0)

  function handleClick() {
    setLikes(likes + 1)
  }

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map(name => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  )
}

How Next.js Works

  • Next.js는 애플리케이션을 구조화하기 위한 프레임워크와 개발 프로세스와 보다 빠른 최종 애플리케이션을 만들 수 있는 최적화를 제공한다.
    • The environment where your code runs: Development vs. Production
    • When your code runs: Build Time vs. Runtime
    • Where rendering happens: Client vs. Server

https://nextjs.org/docs/upgrading#minimum-nodejs-version

https://beta.reactjs.org/learn/adding-interactivity

https://beta.reactjs.org/learn/managing-state

https://beta.reactjs.org/learn

  • Module : 분리된 코드 조각. 시스테을 이루는 논리적인 일부분
  • Bundling : 기능 별로 모듈화한 파일들을 하나로 묶어주는 작업
  • Bundler : 여러 개의 파일을 묶어주는 도구. Webpack, Borserify, Parcel

  1. Development and Production Environments

    • How this applies to Next.js
    • The Next.js compiler
      • Next.js는 Rust로 작성된 컴파일러와 낮은 수준의 프로그래밍 언어, 최소화, 번들링 등에 사용할 수 있는 플랫폼인 SWC를 가지고 있기 때문이다.

  2. What is Compiling?

    • 개발자는 JSX, TypeScript, 모던 자바스크립 등으로 개발을 하는데 브라우저가 이를 이해하려면 자바스크립트로 컴파일해야한다.
    • 컴파일 1개의 언어로 코드를 취득해, 다른 언어 또는 그 언어의 다른 버전으로 출력하는 프로세스를 말한다. Untitled
    • Next.js에서 컴파일은 개발 단계에서 코드를 편집하고 빌드 단계의 일부로 실행되어 앱을 프로덕션을 위해 준비한다.

  3. What is Minifying?

    Untitled

    • 최소화 코드의 기능을 변경하지 않고 불필요한 코드 포맷과 코멘트를 지우는 과정이다. 파일 크기를 줄임으로써 프로그램의 성능을 향상시킨다.
    • Next.js에서는 자바스크립트와 CSS 파일이 자동으로 최소화된다.

  4. What is Bundling?

    Untitled

    • 번들링은 depndencies의 웹을 해결하고 브라우저에 최적화된 번들로 파일(모듈)을 병합하는 프로세스로 사용자가 웹 페이지를 방문했을 때 파일에 대한 요청 수를 줄이는 것을 목적으로 한다.
    • What is the difference between compiling and bundling in web development?
      • 컴파일은 코드를 브라우저에 파싱할 수 있도록 변환하는 것이고 번들은 파일 수를 줄이고 앱의 종속성을 해결한다.

  5. What is Code Splitting?

    • 애플리케이션은 다른 URL에서 액세스할 수 있게 여러 페이지로 나눈다. 이런 각 페이지는 애플리케이션의 entry point가 된다. Untitled
    • 코드 분할은 각 entry point에 필요한 작은 chunks로 애플리케이션의 번들을 나누는 과정이다. 해당 페이지를 실행하는데 필요한 코드로만 로드하여 애플리케이션의 초기 로딩 시간을 향상시키는 목적이 있다.
    • Next.js는 코드 분할을 기본적으로 지원한다.
    • pages./ 디렉토리 안의 각 파일은 빌드 단계에서 자바스크립트 번들로 자동적으로 코드를 분할한다.
      • 페이지 간에 공유되는 코드는 추가 탐색시 동일한 코드를 다시 다운로드하지 않도록 다른 번들로 분할한다.
      • 초기에 페이지 로드 후에 Next.js는 유저가 탐색할 수 있는 다른 페이지로 코드를 사전에 로드한다.
      • Dynamic imports는 처음에 로드된 코드를 수동으로 분할하는 방법이다.

  6. Build Time and Runtime

    • Build time
      • 빌드 타임은 production으로 애플리케이션 코드를 준비하는 일련의 단계에 지정된 이름이다.
      • 애플리케이션을 빌드할 때, Next.js는 코드를 실가동용으로 최적화된 파일로 변환하여 서버에 도입혀여 유저가 사용할 수 있도록 한다.
        • 정적으로 생성된 페이지의 HTML 파일
        • 서버에서 페이지를 렌더링 하기위한 자바스크립트 코드
        • 클라이언트에서 상호작용하는 페이지를 만드는 자바스크립트 코드
        • CSS 파일
    • Runtime(or request time)
      • 런타임은 애플리케이션이 구축 및 배포된 후에 유저의 요청에 따라 애플리케이션이 실행되는 기간을 의미한다.
      • 응용프로그램이 동작되어지는 때

  7. Client and Server

    • 웹 응용 프로그램에서 클라이언트는 애플리케이션 코드에 대한 요청을 서버로 보내는 유저의 장치의 브라우저를 참조한다. 그런 다음 서버로 부터 받은 응답을 사용자가 상호작용할 수 있는 인터페이스로 변환한다.
    • 서버는 애플리케이션 코드를 데이터 센터에 저장하는 컴퓨터이다. 클라이언트의 요청을 받고 적절한 응답을 보낸다.

  8. What is Rendering?

    • 리액트에서 작성한 코드를 UI를 나타내는 HTML로 변환하기 위해 꼭 해야하는 프로세스가 렌더링이다.
    • 렌더링은 클라이언트나 서버에서 수행할 수 있다. 빌드타임 또는 런타임 전에 미리 발생한다.
    • Next.js는 세가지 방식의 렌더링이 있다.
      • Sever-Side Rendering
      • Static Site Generation
      • Client-Side Rendering
    • Pre-Rendering
      • SSR, SSG 는 Pre-Rendering이다 왜냐하면 클라이언트에게 결과를 보내기 전에 외부 데이터를 가져오고 리액트 컴포넌트(구성요소)의 HTML 변환이 이루어지기 때문이다.
    • Client-Side Rendering vs Pre-Rendering
      • 표준 리액트 애플리케이션에서 브라우저는 UI를 구축하는 자바스크립트와 함께 서버로부터 빈 HTML을 받는다. 이 것을 초기 렌더링이 유저의 디바이스에서 일어나기 대문에 client-side rendering이라고 부른다. Untitled
      • Next.js pre-renders는 기본적으로 모든 페이지를 미리 렌더링합니다. pre-rendering은 유저의 디바이스에 자바스크립트에 의해 모두 생성되는 것이 아니라 서버에서 미리 생성되는 것을 뜻한다. Untitled
      • client-side로 렌더링된 앱은 렌더링이 되는 동안 빈 페이지를 볼 수 있다. pre 렌더링된 앱은 유저가 구축된 HTML을 볼 수 있다.
    • Server-side Rendering
      • 서버사이드렌더링을 사용하면 요청 별로 페이지의 HTML이 서버에 생성된다. 생성된 HTML, JSON data 그리고 자바스크립트 명령을 클라이언트로 보낸다.
      • 클라이언트에서 HTML은 빠른 non-interacitve 페이지를 보여주기위해 사용되지만 리액트는 JSON data와 자바스크립트 명령을 interactive 컴포넌트로 만들기위해 사용한다.이 과정을hydration이라고 말한다.
      • getServerSideProps
    • Static Site Generation
      • static site Generation은 HTML은 서버에서 생성되지만 서버사이드렌더링과 달리 런타임에는 서버가 없다. 빌드 될 때 내용물이 한번 생성되고 앱이 배치될 때, HTML은 CDN과 각 요청을 위해 재사용 된다.
      • getStaticProps
      • 사이트를 만든 후에 Static Regeneration을 사용해서 정적 페이지를 만들거나 업데이트할 수 있다. 만약 데이터가 변경되면 사이트 저네를 다시 만들어야할 필요는 없다.

  9. What is the Network?

    • Next.js의 경우 앱의 코드를 원본 서버, CDN(content deliver networks), Edge 분배할 수 있다.
    • Origin Servers
      • 서버는 코드의 원래 버전을 저장하고 실행하는 메인 컴퓨터이다.
      • origin 이라는 용어는 CDN 서버와 Edge 서버 같은 코드를 배포할 수 있는 다른 장소와 구별하기 위해 사용된다.
    • Content Delivery Network
      • CDN은 전세개의 다양한 곳에 정적 내용을 저장하고 클라이언트와 origin 서버 사이에 정적 내용물을 위치시킨다. 새로운 요청이 올 때 유저와 가까운 위치에 CDN이 캐시된 결과를 응답한다. Untitled
      • 각 요청에 대해 계산할 필요가 없으므로 origin의 로드가 줄어든다. 지리적으로 가까운 장소에서 응답을 보내므로 빠르다.
      • Next.js에서 pre-rendering을 미리 할 수 있기 때문에 CDN은 정적 결과를 저장하기에 잘 맞다.
    • The Edge
      • Edge는 유저에게 가장 가까운 네트워크의 가장자리에 대한 개념이다. CDN은 네트워크의 가장자리에정적 내용물을 저장하기 때문에 the Edge로 간주된다.
      • Edge에서 코드를 실행하면 기존에 클라이너트 측 또는 서버 측에서 수행하던 작업 중 일부를 Edge로 이동할 수 있다. 클라이언트에 송신되는 코드의 양의 감소해 유저의 요구의 일부가 원래의 서버로 돌아갈 필요가 없어지기 때문이다.
profile
hyeseon han
이전 포스트

백준 11655번 node

다음 포스트

Lerna와 Workspaces, MonoRepo

0개의 댓글