Table of Contents

React – React 시작하기 – 개발 환경 설정 – 0 – Node.js 설치 및 버전 관리 (nvm 사용법)

안녕하세요! 😊
React 프로젝트를 본격적으로 시작하기 전에 반드시 준비해야 할 기본 환경, 바로 Node.js 설치와 버전 관리에 대해 알려드릴게요. 이건 마치 건물을 짓기 전에 튼튼한 기초를 다지는 작업이라고 보시면 돼요!

Node.js란 무엇인가요?

먼저 간단하게 Node.js가 무엇인지 짚고 넘어가 볼까요?

Node.js는 JavaScript를 브라우저 밖, 즉 서버에서 실행할 수 있도록 만들어주는 런타임 환경입니다.

React 프로젝트를 만들거나 실행할 때, 내부적으로 사용하는 도구들이 대부분 Node.js 기반으로 작동해요. 예를 들면:

create-react-app
vite
webpack
npm, yarn 같은 패키지 관리자

이 모든 것들이 Node.js 위에서 돌아가요. 그러니까 Node.js는 React의 실행 엔진이라고 해도 과언이 아니죠!

왜 버전 관리를 해야 할까요?

Node.js는 자주 업데이트되고, 프로젝트마다 요구하는 버전이 다를 수 있어요. 이런 상황에서 하나의 Node.js만 설치되어 있다면?
💥 프로젝트마다 에러가 나기 시작할 거예요.

그래서 등장한 해결사! 바로 nvm(Node Version Manager) 입니다.

nvm은 여러 개의 Node.js 버전을 자유자재로 설치하고, 프로젝트마다 쉽게 전환할 수 있게 해주는 도구예요.

nvm 설치 방법 (macOS/Linux 기준)

1. 터미널 열기

macOS나 Linux에선 터미널을 열어주세요.

2. 설치 스크립트 실행

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

설치가 끝나면, 다음 줄을 쉘 설정 파일에 추가해야 해요. 보통은 .bashrc 또는 .zshrc입니다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

적용 후, 터미널에서 nvm 명령어가 잘 실행되는지 확인해볼까요?

nvm --version

✅ 숫자가 뜨면 성공이에요!

Windows 사용자는? `nvm-windows`

Windows 환경에서는 nvm-windows라는 별도의 도구를 사용해요.

아래 링크에서 nvm-setup.exe 다운로드
👉 https://github.com/coreybutler/nvm-windows/releases
설치 후, 명령 프롬프트 또는 PowerShell에서 확인

nvm version

nvm 기본 사용법

1. Node.js 버전 설치

nvm install 18

👉 18은 버전 번호예요. 특정 LTS 버전을 설치하려면 다음처럼 입력할 수도 있어요:

nvm install --lts

2. 설치된 버전 목록 보기

nvm ls

3. 사용할 버전 선택

nvm use 18

4. 기본 사용 버전 설정

nvm alias default 18

이제 터미널을 켤 때마다 자동으로 Node.js 18버전이 선택되도록 만들 수 있어요.

설치 후 확인하기

node -v
npm -v

예상 출력:

v18.18.2
9.8.1

둘 다 정상적으로 버전이 뜨면, 여러분의 환경은 준비 완료입니다! 🎉

실전 팁 💡

📌 특정 프로젝트에서 node 버전 고정하기

루트 폴더에 .nvmrc 파일을 생성하고, 원하는 버전을 적어두세요.

그 후 아래 명령어로 .nvmrc에 맞는 버전 자동 적용이 가능해요:

nvm use

문제 발생 시 대처법

문제	원인 및 해결 방법
`nvm` 명령어가 인식되지 않음	`.bashrc` 또는 `.zshrc`에 nvm 초기화 스크립트가 누락되었는지 확인
Node.js 설치 후에도 `node -v`가 안 나옴	`nvm use` 명령어를 먼저 실행했는지 확인
Windows에서 `nvm install`이 안 됨	관리자 권한으로 터미널 실행하거나, `nvm-windows` 재설치 권장

마무리하며

React 프로젝트를 시작하기 위한 첫 단추, Node.js 설치와 버전 관리!
이제 여러분은 프로젝트마다 버전 충돌 걱정 없이, 안정적으로 개발 환경을 구축할 수 있게 되었어요.

마치 여러 게임이 깔린 PC에서, 원하는 게임마다 설정을 맞춰주는 것처럼 ✨
nvm은 개발자의 필수 무기이자 환경 통제의 핵심 열쇠랍니다.

다음 글에서는 React 프로젝트 생성 도구인 create-react-app과 Vite를 이용해 실전 프로젝트를 시작하는 법을 알려드릴게요. 기대해주세요! 🛠️🚀