[React] 개발 환경 구축

Node.js 설치

React는 Node.js를 기반으로 동작한다. 따라서 먼저 Node.js를 설치해야 한다. Node.js는 공식 웹사이트에서 다운로드하여 설치할 수 있다. 설치가 완료되면 Node.js와 함께 npm(Node Package Manager)도 함께 설치된다. npm은 JavaScript 패키지를 설치하고 관리하는 도구이다. React 애플리케이션을 개발하려면 npm을 사용하여 React와 관련된 패키지를 설치하고 프로젝트를 관리할 수 있다.

​

React를 사용하기 위해 Node.js를 설치하려면 다음 단계를 따른다:

(1) Node.js 공식 웹사이트(https://nodejs.org) 에 접속하여 Node.js를 다운로드한다.

​

(2) 다운로드한 설치 파일을 실행하여 Node.js를 설치한다. 설치 과정에서 npm도 함께 설치된다.

​

(3) 설치가 완료되면 명령 프롬프트 또는 터미널에서 npm -v 명령을 실행하여 npm이 제대로 설치되었는지 확인할 수 있다. 버전 정보가 출력되면 설치가 성공적으로 완료된 것이다.

​

​

React app 생성

1. React 프로젝트 생성하기:

먼저, 터미널 또는 명령 프롬프트에서 원하는 디렉토리로 이동한 후, 다음 명령을 실행하여 React 프로젝트를 생성한다.

C:\app\ReactProjects>npx create-react-app hello-world-app

최신 버전의 Create React App은 npx를 사용하여 전역 설치 없이도 프로젝트를 생성할 수 있다. npx는 npm 5.2.0 버전부터 기본적으로 함께 제공되며, create-react-app 패키지를 일시적으로 설치하여 프로젝트를 생성하는 데 사용된다.

​

혹시 npm 버전이 낮아 오류가 발생하면, 다음 명령을 실행하여 npm을 업그레이드한다.

C:\app\ReactProjects>npm install -g npm@latest

​

2. 프로젝트 디렉토리로 이동하기:

React 프로젝트 생성이 완료되면 다음 명령을 사용하여 생성된 프로젝트 디렉토리로 이동한다.

C:\app\ReactProjects>cd hello-world-app​

3. Hello 컴포넌트 만들기:

src 디렉토리에 Hello.js 파일을 생성하고 아래의 코드를 추가한다.

import React from 'react';

function Hello() {
  return <h1>Hello World!</h1>;
}

export default Hello;​

4. App 컴포넌트 수정하기:

src 디렉토리에 있는 App.js 파일을 열고 아래와 같이 수정한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

“C:\app\ReactProjects\hello-world-app\src” 에는 다음과 같은 파일들이 존재하게 된다.

C:\app\ReactProjects\hello-world-app\src>dir
 C 드라이브의 볼륨에는 이름이 없습니다.
 볼륨 일련 번호: E4B2-1EE3

 C:\app\ReactProjects\hello-world-app\src 디렉터리

2023-07-22  오후 02:30    <DIR>          .
2023-07-22  오후 02:30    <DIR>          ..
2023-07-22  오후 01:45               564 App.css
2023-07-22  오후 02:31               166 App.js
2023-07-22  오후 02:23               529 App.js.bak
2023-07-22  오후 01:45               246 App.test.js
2023-07-22  오후 02:30               111 Hello.js
2023-07-22  오후 02:30                 0 Hello.js.bak
2023-07-22  오후 01:45               366 index.css
2023-07-22  오후 01:45               535 index.js
2023-07-22  오후 01:46             2,632 logo.svg
2023-07-22  오후 01:45               362 reportWebVitals.js
2023-07-22  오후 01:46               241 setupTests.js
              11개 파일               5,752 바이트
               2개 디렉터리  159,881,949,184 바이트 남음

C:\app\ReactProjects\hello-world-app\src>

5. 결과 확인하기:

터미널에서 다음 명령을 실행하여 React 앱을 시작한다.

C:\app\ReactProjects>hello-world-app\npm start

이제 웹 브라우저에서 http://localhost:3000 주소로 접속하면 “Hello World!”가 출력되는 화면을 볼 수 있다.

코드 편집기 선택

React 애플리케이션을 개발하기 위해 코드 편집기를 선택해야 한다. 대표적인 코드 편집기로는 Visual Studio Code, Atom, Sublime Text 등이 있다. 원하는 코드 편집기를 설치하고 설정.