스프링 (Spring Vue) 게시판 만들기 #6. 프론트엔드 환경 구축하기(Vue.js)

이번에는 프론트엔드 환경을 구축해서 Vue를 사용할 수 있는 환경을 만들어 보도록 하겠습니다.

 

우선 NPM을 사용하기 위한 환경을 구축하도록 합니다.

NPM(Node Package Manager)는 자바스크립트를 위한 패키지 관리자입니다.

즉, 자바스크립트에서 사용하는 모듈들을 패키지화해서 관리하고 베포하는 자바스크립트 런타입 환경인 Node.js의 기본 패키지 관리자입니다.

 

과거에는 npm을 별도로 설치해야 했지만 지금은 node.js만 설치하면 자동으로 설치가 됩니다.

 

node.js 사이트에서 node.js installer를 다운로드 합니다.

 

node.js 다운로드 페이지 : https://nodejs.org/en/

Node.js

(2021.07.18기준)안정화된 버전인 14.17.3 버전을 다운로드해서 설치해보도록하겠습니다.

 

설치가 완료되면 CMD를 실행시켜 정상적으로 설치가 되었는지 node js환경에 접속해봅니다.

자동으로 npm도 설치되었을테니 이번에는 npm --version을 통해 npm의 설치를 확인합니다.

정상적으로 설치된 것을 확인할 수 있습니다.

 

저는 익숙하게 사용하는 yarn을 설치합니다. yarn은 조금 개선된 버전의 npm이라고 생각하시면 됩니다. 앞서 npm은 Node.js를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구입니다. 프로젝트에서 사용하는 라이브러리를 설치하고 해당 라이브러리들의 버전 관리를 하게 될 때 사용하죠. yarn을 사용하는 이유는 조금 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위합니다. (만약 npm이 이미 익숙하고 yarn을 설치하기 귀찮다면 생략해도 상관없습니다.)

 

yarn 공식 홈페이지: https://classic.yarnpkg.com/en/docs/install#windows-stable

Yarn

 

 

기본적으로 npm으로 다운로드를 받을 수 있습니다.

금방 설치가 됩니다.

yarn --version으로 설치가 정상적으로 되었는지 확인 할 수 있습니다.

다음으로는 vue를 설치해 보도록 하겠습니다.

https://kr.vuejs.org/v2/guide/installation.html

설치방법 — Vue.js

 

vue 공식홈페이지에서 확인해보면 NPM으로 Vue.js를 설치할 수 되어있습니다.

 

npm install vue 입력해줍니다.

금방 설치가 완료됩니다.

Vue.js는 단일 페이지 애플리케이션(SPA)를 빠르게 구축할 수 있는 공식 CLI환경을 제공합니다. 핫리로드, 저장시 린트체크 및 프로덕션 준비가 된 빌드로 준비하기 위해 꼭 필요한 환경입니다.

그럼 Vue cli도 설치해 보도록 하겠습니다.

https://cli.vuejs.org/guide/installation.html

Installation | Vue CLI

Vue CLI도 공식 페이지를 통해서 확인 할 수 있습니다.

npm install -g @vue/cli

또는 

yarn global add @vue/cli

해당 명령어를 통해서 설치를 할 수 있습니다.

yarn을 설치했기 때문에 yarn 으로 설치를 진행해 보도록 하겠습니다.

(yarn에서 vue cli 설치시 오류가 발생하여  npm 으로 설치를 진행하였습니다.)

자 이제 정상적으로 설치가 완료되었는지 확인을 해보겠습니다.

정상적으로 버전이 확인 되었으니 이제 vue cli까지 정상적으로 설치가 완료되었습니다.

간단하게 vue 프로젝트를 생성해서 확인해보겠습니다.

빈 폴더를 준비해줍니다. (필요없으시면 그냥 하셔도 무방합니다)

주소줄에 cmd를 입력해서 엔터하면 해당 폴더 위치에서 cmd를 실행시킬 수 있습니다.

test라는 이름의 vue 프로젝트를 생성해보겠습니다.

명령어는

vue create test(vue create [생성프로젝트이름]) 

입니다.

vue2를 할건지 vue3를 할지를 선택하는데 테스트 목적이므로 vue2를 엔터해줍니다.

패키지 관리자를 선택해줍니다. 저는 yarn을 선택하였습니다.(npm을 사용해도 상관 x)

엔터를 누르면 의존성 모듈들을 다운로드하고 vue 프로젝트를 생성해줍니다.

정상적으로 설치가 완료되었다면 파란색으로 된 커멘드를 따라하라고 되어있습니다.

그럼 cd test -> yarn serve 명령어를 차례대로 치도록 합니다.

그럼 이렇게 앱이 구동되었다는 표시의 화면이 나오게 됩니다.

localhost:8081이나 ip주소의 8081주소를 가보도록 하겠습니다(원래는 기본적으로 8080이나 현재 저는 톰캣(8080)을 사용중이라 8081입니다)

정상적으로 vue 페이지를 볼 수 있게 됩니다.

 

 

이제 다음 포스팅부터 Vue프로젝트를 생성해서 프론트엔드 화면을 만들어 보도록 하겠습니다.