Node.js는 JavaScript 코드를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경입니다.
자바스크립트는 HTML에 종속된 언어이고, HTML 조작과 변경을 위해 사용합니다. 자바스크립트를 이용하면 정적 언어인 HTML을 조작해서 웹페이지를 다이나믹하게 바꿔주는 기능을 구현할 수 있습니다. 자바스크립트 언어의 해석은 오직 브라우저에만 수행할 수 있기 때문에 기존에는 자바스크립트를 인터넷 브라우저 상에서만 실행할 수 있었습니다.
Node.js는 브라우저 외의 다른 환경에서도 자바스크립트를 사용할 수 있게 해줍니다. 즉, Node.js를 설치하면 브라우저를 사용하지 않고도 자바스크립트를 컴퓨터에서 수행할 수 있습니다. 즉, Node.js를 이용하면 자바스크립트 언어를 일반 프로그래밍 언어처럼 사용할 수 있습니다.
이번 글을 통해서는 Node.js를 Mac에 설치하고 활용하는 방법에 대해서 살펴봅니다.
1. Node.js 설치
mac에서 터미널을 열고 아래와 같이 nvm (Node Version Manager)을 다운로드하고 설치해 줍니다.
아래 명령에 실패하는 경우, 설치를 위한 적절한 권한을 가지고 있는지 확인해야 합니다. 일반 사용자 계정으로 작업하는 경우, 명령어 앞에 “sudo”를 입력하여 설치권한을 획득할 수 있습니다.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash위에서 설치한 nvm을 이용하여 Node.js를 다운로드 하고 설치합니다.
아래는 Node.js 24 버전 중에서 가장 최신 릴리즈를 내 컴퓨터에 설치하라는 명령입니다.
nvm install 24설치가 완료되면, 아래의 명령으로 설치된 Node.js의 버전을 확인합니다.
버전 정보가 표시되면 성공입니다.
node -v2. pnpm 설치
다음으로는 JavaScript 패키지 매니저인 pnpm (Performent Node Package Manager) 을 설치합니다.
위쪽에서 작업한 Node.js가 설치된 상태에서 아래의 명령어를 실행합니다. “corepack”은 Node.js v16.13 이상에 기본적으로 내장되어 있습니다.
아래 명령은 corepack을 이용하여 최신 pnpm을 다운로드 하고, pnpm을 기본 패키지 매니저로 사용하겠다는 의미를 갖습니다.
corepack enable
corepack prepare pnpm@latest –activatepnpm 설치에 문제가 없는지 설치여부를 확인합니다.
pnpm -vpnpm 버전이 올바르게 표시 된다면, JavaScript 패키지 매니저의 설치가 완료된 것입니다.
3. Jode.js 프로젝트의 실행
터미널에서 cd 명령어를 이용하여 프로젝트 경로로 이동합니다.
cd [홈페이지_폴더_경로]아래의 명령으로 프로젝트에 필요한 라이브러리를 설치합니다.
설치결과로 폴더내에 “node_modules” 폴더가 생성된 것을 확인합니다.
pnpm install개발서버 실행 및 웹페이지 테스트 위해서 아래 명령을 실행합니다.
실행결과로 “http://localhost:xxxx”과 같은 주소가 표시되면, 그 주소를 복사해서 브라우저의 주소창에 입력합니다.
pnpm dev마지막 단계로, 프로젝트의 배포를 위해 아래 명령을 입력하면, 그 결과물로 “dist” 또는 “build”라는 폴더가 생성됩니다.
생성된 결과물을 자신이 운영하는 웹서버의 루트디렉토리에 복사하고, 웹페이지를 통해 웹서버에 접속하면 작업한 최종 결과물을 확인할 수 있습니다.
pnpm build아래는 제가 작업한 프로젝트 폴더의 구성내용 입니다.
4. 마무리하며…
Node.js 공식 홈페이지 에서 “다운로드”탭으로 이동하면 아래와 같이 Node.js의 설치방법이 자세히 설명되어 있습니다.
아래는 macOS에서 nvm 방식으로 pnpm을 이용하여 Node.js v24.15.0을 설치하는 예 이지만, Windows 및 Linux의 샘플도 자세히 설명되어 있어니 참고하시기 바랍니다.
