Programming/nextjs

Next.js의 기본을 배우자 (3): react 에서 Nextjs로 까지 가보자!

조용장 2022. 4. 4. 19:00

저번 시간까지는 react까지 기본을 배워보았다. 이제 본격적으로 Nextjs를 배워 보며 알아봅시다!

https://nextjs.org/learn/foundations/from-react-to-nextjs

 

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

nextjs의 기초로 배우는 부분이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~

 

저번까지 했던 마지막 코드는 아래 코드와 같습니다.

여기서부터 다시 시작하는 사람들은 아래 코드를 이용하여 작업을 진행해도 됩니다.

<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/jsx">
      const app = document.getElementById("app")

      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>
      }

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

        const [likes, setLikes] = React.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>
        )
      }

      ReactDOM.render(<HomePage />, app)
    </script>
  </body>
</html>

본격적으로 시작하겠습니다.

 

Next.js 시작하기

이제부터는 unpkg.com에서 나오는 react, react-dom 스크립트가 필요하지 않습니다. 대신에 노드 패키지 관리자(Node Package Manager: npm)를 통해 패키지를 설치 해야합니다.

  • 참고: 컴퓨터에 node.js가 설치되어있어야 합니다. 설치하려면 여기를 클릭해주세요

설치를 한 상태라면 package.json을 아래와 같은 빈 오브젝트로 새 파일을 만듭니다.

{
}

이후 터미널에서 "npm install react react-dom next"를 입력하여 실행시킵니다.

저는 test 폴더에 작업을 했기 때문에 터미널 역시 test로 이동후 실행시켰습니다.

아래 그림처럼 실행을 후 실행이 완료되었다면 잘되었을 겁니다.

 

설치가 완료되었다면 package.json 파일 내부에 나열된 프로젝트 종속성을 아래 코드처럼 볼 수 있습니다.

{
  "dependencies": {
    "next": "^12.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

또한 종속 항목의 실제 파일을 포함된 node_modules 폴더도 있는 것을 확인할 수 있습니다.

이제 index.html에 필요 없는 코드들을 지워봅시다.

  1. react, react-dom 스크립트
  2. <html>, <body> 태그 : next.js에서 자동으로 생성되기에 필요 없음
  3. app 요소, ReactDom.render() 메서드
  4. Babel 스크립트 : Nextjs에는 jsx를 javascript 브라우저로 변환하는 컴파일을 가지고 있기에 필요 없음
  5. <script type="text/jsx"> 태그
  6. React.useState(0) 함수

위의 행을 삭제한 후 import { useState } from "react" 파일의 맨 위에 추가합니다.

이 작업을 마무리했다면 아래와 같은 코드가 되어야 합니다.

// index.html
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>
  )
}

이렇게 html 파일에 남아있는 코드들은 JSX만 남아 있기에 html에서 js 또는 jsx로 변경할 필요가 있다.

이제 Next.js 앱으로 완전히 변경하기 위해 해야 할 작업이 3가지가 더 남았다.

  • index.js 파일을 pages 폴더를 만들어 이동시킵니다.
  • 메인 React 구성 요소에 기본 내보내기를 추가하여 Next.js가 이 페이지의 기본 구성 요소로 렌더링 할 구성 요소를 구별할 수 있도록 합니다.
 export default function HomePage() {
  • 개발하는 동안 Next.js 개발 서버를 실행하려면 package.json 파일에 스크립트를 추가합니다.

주석 처리는 하는 것이 아니라 주석 아닌 부분이 추가되었다고 표현한 것입니다!

   // package.json
   {
    "scripts": {
        "dev": "next dev"
    },
     // "dependencies": {
     //   "next": "^11.1.0",
     //   "react": "^17.0.2",
     //   "react-dom": "^17.0.2"
     // }
   }

 

개발 서버 실행

모든 것이 작동하는지 확인하려면 터미널에서 npm run dev를 실행하고 브라우저에서 localhost:3000으로 이동하여 앱을 볼 수 있습니다. 그런 다음 코드를 약간 변경하고 저장합니다.

 

파일을 저장하면 브라우저가 변경 사항을 반영하고 자동으로 업데이트됩니다.

이 기능을 fast Refresh라고 합니다. 수정 사항에 대한 즉각적인 피드백을 제공하며 Next.js로 미리 구성되어 제공됩니다.

여기까지 따라왔다면 코드는 아래와 같을 겁니다!

 

package.json

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^12.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

 

pages폴더 안에 있는 index.js

import { useState } from 'react'

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

export default 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>
  )
}

실행했을 때 http://localhost:3000 에서 결과 화면

 

겉으로 보기에는 코드 행이 약간 줄었지만, 중요한 점은 React는 modern interactive UI를 구축하기 위해 필수적인 기본 요소를 제공하는 라이브러리라는 것입니다.

그러나 작성한 UI를 응용 프로그램에 결합하는 작업은 아직 몇 가지 남아 있습니다.

 

코드를 마이그레이션 하면서 Next.js 사용의 이점을 이미 느낄 수 있습니다. 

더 이상 생각할 필요가 없는 복잡한 툴링 구성인 babel 스크립트를 제거했고 Next.js에서 기대할 수 있는 많은 개발 경험 기능 중 하나인 Fast Refresh가 실제로 작동하는 것도 확인할 수 있었습니다.

 

완성!

첫 번째 Next.js 애플리케이션을 만드는 것을 축하드립니다!

요약하면 React와 Next.js에 대한 기본 지식을 알아보고 간단한 React 애플리케이션에서 Next.js 애플리케이션으로 마이그레이션(코드 변환)을 했습니다. 이제 다음 단계를 선택하여 수행할 수 있습니다.

  1. 첫 번째 앱을 만들어 Next.js를 사용하는 방법을 배운다. 이 과정에서는 주요 Next.js 기능을 소개하고 더 복잡한 프로젝트를 빌드하여 연습할 수 있습니다.
  2. 이 과정을 계속 진행하여 Next.js가 어떻게 작동하는지 자세히 알아볼 수 있다.

다음 시간에는 관련된 웹 개발 개념을 도입하여 Next.js가 어떻게 작동하는지 살펴보겠습니다.!

개념에 익숙해지면 기초를 확장하고 고급 Next.js 기능을 더 쉽게 배울 수 있습니다!!

 

 

'Programming > nextjs' 카테고리의 다른 글

Next.js의 기본을 배우자 (4): Next.js 작동 방식을 알아보자(2)  (0) 2022.04.06
Next.js의 기본을 배우자 (4): Next.js 작동 방식을 알아보자(1)  (0) 2022.04.05
Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(5)  (0) 2022.04.03
Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(4)  (0) 2022.04.02
Next.js의 기본을 배우자 (2): javascript에서 react 까지 알아보자(3)  (0) 2022.04.02

'Programming/nextjs'의 다른글

  • 현재글Next.js의 기본을 배우자 (3): react 에서 Nextjs로 까지 가보자!

관련글

댓글

티스토리툴바