Next.js를 사용하는 이유

react의 동작원리는 브라우저가 front server에서 html,js 파일을 최초로 1회만 받아오고, 이후 페이지 요청 시 backend sever에서 직접 data를 받아온다. → CSR(SPA) 방식

하지만 웹서비스에 필요한 모든 정적 리소스를 한 번에 다 다운로드해야하기 때문에 초기 구동 속도가 상대적으로 느리다. (결국 브라우저가 프론트로 부터 파일을 받아올때 현제 페이지에서 필요하지 않은 컴포넌트까지 다 불러오게 되는 단점이 있다)

이는 code spliting과 server side rendering을 통해 어느 정도 극복할 수 있는데, 이를 지원해 주는 도구가 Next.js라는 라이브러리이다.

Next.js를 사용하게 되면, 처음 접속할 때만 서버 사이드 렌더링(SSR방식)을 따르고 (브라우저가 접속한 url에 대하여 front server에 요청하면, front에서 url에 대응하는 api 요청을 백엔드에게 직접 요청하고, 백엔드에서는 요청된 api에 맞는 데이터를 데이터베이스 조회를 통해 그때그때마다 결과값을 던져줌), 그 이후에는 react의 동작방식인 CSR(SPA) 방식을 따른다.

다시 정리하면, 초기 페이지 로딩에 대해서는 SSR방식으로 동작시킬 수 있고, 이후의 요청에 대해서는 CSR방식으로 동작하기 때문에 SSR방식의 장점인 SEO(검색 엔진 최적화)에 유리하면서도 CSR의 이점을 활용할 수 있다. ✨

Next.js 실행

• npm init → packge.json 생성
• npm i next@9 → 9버전 next 설치 : node modules 생성
• package.json 아래와 같이 생성

  {
    "name": "react-nodebird-front",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "dev": "next" //명령어를 한 개의 키워드로 줄일 수 있어요!
    },
    "author": "누가 개발했는 지 자신의 이름을 작성하세요",
    "license": "ISC",
    "dependencies": {
      "next": "^9.5.5"
    }
  }

• current folder structure

  📦front
   ┣ 📂pages # pages 폴더를 만들어줍니다
   ┃ ┗ 📜index.js
   ┣ 📜.editorconfig
   ┣ 📜package-lock.json
   ┗ 📜package.json

• index.js

  const Home <= () => {
      return (
          <div>Hello,Next!</div>
      );
  }
  
  export default Home;

• 이 상태에서 서버를 켜보면 hello, Next 가 화면에 잘 출력되는 것을 볼 수 있다
  
  

Page와 레이아웃

pages 폴더

• pages폴더 내에 작성한 파일들은 파일이름에 맞추어 url을 맵핑해줌
• 라우터 설정 없이 페이지 라우팅 자동 설정 가능
• 만약 pages안에 새로운폴더를 또 만들고 그 안에 파일을 만든다면?
  • localhost:3000/새로운폴더이름/파일이름 형태로 접속됨
  • 그러니 결국 슬래시(/) 기준으로 폴더를 만들어 나아가면 페이지를 쉽게 라우팅할 수 있음
• 동적 라우팅 - next9버전에서 새로 추가된 것

  📦pages
   ┣ 📂about
   ┃ ┣ 📜[name].js #이렇게 대괄호를 사용해 동적 라우팅을 사용할 수 있음
   ┃ ┗ 📜koeunseo.js
   ┣ 📜index.js
   ┣ 📜profile.js
   ┗ 📜signup.js

layout

• 보통 레이아웃은 모든 페이지에서 공통적으로 사용하기 때문에 components 폴더를 따로 만들어서 재사용성을 높인다
• 현재 폴더구조

  📦front
   ┣ 📂components #components 폴더 새로 추가!
   ┃ ┗ 📜AppLayout.js
   ┣ 📂pages
   ┃ ┣ 📜index.js
   ┃ ┣ 📜profile.js
   ┃ ┗ 📜signup.js
   ┣ 📜.editorconfig
   ┣ 📜package-lock.json
   ┗ 📜package.json

• AppLayout.js

  • 이점 : 이렇게 레이아웃도 컴포넌트로 따로 빼주면, 각 페이지에 조립하듯 컴포넌트를 삽일할 수 있고, 페이지별로 다른 레이아웃을 설정하고 싶을때에도 쉽게 조작이 가능하다. (또 다른 레이아웃을 컴포넌트로 빼주면 됨)

    import Proptypes from 'prop-types'
    const AppLayout = ({children}) => {
        return (
            <div>
                <div>공통메뉴</div>
                {children}
            </div>
        )
    };
    
    AppLayout.Proptypes = {
        children: Proptypes.node.isRequired 
    }
    
    export {AppLayout}

  • props로 넘겨주는 데이터들은 propstype으로 검사를 해준다.

  • children으로 들어오는 props의 type은 (react의) 노드

    • 노드는 화면에 그려질 수 있는 모든 것들을 의미합니다

Link와 eslint

Link

• next는 자체적인 라우터가 있음

eslint

• npm i eslint -D
  • -D 옵션 : 개발할 때만 eslint를 쓴다는 의미. 왜? 사용자는 eslint와 무관하다. 단순히 코드를 깔끔히 하기 위해서 사용하는 것
• npm i eslint-plugin-import -D
• npm i eslint-plugin-react -D
• npm i eslint-plugin-react-hooks -D

→ 필자는 해당링크를 통해 vscode에 eslint와 prettier를 설정해주었다! 👩🏻‍💻🌟

QnA

• 프론트 서버와 백엔드 서버는 도메인(포트)이 다르기 때문에 cors 설정이 필요함.
• 브라우저-프론트 : cors 필요없음
• 프론트-백엔드 : cors 필요함
• next는 code spliting 방식이 적용되기 때문에, 처음 접속 이후에도 지속적으로 조금씩 브라우저-font 간 요청이 일어남.
• react를 사용하면 고객이 웹앱을 쓰는 것 같은 경험을 얻을 수 있음
• 사용자 경험(UX)이 중요한다면? - react가 필요함
• 검색 엔진이 필요한가? & 초기 로딩을 없애고자 할 때 - 서버사이드렌더링이 필요함
  • 서버에서 캐싱할 수 있음. 서버에서 렌더링을 맨날 하는게 아니라 캐싱되어있는 데이터를 바로 받아올 수도 있음 → 더더욱 속도가 빨라짐 !