Home

오늘의 기억

[SpringBoot + Vue + TypeScript] 완벽한 개발환경 구축하기 (1): 개요


Intro

이번 연재 포스팅은 최근에 토이 프로젝트를 하나 진행하면서,
초반에 고민하고 연구(?)하였던
SpringBoot + Vue + TypeScript 개발 환경에 대해 공유하고자 글을 쓰려고 한다.

결과적으로보면 솔직히 별것도 아니다. 엄청 간단하다.
하지만 국내에서는 SpringBoot로 Server를 구성하는 개발자들과 회사들이 많고,
이런 사람들에게 있어서 Modern JavaScript 개발 환경은 몹시 생소한 환경이다.
아무튼 그런 사람들을 대상으로 Modern JavaScript 개발 환경을 SpringBoot와 같이 사용하는 방법을 공유한다.


기술 스택

언급하는 기술 스택은 다음과 같다.

  • SpringBoot (MVC 기준으로 설명, 하지만 WebFlux도 상관 없음)
  • Vue (vue-cli)
  • TypeScript

여기서 중요한 점이 한 가지 있는데,
이전에 SpringBoot를 이용해 Web Application을 개발해 본 사람이라면
Back-end와 Front-end의 구분이 명확하지 않다는 것을 알 수 있을 것이다.
특히 SpringBoot보다 더 오래된 Legacy는 더욱더 그 구분이 없었다. (예를들면 JSP 같은..)

따라서 이번에 언급하는 기술 스택의 포인트는 Back-end와 Front-end의 명확한 분리이다.
앞으로 이어지는 포스팅에선 이러한 분리된 개발 환경을 구축하는 것으로 진행된다.


프로젝트 Root 디렉토리 생성

본격 개발 환경을 구축하기 전에 프로젝트의 Root 디렉토리가 필요하다.
이 디렉토리 하위에 Server(SpringBoot)와 Client(Vue)가 각각 배치될 것이다.

예제에서의 프로젝트 이름은 example 로 설정하였다.


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

20191031 Charyum.Park