react next 공부하기(앱 만들기) - 3

React 로 빌드하기 위해 고려해야하는 사항들

• webpack 과 같은 번들러를 사용하여 번들링 되고 babel 과 같은 컴파일러 사용하여 변환
• 코드 분할과 같은 production 최적화
• 성능 및 seo 를 위해 일부 페이지를 정적으로 사전렌더링 할 수 있다 -> serverside rendering, client side rendering 둘다 가능
• React 앱을 data store에 연결하기 위해 서버측 코드를 작성해야할 수 있다.

Next.js

• 위에 언급한 문제들에 대한 솔루션 제공
  • 직관적인 페이지 기반 라우팅 시스템
  • pre-rendering, static-site-generation(정적 생성 ssg), server-side-rendering
  • 자동 코드분할 (페이지 로드 속도 up)
  • 최적화된 prefetching를 통한 클라이언트 측 라우팅
  • 내장 css 및 sass 지원 및 모든 css-in-js(대표적 css-in-js 라이브러리로는 styled component) 라이브러리 지원
  • fast refresh를 지원하는 개발환경
  • serverless 함수로 api endpoint 를 빌드하기 위한 api 경로
  • 완전한 확장 기능

seo

검색엔진 최적화

ssg

static site generate (정적 사이트 생성)

 

Next.js 앱 만들기 시작

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

뒤에 써져있는 github 링크가 기본코드이다.

서버 실행

$ npm run dev

 

빠른새로고침 기능

서버를 실행시킨 상태에서 소스 내부를 수정하면 바로 텍스트가 변경된다.

 

학습내용

• 통합파일 시스템 라우팅을 사용하여 페이지 단위를 만듦
• Link 구성요소를 사용하여 페이지 간에 client-side navigation 을 활성화
• 코드 분할 및 prefetching에 대한 기본 제공 지원

 

Pages in Next.js

• page는 'pages' 디렉토리의 파일에서 export 한 React 컴포넌트
  ex) 'pages' 아래에 'posts/first-posts.js' 파일을 만들고 내부에서 아래 코드를 입력하고 실행시키면, {url주소}/posts/first-post 입력 시 해당 페이지가 표시된다.

export default function FirstPost() {
  return <h1>First Post</h1>;
}

 

링크 컴포넌트

html에서 사용하는 <a> 태그 대신에 <Link> 태그를 사용한다. {' '} 를 더해 띄어쓰기를 만들어준다.

Link 컴포넌트가 a 태그와 같은 역할을 하기 때문에 href 로 가려는 endpoint 를 입력하고 안에 <a> 태그를 넣어주면 된다.

// navigation 을 사용하기 위해서 next 에서 제공하는 link를 import
import Link from 'next/link';

...

//다음과 같이 하면 페이지 이동 가능

		...
        <h1 className="title">
          Read{' '}
          <Link href="/posts/first-post">
            <a>this page!</a>
          </Link>
        </h1>
        ...

 

Client-Side Navigation

• client side navigation 은 브라우저에서 수행하는 기본 navigation 보다 빠른 javascript 를 사용하여 page transition(전환) 이 일어난다.
• 확인방법: html 에 배경색을 설정한 후 페이지 이동을 해보면 화면 깜빡임 없이 배경이 계속 노란색이다.
  a 태그로 하면 페이지 전체 새로고침이 일어나기 때문에  깜빡거린다.
• 장점:
  • 요청한 페이지 코드만 로드하므로 특정 페이지에서 오류가 발생해도 다른 페이지에는 문제가 없다.
  • 별도의 라우팅 라이브러리가 필요하지 않음
• Link 구성 요소가 브라우저의 viewport 에 나타날 때마다 next.js 가 background 에서 자동으로 링크되어있는 페이지들의 코드를 prefetch 한다. --> 자동 최적화
• 외부 링크로 보내는 방법: Link 말고 a 태그 사용하기