React 프로젝트 세팅하기: create-react-app을 사용한 환경 설정 단계별 안내.

작성일 : 2024-07-08

React 프로젝트 세팅하기: create-react-app을 사용한 환경 설정 단계별 안내

React는 사용자 인터페이스를 구축하기 위해 널리 사용되는 JavaScript 라이브러리입니다. 이 글에서는 create-react-app을 사용하여 React 프로젝트를 신속하게 설정하는 방법을 단계별로 안내합니다. create-react-app은 표준 설정을 제공하여 개발자가 초기 설정에 시간을 낭비하지 않고 바로 애플리케이션 개발에 집중할 수 있도록 돕습니다. 이제 시작해 봅시다.

1단계: Node.js와 npm 설치

React 프로젝트를 시작하기 전에, Node.js와 npm이 시스템에 설치되어 있어야 합니다. Node.js는 JavaScript 실행 환경이고, npm은 Node 패키지 매니저입니다. 각각의 공식 사이트에서 다운받아 설치할 수 있습니다.

Node.js와 npm이 이미 설치되어 있는지 확인하려면 명령 프롬프트나 터미널 창에 다음 명령을 입력합니다:


bash
node -v
npm -v

두 명령 모두 버전 번호를 출력해야 합니다.

2단계: create-react-app 설치

create-react-app은 React 애플리케이션을 빠르게 설정할 수 있도록 도와주는 도구입니다. create-react-app을 글로벌로 설치하려면 다음 명령을 실행합니다:


bash
npm install -g create-react-app

전역 설치 후에 언제든지 프로젝트를 생성할 수 있습니다.

3단계: 새 React 프로젝트 생성

create-react-app을 사용하여 새 React 프로젝트를 생성하려면 다음 명령을 실행합니다:


bash
create-react-app my-app

여기서 my-app은 프로젝트의 이름입니다. 원하는 이름으로 바꿀 수 있습니다. 명령이 실행되면 필요한 패키지들이 설치되고 초기 프로젝트 구조가 생성됩니다.

4단계: 프로젝트 디렉토리로 이동

프로젝트 파일이 생성되면 해당 디렉토리로 이동합니다:


bash
cd my-app

이제 이 디렉토리 안에서 모든 개발 작업을 진행하게 됩니다.

5단계: 개발 서버 시작

개발 서버를 시작하여 브라우저에서 애플리케이션을 볼 수 있습니다. 다음 명령을 실행합니다:


bash
npm start

이 명령을 실행하면 기본적으로 http://localhost:3000 에서 애플리케이션을 확인할 수 있습니다. 만약 다른 서버나 포트가 필요하다면, package.json 파일을 수정하는 등 추가적인 설정이 필요합니다.

6단계: 프로젝트 파일 구조 이해

create-react-app이 생성한 기본 파일 구조는 다음과 같습니다:

my-app/
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── App.js
    ├── App.css
    ├── index.js
    └── index.css

public/ 폴더는 정적 파일을 포함하고 있으며, 주로 index.html 파일을 수정할 때 사용됩니다.
src/ 폴더는 애플리케이션의 핵심 코드가 위치하는 곳입니다. App.js와 index.js는 가장 중요한 파일들 중 하나입니다.

7단계: 추가 패키지 설치

create-react-app을 이용하면 다양한 패키지를 손쉽게 설치할 수 있습니다. 예를 들어, react-router-dom을 설치하려면 다음과 같이 합니다:


bash
npm install react-router-dom

그 후, import 문을 사용하여 프로젝트 내에서 해당 모듈을 사용할 수 있습니다.

8단계: 환경 설정 파일 생성

때로는 환경 변수를 설정해야 할 필요가 있습니다. .env 파일을 프로젝트 루트에 생성하고 필요한 환경 변수를 추가할 수 있습니다:

REACT_APP_API_URL=https://api.example.com

프로젝트 내에서 이를 참조할 때는 process.env 객체를 사용합니다:


javascript
const apiUrl = process.env.REACT_APP_API_URL;

9단계: 빌드 및 배포

개발이 완료된 후, 애플리케이션을 배포할 준비가 되었을 때 build 명령을 실행합니다:


bash
npm run build

이 명령은 최적화된 프로덕션 빌드를 생성하여 build/ 디렉토리에 저장합니다. 이 디렉토리를 서버에 업로드하여 애플리케이션을 배포할 수 있습니다.

결론

이 글에서는 create-react-app을 사용하여 새로운 React 프로젝트를 설정하는 전체 과정을 설명했습니다. Node.js와 npm 설치부터 시작하여, 프로젝트 생성, 개발 서버 시작, 그리고 빌드 및 배포까지 다루었습니다. 이러한 과정을 통해 신속하게 React 애플리케이션 개발을 시작할 수 있을 것입니다. Happy Coding!