리액트 환경 설정 가이드: Node.js 설치부터 프로젝트 생성까지

리액트를 시작하는 데 필요한 환경 설정을 알아보겠습니다. 이 글에서는 Node.js 설치부터 리액트 프로젝트를 생성하는 과정까지 세부적으로 설명할 것입니다. 마치 요리 레시피를 따라 하듯이, 하나씩 단계별로 진행해보겠습니다.

1. Node.js 설치하기

리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js는 개발 환경에서 JavaScript를 실행할 수 있도록 해주는 런타임입니다. Node.js를 설치하는 데는 다음 두 가지 방법이 있습니다:

• 1.1. 웹사이트에서 직접 다운로드
• 1.2. 패키지 매니저를 사용하여 설치

1.1. 웹사이트에서 직접 다운로드

Node.js의 공식 웹사이트인 nodejs.org 를 방문합니다. 이곳에서 LTS(Long Term Support) 버전의 설치 파일을 다운로드 받을 수 있습니다.

node.js 다운로드

1.2. 패키지 매니저를 사용하여 설치

윈도우에서는 Chocolatey를 사용할 수 있습니다. 명령 프롬프트를 열고 다음 명령어를 입력합니다:

choco install nodejs-lts

리눅스에서는 다음 명령어를 사용할 수 있습니다:

sudo apt update
sudo apt install nodejs
sudo apt install npm

Node.js 설치 확인하기

설치가 끝났다면 다음 명령어로 Node.js와 NPM이 잘 설치되었는지 확인합니다:

node -v
npm -v

node -v

npm -v

2. Create React App으로 프로젝트 생성하기

Node.js 설치 후, 리액트 프로젝트를 생성하기 위해 Create React App을 사용할 것입니다. Create React App은 리액트 개발을 위한 설정을 간편하게 진행해주는 도구입니다. 사용 방법은 다음과 같습니다:

npx create-react-app mall
cd mall
npm start

이제 mall 라는 이름의 폴더에 리액트 프로젝트가 생성되었으며, npm start 명령어를 통해 개발 서버를 실행하면 기본적인 리액트 애플리케이션을 확인할 수 있습니다.

리액트 실행 (npm start)

2.1. 프로젝트 구조 이해하기

새로 생성된 리액트 프로젝트의 폴더 구조는 다음과 같습니다:

• node_modules : 프로젝트의 의존성 모듈이 위치합니다.
• public : 정적 파일(HTML, 이미지 등)이 위치합니다.
• src : 애플리케이션의 주요 코드가 포함된 폴더입니다.
• package.json : 프로젝트의 메타정보와 의존성 목록을 포함하고 있습니다.

3. 간단한 리액트 컴포넌트 만들기

이제 간단한 리액트 컴포넌트를 만들어 보겠습니다. src/App.js 파일을 열고 아래와 같이 수정합니다:

import React from 'react';

function App() {
  return (
    <div>
      <h1>안녕하세요, 리액트!</h1>
    </div>
  );
}

export default App;

파일을 저장하면, 브라우저에서 자동으로 변경 사항이 반영되는 것을 확인할 수 있습니다.

변경된 화면

마무리

이로써 Node.js 설치부터 리액트 프로젝트 생성과 간단한 컴포넌트 작성까지의 과정을 마쳤습니다. 이 글이 여러분의 리액트 학습에 도움이 되었기를 바랍니다!