Next.js 입문을 위한 javascript, react 공부

Next.js

https://selfdevhelper.tistory.com/18

자기계발 서비스 퀘스트(가제) 개발 프레임워크 정하기

개발 프레임워크에는 여러가지가 있지만 어디에 어떻게 쓰이는지 이번 기회에 알아보려고 합니다. 제가 개발하려는 서비스는 아래와 같은 요구사항들을 만족해야되는데요. https://selfdevhelper.tist

selfdevhelper.tistory.com

위 게시글에서 사용하기로 마음먹었던 Next.js 관련 입문과정을 기록해보려고 합니다.

저는 React도 잘 모르기 때문에 관련된 설명도 포함되어 있습니다.

우선 Next.js 공식 홈페이지는 아래 주소로 접속할 수 있습니다.

https://nextjs.org

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

nextjs.org

Rust-based로 되어있다는 것을 보니 더욱 마음에 듭니다.

Start Learning을 누르면 위와 같은 화면이 나오는데 문서를 읽을수록 왼쪽 상단에 포인트를 주는 것이 보입니다.

50점에 대한 의미나 점수를 많이 모은다고 뭘 주진 않겠지만 점수가 쌓여가는 모습이 자신이 더 많은 내용을 읽었고 Next.js 고수가 되어간다는 느낌을 주기 때문에 매우 효과적인 넛지라고 생각합니다.

아래 게시글에서도 다루었던 내용과 비슷하네요.

https://selfdevhelper.tistory.com/17

인생을 레벨로 평가하는 방법에는 무엇이 있을까?

자신의 상태의 종합 평가 점수 자기계발 서비스를 이야기하면서 결국 자신의 상태를 알 수 있는 상태창이 있어야 지속적으로 성장하고 나의 능력치를 높이려는 노력을 하게될텐데 게임과 다르

selfdevhelper.tistory.com

첫 페이지를 지나면 Next.js와 React에 대한 설명이 나옵니다.

아래는 홈페이지 내용을 요약 번역한 내용입니다.

Next.js란?

Next.js는 웹 애플리케이션을 빠르게 만들기 위해서 빌딩 블록을 제공해주는 React Framework입니다.

빌딩 블록은 모던 애플리케이션을 만들기 위해 필요한 것들인데 예를 들면 다음과 같습니다.

사용자 인터페이스 - 사용자가 애플리케이션을 소비하고 상호작용하는 방식
라우팅 - 사용자가 애플리케이션의 다른 부분을 탐색하는 방법
데이터 가져오기 - 데이터가 저장되는 위치와 데이터를 가져오는 방법
렌더링 - 정적 또는 동적 컨텐츠를 렌더링하는 시기와 위치
통합 - CMS, 인증, 결제 등의 서드파티 서비스를 사용하는 방법과 연결하는 방법
인프라 - 애플리케이션 코드를 배포, 저장 및 실행하는 위치(Serverless, CDN, Edge 등)
성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법
확장성 - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션이 적응하는 방법
개발자 경험 - 팀이 애플리케이션을 구축하고 유지 관리하는 경험

React는 상호작용 가능한 사용자 인터페이스를 만들기 위한 자바 스크립트 라이브러리입니다.

React는 라이브러리이기 때문에 개발자가 자유롭게 무엇이든 만들 수 있게 하여 React기반의 여러 가지 서드파티 도구와 솔루션을 생산하게 하는 생태계를 갖추게 되었습니다. 하지만 새로운 애플리케이션을 처음부터 만들기 위해서는 꽤나 많은 노력이 필요하기 때문에 개발자들에게는 다른 어려움으로 다가왔습니다.

Next.js는 React Framework로서 애플리케이션을 만들기 위한 빌딩 블록을 제공합니다. 프레임워크를 사용함으로써 개발자는 빠르고 쉽게 원하는 애플리케이션의 요구사항을 만족하고 기능이 풍부한 애플리케이션을 만들 수 있도록 합니다.

자바스크립트에서 리액트까지

웹 페이지에 접속하면 서버는 HTML file을 제공하고 웹 브라우저는 HTML code를 기반으로 Document Object Model(DOM)을 생성합니다. DOM은 HTML 구성요소들을 오브젝트로 표현한 것으로 트리구조를 갖고 있는데 이를 기반으로 사용자 인터페이스를 만듭니다. 그리고 DOM method를 이용해서 웹페이지 내용을 바꿀 수 있습니다.

위에서 말한대로 DOM method를 이용하여 명령형 프로그래밍으로 사용자 인터페이스를 만들 수 있지만 너무 번거롭습니다. 그래서 React는 명령형 프로그래밍에 반대되는 선언형 프로그래밍 라이브러리를 제공하여 좀 더 간편하게 애플리케이션을 만들 수 있도록 합니다. 예를 들면, '쌀이나 밀로 만든 길쭉한 모양의 떡에 고춧가루와 고추장, 간장 그리고 설탕 등으로 만든 양념장을 넣어서 만든 요리'라고 표현하는 것과 '떡볶이'라고 표현하는 차이라고 생각하면 되겠습니다.

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <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>
  </body>
</html>

<!-- index.html -->
<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>
    <script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

리액트 코드의 Babel Script는 render 함수인자에 있는 <h1> 태그들을 자바스크립트에서 인식하기 위해 사용하는 자바스크립트 컴파일러를 사용하겠다는 코드입니다.

결론적으로 script 내부 코드를 봤을 때 리액트 기반 코드가 간결하다는 것을 알 수 있습니다.

리액트를 위한 필수 자바스크립트

리액트 주요 개념

Components
- 사용자 인터페이스를 세분화 했을 때의 작은 빌딩 블록
- 미디어 컴포넌트를 예로 들면 이미지, 설명, 버튼 등이 있음
- 컴포넌트 이름은 대문자로 시작해야함
- HTML tag처럼 사용할 수 있음
- 컴포넌트 안에 컴포넌트를 넣을 수 있음
```
function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}
```
Props
```
function Header({ title }) {
  return <h1>{title}</h1>;
}
```
State
- 컴포넌트의 상호작용을 위해 이벤트를 받아들이거나 컴포넌트의 상태를 변경할 수 있음
```
function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);

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

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}
```

리액트 계속 공부하기

How React handles renders and how to use refs
How to manage state
How to use context for deeply nested data
How to use React API hooks such as useEffect()
React Documentation

리액트에서 Next.js까지

리액트 샘플 코드

// index.html

<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 를 사용하기 위해서는 node.js를 설치한 후 터미널에서 npm을 사용하여 라이브러리를 추가하면 됩니다. node.js 설치

npm install react react-dom next

그러면 package.json 파일에 dependencies가 추가된 것을 볼 수 있습니다.

{
  "dependencies": {
    "next": "^13.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

그리고 기존 파일 이름을 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>
  );
}

그 후에 해당 파일을 pages라는 폴더로 이동시키고 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의 주소로 웹페이지가 실행되는 것을 볼 수 있습니다.

이전 리액트 코드와 비교하면 여러가지 참조 스크립트가 없어지고 코드가 간결하게 바뀐 것을 볼 수 있으며 새로고침할 때 빠르게 이루어지는 등 next.js를 쓰는 장점 중에 일부분을 확인할 수 있습니다. 이후에는 https://nextjs.org/learn/basics/create-nextjs-app 코스에서 next.js의 주요 특징들을 소개하며 좀 더 복잡한 프로젝트를 만들며 연습하면 됩니다.

'자기계발 공부' 카테고리의 다른 글

React Native 시작하기 (0)	2023.06.24
AWS EC2 + 가비아 Domain 연결하기 (0)	2023.04.29
접속이 잘 되던 EC2 기반 웹서비스 접속이 안 될 경우 (0)	2023.04.14
Svelte, Svelte Kit 학습자료 정리 (0)	2023.04.07
Youtube API 사용하기 (0)	2023.03.31

나의 자기계발 도우미

Next.js 입문을 위한 javascript, react 공부

Next.js

Next.js란?

자바스크립트에서 리액트까지

리액트를 위한 필수 자바스크립트

리액트 주요 개념

리액트 계속 공부하기

리액트에서 Next.js까지

'자기계발 공부' 카테고리의 다른 글

댓글

티스토리툴바

Next.js 입문을 위한 javascript, react 공부

Next.js

Next.js란?

자바스크립트에서 리액트까지

리액트를 위한 필수 자바스크립트

리액트 주요 개념

리액트 계속 공부하기

리액트에서 Next.js까지

'자기계발 공부' 카테고리의 다른 글

관련글

댓글

티스토리툴바