소개

이 기사에서는 React의 개발 환경 구축 절차에 대해 설명하고 싶습니다.
구축의 흐름으로서

Node.js 설치

패키지 관리자 yarn 설치

creat-react-app 설치

구축한 환경에서 Hello World를 표시해 보자

1. Node.js 설치

먼저 아래 URL을 클릭합니다.
htps : // 그래서 js. 오 rg / 그럼 /

URL을 열면 LTS 버전과 최신 버전이 있습니다.
간단히 설명하면 LTS 버전(Long Time Support의 약자)은 장기 지원을 받을 수 있는 것
한편, 최신판은 지원 기간이 짧지만, 최신의 것을 이용할 수 있는 것입니다.

이 기사에서는 LTS 버전을 다운로드하여 진행합니다.

노드를 다운로드하고 설치가 완료되면 터미널에서 다음 명령을 입력하여 노드가 설치되어 있는지 확인합니다. Node 버전이 표시되면 괜찮습니다.

$ node -v
v14.15.1

2. yarn 설치

node의 패키지 매니저인 yarn을 인스톨 해 갑니다.
npm이라는 패키지 매니저가 Node를 인스톨한 시점입니다만, npm보다 yarn 쪽이 보다 빠르고 신뢰도가 높은 것이 되어 있으므로, yarn을 인스톨 해 갑니다.
yarn을 설치하는 경우 터미널에서 다음 명령을 실행하십시오.

$npm install --global yarn
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ [email protected]
updated 1 package in 1.698s

yarn이 설치되어 있는지 여부는 아래 명령을 실행하고 버전이 표시되면 괜찮습니다.

$yarn --version
1.22.10

3. create-react-app 설치

기존의 react를 이용한 개발에서는 Babel이나 webpack 등 다양한 패키지를 매뉴얼로 인스톨 할 필요가 있었기 때문에, 굉장히 수고가 걸렸습니다. 그러나 creat-react-app를 설치하면 이러한 문제를 해결할 수 있으며 필요한 패키지를 쉽게 설치할 수 있습니다.
다음 명령을 실행하여 설치할 수 있습니다.

$yarn global add create-react-app

4. 구축한 환경에서 Hello World를 표시해 본다

터미널에서 다음 명령을 실행하여 응용 프로그램을 만듭니다.
만들 위치는 선택 사항이 될 수 있습니다.

$npx create-react-app helloworld

아래와 같은 메시지가 표시되면 OK입니다.

success Uninstalled packages.
✨  Done in 46.14s.

Created git commit.

Success! Created amplifyapp at /Users/*******/helloworld
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd helloworld
  yarn start

Happy hacking!

작성한 프로젝트 아래로 이동하여 아래의 start 명령을 실행합니다.

$cd helloworld
$yarn start

실행 후 브라우저가 시작되고 다음 화면이 표시되면 OK입니다.


지금까지 완료되면 helloworld/src 아래에 있는 App.js를 엽니다.
App.js를 열면 다음과 같은 코드가 작성되었다고 생각합니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.js의 내용을 모두 지우고 다음과 같이 소스를 작성해 봅시다.

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

수정하여 브라우저에 아래와 같이 표시되어 있으면 OK입니다.


다음에 React를 사용하여 카운트 앱을 만들고 싶습니다.
React로 카운트 앱 만들기