[웹 서비스 A-Z][Vuejs] #2 Config

Install

일단 지금 Vuejs를 시작하려는 PC의 환경이 다양할텐데요, OS의 차이라던지, CLI의 차이라던지. 저는 Window11, Git bash로 진행을 하는 점 참고 부탁드립니다.

Vuejs는 패키지 관리 툴로 npm을 사용합니다. ( 가령 Linux에서는 rpm, yum, apt-get. 파이썬에서는 pip.)

따라서, Vuejs를 시작하기전에 npm이 설치가 되어야 하는데요, npm은 nodejs를 설치하게 되면 자동적으로 설치가 됩니다.

먼저 nodejs와 npm이 PC에 설치되어 있는지 확인해 봅시다.

node --version # or node -v
npm --version # or npm -v

설치가 안되어 있다면, https://nodejs.org/en/ 해당 페이지로 접속하여 설치를 합시다.

LTS 버전으로 설치하면 됩니다. 여기서 LTS는 Long Term Support로 장기간에 걸쳐서 지원하기 위해 고안된 버전이라는 뜻입니다. 현재 18.14 버전을 LTS로 제공하고 있습니다.

이번 포탈 개발을 진행한 nodejs 버전은 v16.14.0, npm 버전은 8.17.0 입니다.

여기서 주의할 점은 nodejs와 npm의 버전이 맵핑이 되어 있는 점입니다. 가령 npm의 버전이 너무 높아 nodejs에서 지원이 안되는 상황이면 개발시 충돌이 일어날 수 있습니다.

따라서, https://nodejs.org/ko/download/releases/ 해당 URL을 통해 설치시 버전이 맞는지 확인이 필요합니다. 아니면 nvm(Node Version Manager)을 설치해서 원하는 nodejs와 npm을 설치하는 것도 하나의 방법이 될 수 있습니다.

자, 이제 Vue를 설치해봅시다.

Vue를 시작하기 위해서 vue-cli를 설치하도록 하겠습니다. 일단 설치가 되어 있는지 확인해봅시다.

# 버전 확인
vue --version
# 설치
npm install -g @vue/cli

포탈 개발에 사용한 vue-cli 버전은 5.0.8 입니다.

계속해서 이런 버전에 대해 언급하는 이유는 version이 굉장히 중요한 부분이기 때문입니다. 가령 vue 프로젝트에서 차후 해당 버전을 지원하지 않는다던지 특정 라이브러리가 해당 버전에서는 동작을 하지 않는다던지 하는 정보들을 파악할 수 있기 때문입니다.

이렇게 vue-cli까지 설치를 알아보았는데요, 다음 장에서 vue 프로젝트를 시작해보도록 하겠습니다.

Additional

보통 nodejs의 경우 다양한 경로를 통해 이미 PC 환경에 설치되어 있을 확률이 높습니다. 설치되어 있는 nodejs의 버전이 낮지 않다면, npm만 설치하면 될텐데요, 다음과 같이 진행할 수 있습니다.

npm을 업그레이드 또는 다운그레이드 하기 전 캐시를 비워주세요. -f 은 강제성을 부여합니다.

npm cache clean -f

특정 버전으로 설치하기 위해서는 2가지 방법이 있는데 @를 사용하거나 n 모듈을 사용할 수 있습니다.

# 1안
npm install -g npm@[특정 버전]
# 2안
npm install -g n
n [특정 버전]