02. React 개발환경 구축
1. 개발환경이란?
React는 HTML 파일 하나만 열어서 실행하는 방식이 아닙니다.
React 프로젝트를 개발하려면 JavaScript를 변환하고, 여러 파일을 관리하며, 개발 서버를 실행해 주는 개발환경이 필요합니다.
React에서는 이러한 작업을 Node.js와 Vite가 담당합니다.
2. Node.js란?
Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있도록 만든 실행 환경(Runtime)입니다.
React 개발에서는 다음과 같은 역할을 합니다.
npm 패키지 설치
개발 서버 실행
프로젝트 빌드
라이브러리 관리
Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다.
설치 확인
node -v
npm -v
버전이 출력되면 정상적으로 설치된 것입니다.
3. npm이란?
npm(Node Package Manager)은 필요한 라이브러리를 설치하고 관리하는 도구입니다.
예를 들어 React 프로젝트에서는 다음과 같은 라이브러리를 설치합니다.
React
React DOM
React Router
Axios
Swiper
설치 예시
npm install react-router-dom
프로젝트에 필요한 패키지는 package.json 파일에서 관리됩니다.
4. Vite란?
Vite는 React 프로젝트를 빠르게 생성하고 실행할 수 있도록 도와주는 개발 도구입니다.
기존 개발 환경보다 실행 속도가 빠르고 설정이 간단하여 현재 React 프로젝트에서 많이 사용됩니다.
Vite의 주요 장점
빠른 실행 속도
빠른 새로고침(HMR)
간단한 설정
빠른 빌드
5. React 프로젝트 생성
터미널에서 아래 명령어를 실행합니다.
npm create vite@latest
프로젝트 이름을 입력합니다.
예)
dongbusan-react
Framework는
React
Variant는
JavaScript
를 선택합니다.
6. 프로젝트 실행
프로젝트 폴더로 이동합니다.
cd dongbusan-react
필요한 라이브러리를 설치합니다.
npm install
개발 서버를 실행합니다.
npm run dev
정상적으로 실행되면 다음과 같은 주소가 표시됩니다.
http://localhost:5173
브라우저에서 접속하면 React 기본 화면을 확인할 수 있습니다.
7. 프로젝트 구조
프로젝트를 생성하면 다음과 같은 구조가 만들어집니다.
dongbusan-react
│
├── node_modules
├── public
├── src
│ ├── assets
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── package.json
├── package-lock.json
└── vite.config.js
각 폴더의 역할은 다음과 같습니다.
node_modules
설치한 라이브러리가 저장되는 폴더입니다.
직접 수정하지 않습니다.
public
정적 파일을 저장하는 폴더입니다.
예)
favicon
robots.txt
다운로드 파일
src
실제 React 코드를 작성하는 가장 중요한 폴더입니다.
이곳에서 컴포넌트를 만들고 프로젝트를 개발합니다.
App.jsx
메인 화면을 구성하는 최상위 컴포넌트입니다.
예를 들어
Header
Hero
Course
Gallery
Footer
등을 이곳에서 조립합니다.
main.jsx
React 프로젝트의 시작점입니다.
App.jsx를 브라우저 화면에 출력하는 역할을 합니다.
index.css
프로젝트 전체에 적용되는 공통 스타일을 작성합니다.
package.json
프로젝트 정보와 설치된 라이브러리 목록을 관리하는 파일입니다.
새로운 라이브러리를 설치하면 이 파일에 자동으로 기록됩니다.
vite.config.js
Vite 프로젝트의 설정 파일입니다.
배포 경로나 플러그인 등을 설정할 때 사용합니다.
8. 개발 과정
React 프로젝트는 일반적으로 다음 순서로 진행됩니다.
프로젝트 생성
↓
컴포넌트 작성
↓
CSS 적용
↓
기능 구현
↓
테스트
↓
빌드
↓
배포
9. 빌드(Build)
개발이 완료되면 다음 명령어를 실행합니다.
npm run build
그러면 dist 폴더가 생성됩니다.
dist
├── assets
└── index.html
이 폴더의 내용을 웹 서버(예: 카페24)에 업로드하면 실제 서비스가 가능합니다.
10. React 개발 시 자주 사용하는 명령어
프로젝트 생성
npm create vite@latest
프로젝트 이동
cd 프로젝트명
라이브러리 설치
npm install
개발 서버 실행
npm run dev
프로젝트 빌드
npm run build
마무리
React 개발을 시작하기 위해서는 Node.js, npm, Vite의 역할을 이해하는 것이 중요합니다.
Node.js는 실행 환경을 제공하고, npm은 필요한 라이브러리를 관리하며, Vite는 빠른 개발 환경을 제공합니다.
이러한 개발환경을 구축한 후에는 src 폴더를 중심으로 컴포넌트를 작성하고, 개발이 완료되면 npm run build를 통해 배포 가능한 형태로 프로젝트를 완성하게 됩니다.
1. 개발환경이란?
React는 HTML 파일 하나만 열어서 실행하는 방식이 아닙니다.
React 프로젝트를 개발하려면 JavaScript를 변환하고, 여러 파일을 관리하며, 개발 서버를 실행해 주는 개발환경이 필요합니다.
React에서는 이러한 작업을 Node.js와 Vite가 담당합니다.
2. Node.js란?
Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있도록 만든 실행 환경(Runtime)입니다.
React 개발에서는 다음과 같은 역할을 합니다.
npm 패키지 설치
개발 서버 실행
프로젝트 빌드
라이브러리 관리
Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다.
설치 확인
node -v
npm -v
버전이 출력되면 정상적으로 설치된 것입니다.
3. npm이란?
npm(Node Package Manager)은 필요한 라이브러리를 설치하고 관리하는 도구입니다.
예를 들어 React 프로젝트에서는 다음과 같은 라이브러리를 설치합니다.
React
React DOM
React Router
Axios
Swiper
설치 예시
npm install react-router-dom
프로젝트에 필요한 패키지는 package.json 파일에서 관리됩니다.
4. Vite란?
Vite는 React 프로젝트를 빠르게 생성하고 실행할 수 있도록 도와주는 개발 도구입니다.
기존 개발 환경보다 실행 속도가 빠르고 설정이 간단하여 현재 React 프로젝트에서 많이 사용됩니다.
Vite의 주요 장점
빠른 실행 속도
빠른 새로고침(HMR)
간단한 설정
빠른 빌드
5. React 프로젝트 생성
터미널에서 아래 명령어를 실행합니다.
npm create vite@latest
프로젝트 이름을 입력합니다.
예)
dongbusan-react
Framework는
React
Variant는
JavaScript
를 선택합니다.
6. 프로젝트 실행
프로젝트 폴더로 이동합니다.
cd dongbusan-react
필요한 라이브러리를 설치합니다.
npm install
개발 서버를 실행합니다.
npm run dev
정상적으로 실행되면 다음과 같은 주소가 표시됩니다.
http://localhost:5173
브라우저에서 접속하면 React 기본 화면을 확인할 수 있습니다.
7. 프로젝트 구조
프로젝트를 생성하면 다음과 같은 구조가 만들어집니다.
dongbusan-react
│
├── node_modules
├── public
├── src
│ ├── assets
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── package.json
├── package-lock.json
└── vite.config.js
각 폴더의 역할은 다음과 같습니다.
node_modules
설치한 라이브러리가 저장되는 폴더입니다.
직접 수정하지 않습니다.
public
정적 파일을 저장하는 폴더입니다.
예)
favicon
robots.txt
다운로드 파일
src
실제 React 코드를 작성하는 가장 중요한 폴더입니다.
이곳에서 컴포넌트를 만들고 프로젝트를 개발합니다.
App.jsx
메인 화면을 구성하는 최상위 컴포넌트입니다.
예를 들어
Header
Hero
Course
Gallery
Footer
등을 이곳에서 조립합니다.
main.jsx
React 프로젝트의 시작점입니다.
App.jsx를 브라우저 화면에 출력하는 역할을 합니다.
index.css
프로젝트 전체에 적용되는 공통 스타일을 작성합니다.
package.json
프로젝트 정보와 설치된 라이브러리 목록을 관리하는 파일입니다.
새로운 라이브러리를 설치하면 이 파일에 자동으로 기록됩니다.
vite.config.js
Vite 프로젝트의 설정 파일입니다.
배포 경로나 플러그인 등을 설정할 때 사용합니다.
8. 개발 과정
React 프로젝트는 일반적으로 다음 순서로 진행됩니다.
프로젝트 생성
↓
컴포넌트 작성
↓
CSS 적용
↓
기능 구현
↓
테스트
↓
빌드
↓
배포
9. 빌드(Build)
개발이 완료되면 다음 명령어를 실행합니다.
npm run build
그러면 dist 폴더가 생성됩니다.
dist
├── assets
└── index.html
이 폴더의 내용을 웹 서버(예: 카페24)에 업로드하면 실제 서비스가 가능합니다.
10. React 개발 시 자주 사용하는 명령어
프로젝트 생성
npm create vite@latest
프로젝트 이동
cd 프로젝트명
라이브러리 설치
npm install
개발 서버 실행
npm run dev
프로젝트 빌드
npm run build
마무리
React 개발을 시작하기 위해서는 Node.js, npm, Vite의 역할을 이해하는 것이 중요합니다.
Node.js는 실행 환경을 제공하고, npm은 필요한 라이브러리를 관리하며, Vite는 빠른 개발 환경을 제공합니다.
이러한 개발환경을 구축한 후에는 src 폴더를 중심으로 컴포넌트를 작성하고, 개발이 완료되면 npm run build를 통해 배포 가능한 형태로 프로젝트를 완성하게 됩니다.
#02. React 개발환경 구축