Home

오늘의 기억

[SpringBoot + Vue + TypeScript] 완벽한 개발환경 구축하기 (3): 클라이언트 (Vue)


Client (vue, vue-cli)

소스 설치

클라이언트(Front-end)는 vue-cli를 이용하면 SpringBoot처럼 기본적인 설치 및 설정이 가능하다.
vue-cli는 npm으로 설치 할 수 있으며, npm은 Node.js를 설치하면 같이 설치된다.
따라서 Node.js를 공식홈페이지에서 다운받아 설치를 진행하면 된다.

Node.js 설치가 완료되면, Command 에서 npm 이라는 명령어를 사용할 수 있다.
npm 명령어를 이용해 vue-cli 를 설치하자.
vue-cli를 설치할 때는 @vue/cli 패키지를 설치하면 되고,
이는 윈도우, 리눅스 상관없이 Command로 설치하면 된다.

$ npm i @vue/cli --g # npm install @vue/cli --global (동일한 커맨드)

여기서 중요한 점은 --g 옵션을 통해 Global로 설치를 하는 것이다.
이렇게 해야 Command에서 vue 라는 명령어를 사용할 수 있게 된다.

vue-cli 설치가 완료되었으면 vue 명령어를 이용해 기본 프로젝트 구조를 Import 받을 수 있다.
이를 이용해서 아까 생성한 프로젝트 디렉토리에 vue create example 명령어를 입력하자

# root/example
$ vue create example

명령어를 입력하면 무언가 선택지가 나오게 된다.
default 로 설치하면 babel과 eslint 만 설치되는데,
우리는 TypeScript 까지 같이 사용할 예정이므로, Manually select features 를 선택한다.

이후에는 아래와 같이 따라서 선택하면 된다.

Check the features needed for your project

  • Babel, TypeScript, Linter / Formatter 선택
  • Babel은 크로스 브라우징 지원을 위해 선택하는게 좋다.
  • TypeScript을 지원하기 위해 선택한다.
  • Linter / Formatter 는 ESLint와 Prettier를 자동으로 설정해준다.

Use class-style component syntax?

  • Yes
  • Vue Components를 만들 때 Class 스타일로 만들 것인지 물어보는 것인데 TypeScript를 이용할 때는 Yes로 하는게 코드가 깔끔하다.

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?

  • Yes
  • Babel 설정을 할 것인지 물어보는 것인데 Yes로 한다.

Pick a linter / formatter config

  • ESLint + Prettier
  • ESLinter와 Prettier 설정을 자동으로 해준다.
  • Airbnb 설정이나 기타 다른 설정은 추후에 추가해도 상관없다.

Pick additional lint features

  • Lint on save
  • Lint 사용시 제공되는 기능 중 어떤 기능을 사용할지 선택하는 옵션이다.
  • 이건 개인의 취향에 따라 다르다.
  • Lint on save 옵션은 저장시 Lint 검사만 하는 것이고
  • Lint and fix on commit 옵션은 저장시 자동으로 Fix가 가능한 것은 Fix까지 해주는 것이다.

Where do you prefer placing config for Babel, ESLint, etc.?

  • In dedicated config files
  • Babel, ESLint, Prettier 등등 여러 설정을 별도의 설정 파일로 분리할 것인지, package.json 에서 할 것인지 선택하는 것이다.
  • 별도의 설정으로 분리하는게 더 편리하다.

Save this as a preset for future projects?

  • No
  • 해당 설정을 별도로 저장할 것인지 물어보는 건데, 굳이 필요 없다.

설정이 완료되면 npm 으로 필요한 패키지를 알아서 다운로드 후 설치가 완료된다.
설치가 완료 된 디렉토리명은 정확한 구분을 위해 client 로 변경해준다.

# root/example
$ mv example client

이후 client 디렉토리에서 npm run serve 명령어를 실행해보면 vue-cli 로 실행되는 화면을 볼 수 있다.


설정

설치가 완료되면 기본적인 개발 환경은 구축이 완료 된 것이다.
하지만 개발 환경만 구축했을 뿐, 실제 Spring boot 로 배포를 하려면 별도로 설정이 필요하다.
설정을 위해 vue.config.js 파일을 하나 생성하자

생성 후 아래와 같이 입력한다.

// root/example/client/vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
  outputDir: '../server/public/dist'
};

빌드 시 저장 될 디렉토리를 Server의 public/dist로 설정하는 것이고,
빌드시 서버쪽 리소스 바인딩을 위해 /dist/ 를 publicPath 로 설정하는 것이다.


빌드 및 배포

설정이 완료된 후 npm run build 커맨드를 입력해보자.
그럼 build가 완료된 파일이 server/public/dist 에 저장이 된다.

이후 SpringBoot 를 실행 후 접속해보면 배포가 완료된 화면을 볼 수 있다.


완료

기본적으로 모든 설정이 완료되었다.
이는 아주 극히 기본적인 개발 환경 및 배포 환경이며
실제 운영까지 하려면 추가적인 환경 설정이 더 필요하다.

해당 내용들은 추후에 시간나면 올려보도록 하겠다.

여기까지 완료 된 소스코드는 아래 Github Repository 에서 확인이 가능하다.

https://github.com/ryum91/springboot-vue-example


[SpringBoot + Vue + TypeScript] 완벽한 개발환경 구축하기 연재 시리즈

20191104 Charyum.Park