Node.js 설치부터 React 프로젝트 시작까지

프론트엔드 개발을 시작할 때 가장 먼저 진행하는 것은 개발 환경 셋팅입니다.

React 프로젝트를 시작하기 위해서 반드시 Node.js가 필요합니다.

왜냐하면, Node.js 위에서 모든 빌드 도구와 패키지 관리가 동작하기 때문입니다.

본 글에서는 Ubuntu 환경에서 Node.js 설치 -> React 프로젝트 생성 -> 무료 대시보드 템플릿 실행까지 내용을 정리합니다.

0. JavaScript, Node.js, React의 관계

글을 시작하기 전 JavaScript와 Node.js, React 관계에 대해 간단하게 소개합니다. React는 브라우저에서 실행되지만, 개발 과정에서 사용하는 빌드, 패키지 설치, 서버 실행은 모두 Node.js가 담당하고 있습니다.
따라서, React 개발을 위해서는 Node.js 설치가 필요합니다.

구분	역할
JavaScript	프로그래밍 언어
Node.js	JavaScript 실행 환경(런타임)
React	JavaScript로 UI를 만드는 라이브러리

1. Node.js 설치

Node.js의 필요성에 대해 알아보았으니 설치를 진행해보겠습니다.
저는 Linux에서 24.13.0 버전을 설치하였습니다.

1) nvm 다운로드 및 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

2) nvm 적용
source ~/.bashrc

3) nvm 설치 확인
nvm -v

4) Node.js 다운로드 및 설치
nvm install 24

5) 설치 Node.js 버전 확인 및 npm 버전 확인
node -v
npm -v

KADaP Cloud 사용시, ssh를 통해 VM 접속 후 동일한 방법으로 설치하시면 됩니다.

2. React 프로젝트 생성

1 or 2 둘 중 하나 선택

1) npm create-react-app my-react-app
2) npm create vite@latest my-react-app

npm start
http://localhost:3000 접속 (KADaP Cloud 사용자: http://<vm ip>:3000)

3. 무료 React Dashboard Templete 실행하기

오픈된 무료 Dashboard 템플릿을 통해 빠르게 개발 및 배포 할 수 있습니다.

아래는 대표적인 무료 React dashboard templete 입니다.

• Argon Dashboard React

  

• Material Dashboard React

  

• CoreUI React

  

• AdminLTE Reac

  

본 글에서는 Argon Dashboard로 시작해보겠습니다.

3.1 템플릿 가져오기(Git clone)

git clone https://github.com/creativetimofficial/argon-dashboard-react.git

3.2 폴더 이동

cd argon-dashboard-react

3.3 패키지 설치

npm install

3.4 실행

npm start (또는) npm run dev

연결 성공!