최근 Vue.js를 통해 개발을 해보려고 공부를 하고 있습니다.
그러기 위해서는 환경을 구성해야 하는데요.
먼저 개발된 Vue.js 스크립트를 테스트하기 위한 서버와 빌드환경을 구성해야합니다.
그러기 위해서는 Node.js를 설치해야 합니다.
Node.js 설치하기
아래 링크를 통해 Node.js를 다운로드 받아 설치를 진행해야 하는데요.
Node.js — Download
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
본인 PC의 OS에 맞는 파일을 다운로드 해야하는데요.
현재 가장 최신의 LTS 버전은 20.11.1 입니다. 커다랗게 표시된 LTS란 Long Term Support 의 약어로 장기 지원 버전이라는 뜻이니 이를 다운로드 받는 것이 좋겠죠?
다양한 OS를 지원하지만, 이번에는 Windows PC에 설치를 진행하므로 Windows Installer에 있는 64bit를 선택해 다운로드를 했습니다.
다운로드 되는 파일명은 아래와 같이 node-v20.11.1-x64 파일이 되고요. 용량이 크지 않아 금방 다운로드 됩니다.
위에 표시된 파일열기를 통해 설치를 진행합니다.
설치 마법사가 나타나면 "Next"를 눌러줍니다.
라이선스에 동의한다는 "I accept the terms in the License Agreement"에 체크를 하고요.
설치할 기본 경로는 c드라이브의 Program Files\nodejs 라는 경로입니다. 가급적 기본경로로 설치를 진행하구요.
사용자 설치 부분은 그냥 "Next"를 눌러 진행하고요.
네이티브 모듈을 위한 도구 설치가 나오는데요. 컴파일 등과 관련된 내용이라 옵션에 체크를 설치하고 설치를 진행했습니다. Chocolatey라는 것은 "초콜릿 같은" 의미가 아니라 설치되는 소프트웨어의 이름이더군요.
이제 설치할 준비가 되었고, "Install" 버튼을 눌러 설치를 진행합니다.
아래와 같이 설치가 진행되고요. 설치되는 동안에는 프로그래스바가 나와서 설치되는 진행상태를 볼 수 있습니다.
설치완료! 설치가 완료되면 아래와 같이 메세지가 나타나게 되구요. "Finish"를 눌러 설치를 종료합니다.
아까 위에서 옵션항목으로 체크해 놓은 것으로 추가 도구(Additional tool)을 설치하는 창이 바로 뜨게 되는데요. 설명과 같이 아무키나 눌러주면 설치가 진행되고 바로 종료가 됩니다.
키를 누르니 그냥 슉 하고 끝나버려서 캡쳐를 하지 못했네요. 금방 설치가 완료됩니다.
설치를 했으니 제대로 설치가 되었는지 확인해봐야겠죠? 윈도우 버튼을 눌러 아래에 "cmd" 명령어 실행창을 띄워줍니다.
아래와 같이 "node -v" 명령어를 수행하면 아래와 같이 설치된 node.js의 버전을 볼 수 있는데요. 위에서 다운로드 받은 20.11.1이 정상적으로 설치된 것을 확인할 수 있습니다.
오늘은 Vue.js 개발을 진행하기 위한 환경구성으로 node.js 설치를 진행해보았는데요.
복잡하지 않으니 모두들 한번 스스로 해보세요.
이제 Vue.js를 위한 Visual Studio Code를 설치 해보러 갈까요?