디자이너가 직접 해본 React 포트폴리오 개발 환경 셋팅 — VS Code, Node.js, pnpm 설치 순서

React로 포트폴리오를 만들어보겠다고 마음먹었는데, 막상 시작하려니 코딩보다 환경 셋팅부터 막혔다.

개발자들은 당연하게 쓰는 도구들인데 디자이너 입장에서는 뭘 설치해야 하는지, 어떤 순서로 해야 하는지 전혀 감이 안 온다. 검색과 AI의 도움을 받아가며 하나씩 셋팅했던 과정을 정리해봤다.

필요한 것들 한눈에 보기

• 1 Node.js 설치
• 2 VS Code 설치
• 3 pnpm 설치
• 4 로컬 실행 확인

1. Node.js 설치

React 자체가 Node.js 환경에서 돌아가기 때문에 가장 먼저 설치해야 한다. Node.js 공식 사이트(nodejs.org)에서 LTS 버전을 받아서 설치하면 된다.

2. VS Code 설치

코드 에디터로 VS Code를 선택했다. 무료고 한국어 지원도 되고 React 개발에 가장 많이 쓰이는 에디터다.

VS Code 공식 사이트(code.visualstudio.com)에서 운영체제에 맞는 버전을 받아서 설치하면 된다.

잠깐 — 터미널이 뭔가요?

이 다음부터 터미널에서 명령어를 입력해야 한다. 터미널이 낯설다면 이렇게 이해하면 된다.

💡 터미널이란? 마우스 클릭 대신 텍스트 명령어로 컴퓨터에게 지시하는 창이다. VS Code 안에 터미널이 내장되어 있어서 별도로 다른 프로그램을 열 필요가 없다.

VS Code 상단 메뉴에서 Terminal → New Terminal 을 클릭하거나,
단축키 Ctrl + ` (백틱, 숫자 1 왼쪽 키)를 누르면 하단에 터미널 창이 열린다.

3. Node.js 설치 확인 및 pnpm 설치

터미널이 열리면 아래 명령어를 입력하고 Enter를 누른다.

node -v

버전 번호(예: v22.19.0)가 뜨면 Node.js가 정상 설치된 것이다.

VS Code 터미널에서 node -v 입력 후 버전 뜨는 스샷

 

이어서 pnpm을 설치한다. pnpm은 패키지 매니저로, npm이나 yarn과 비슷한 역할인데 속도가 빠르고 용량을 적게 차지한다는 장점이 있다.

npm install -g pnpm

4. 로컬 실행 확인

프로젝트 폴더를 VS Code로 열고 터미널에서 아래 명령어를 입력한다.

pnpm dev

터미널에 로컬 주소(예:localhost:5173)가 뜨면 브라우저 주소창에 그대로 입력해서 열어보면 된다.

pnpm dev 실행 후 localhost 주소 뜨는 터미널 스샷

 

화면이 정상으로 뜨면 환경 셋팅 완료다.

브라우저에서 로컬주소가 열린 포트폴리오 화면

처음엔 터미널 자체가 낯설고 명령어 하나하나가 생소하다.

하지만 이 셋팅은 한 번만 해두면 이후 프로젝트에서 계속 재사용할 수 있다. 하나씩 따라하면 생각보다 금방 끝난다.