웹 애플리케이션을 제작하는 방법은 다양하다. 전통적으로 Java 기반의 Spring 프레임워크로 백엔드를 제작하고 자바스크립트 기반의 프레임워크로 프론트엔드를 제작하는 방식이 많이 사용된다. 물론 좀 오래전으로 거슬러 올라가자면 PHP나 JSP를 사용하여 제작된 웹 페이지(웹서버+웹애플리케이션)도 많다. 아니, 반대로 아주 최신으로 돌아오자면 파이썬 기반의 Django 프레임워크로 제작하는 것도 가능하고 실제로도 많이 쓰인다.
하지만, 역시 전통적으로 많이 사용되는 프레임워크를 공부해보는 것이 실무 활용성 측면에서 개발자에게 더 도움이 된다. 좀 더 쉽고, 좀 더 안정적인 구축을 위해 앞으로도 무수히 새로운 프레임워크가 등장하겠지만, 극단적으로 말해서, 사용하는 언어(프로그래밍 언어)가 달라지는 프레임워크는 학습 차원에서는 접근해볼 수 있겠지만, 실 서비스 차원에서는 유지보수 과정에 필요한 정보의 부족으로 어려움에 봉착할 가능성이 높기 때문에 결국 선호하지 않게 되는 경우가 많다. 주변에 흔하게 많이 쓰이는 프레임워크를 기본으로 익혀두고, 이를 바탕으로 실무에 능숙하게 적용할 수 있는 능력을 갖추는 것이 개발자의 기본 자세가 아닐까 한다.
여기서는 국내 환경에서 많이 사용하는 기본 프레임워크를 사용하여 아주아주 기본적인 웹 애플리케이션 프레임워크를 만드는 방법을 소개한다. 백엔드로는 Spring Boot를 기반으로한 프로젝트 생성을 다루고 여기에 프론트엔드로 Vue.js를 연동하는 방법을 소개한다.
1. 사전 설치 작업 (Prerequisites)
우선 Spring Boot를 사용하려면 시스템에 JDK가 설치되어 있어야 한다. JDK는 Open JDK를 사용하면 되며 가급적 최신 버전이면서 LTS 버전인 21버전을 사용할 것을 추천한다. 최신 Spring Boot 버전이 이제는 과거의 유물이 되고 있는 8 버전을 더이상 지원하지 않고 있으며, 신 버전의 새로운 기능을 사용하지 않더라도 여러 프레임워크의 기반 라이브러리 의존성 때문에도 최신 버전의 사용이 유리하기 때문이다.
Vue.js를 개발하기 위한 프론트엔드 환경 구성을 위해서는 Node.js의 npm을 설치해야 한다. (npm을 설치하기 위해서 Node.js를 먼저 설치해야 한다.) npm이란 ubuntu 리눅스의 apt나 centos의 yum처럼 node.js 기반의 패키지를 설치하는 설치 관리자이다.
본 개발 환경은 윈도우를 기본으로 하고 있어 윈도우 버전을 소개하고 있으나 실질적으로 여기에서 설치하는 것들은 모두 멀티플랫폼을 지원하므로 맥에서도 똑같이 구성할 수가 있다. 각 플랫폼에 맞는 설치 버전은 해당 웹사이트에서 제공하고 있으므로 각자의 환경에 맞는 버전을 다운로드 받아 설치하면 된다.
1) JDK 설치
Open JDK 21.0.5, 64bit 버전을 설치한다. Open JDK는 소스코드 형태로 배포되며 윈도우용 바이너리 설치 버전은 아래 링크에서 다운로드 받으면 된다.
– 다운로드 링크 : https://adoptium.net/temurin/releases/?os=windows&arch=x64&package=jdk
msi 파일을 사용해서 직접 설치를 할수도 있지만, 좀 더 깨끗한 개발 환경을 구성하고 싶다면 zip 파일을 다운로드 받아서 원하는 폴더에 압축을 풀고, 윈도우 환경변수 설정에 PATH만 추가하여 사용한다.
(윈도우 환경 변수 설정은 설정 > 시스템 > 정보 > 고급 시스템 설정 > 환경 변수로 들어가서 사용자 변수 또는 시스템 변수의 Path 항목에 JDK의 bin 폴더 경로를 추가하면 된다.)
설치 후 아래와 같이 버전을 확인하여 정상적으로 출력되면 된다.
> java -version
openjdk version "21.0.5" 2024-10-15 LTS
OpenJDK Runtime Environment Temurin-21.0.5+11 (build 21.0.5+11-LTS)
OpenJDK 64-Bit Server VM Temurin-21.0.5+11 (build 21.0.5+11-LTS, mixed mode, sharing)2) Node.js 설치
Node.js LTS, 64bit 버전을 설치한다. 다운로드 링크는 아래와 같다.
– 다운로드 링크 : https://nodejs.org/en/download/package-manager
설치 후 아래와 같이 버전을 확인하여 정상적으로 출력되면 된다.
> node -v
v22.11.0
> npm -v
8.16.0설치 후 기본으로 설치된 npm 버전이 8.16.0으로 낮다. npm을 최신 버전으로 업데이트한다.
(설치 과정에서 빨간 색으로 경고가 출력되거나 설치가 실패할 경우, 관리자 권한으로 Power Shell을 실행한 후, 거기서 실행한다.)
> npm install -g npm@latest
> npm install -g npm-windows-upgrade
> npm-windows-upgrade --npm-path [nodejs 설치 경로] --npm-version latest3) Vue/CLI 설치
Vue/CLI는 커맨드라인 인터페이스로 Vue 관련 패키지 설치, 빌드 및 실행을 할 수 있도록 하는 패키지이다. 본격적으로 프론트엔드를 개발할 때 필요하므로 사전 설치해야 한다.
npm으로 @vue/cli 를 설치한다.
– Vue/CLI 홈페이지 : https://cli.vuejs.org/
> npm install -g @vue/cli4) Gradle 설치
IDE(Eclipse나 IntelliJ)에서 웹 애플리케이션을 실행할 경우 Gradle을 별도로 설치할 필요가 없으나, 콘솔창에서 실행시키고자 할 경우에는 별도의 설치가 필요하다.
– Gradle 설치 가이드 : https://gradle.org/install/
– 다운로드 경로 : https://gradle.org/releases/
윈도우의 경우 홈페이지에서 zip 파일을 다운로드 받아 적당한 위치에 압축을 풀고, 환경변수 Path에 [그레이들 설치 경로]/bin 경로를 등록하면 된다.
2. 프로젝트 생성
1) Spring Boot 프로젝트 생성
Eclipse에서 Spring Starter Project로 프로젝트를 생성(Eclipse의 마켓플레이스에서 Spring Tools 4를 먼저 설치)하거나 Spring Initializr 홈페이지(https://start.spring.io/)에서 프로젝트 템플릿을 생성한다.
IntelliJ의 경우 Ultimate버전에서 Spring Initializr를 지원한다.
[기본 옵션]
– Project : Gradle – Groovy
– Language : Java
– Spring Boot : 3.3.7 (SNAPSHOT)
– Project Metadata : 원하는 대로 설정
– Packaging : Jar
– Java : 21
[Dependencies]
최소한으로 필요한 패키지들을 선택한다. (이 구성은 프로젝트 생성 후 변경 가능하며 기본적으로 웹 애플리케이션을 개발할 때 필요한 구성으로 생성하면 된다.)
– Developer Tools > Spring Boot DevTools, Lombok, Spring Configuration Processor
– Web > Spring Web
– Template Engines > Thymeleaf
– SQL > Spring Data JPA, Spring Data JDBC, MyBatis Framework, H2 Database, MariaDB Driver, Oracle Driver
2) Vue 프로젝트 생성
프로젝트 루트 경로에서 front-end라는 이름으로 Vue 프로젝트를 생성한다.
> vue create front-end생성 과정에서 아래와 같이 옵션을 선택한다.
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter / Formatter, Unit Testing, E2E Testing
? Choose a version of Vue.js that you want to start the project with: 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: ESLint + Standard config
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on: Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No프로젝트 생성 과정에 오류가 발생하지 않으면 Vue 프로젝트 생성에 성공한 것이다.
3) 설치 후, 작업
프론트엔드 Vue 프로젝트를 생성한 후에는, 프로젝트에서 설정한 다양한 Vue 의존 패키지들을 설치해야 한다.
front-end 폴더로 가서 npm install을 실행한다.
> cd front-end
> npm install이때, 오류가 발생하면(의존성 문제로 오류가 발생할 수 있다.) 오류 메시지를 보고 package.json에서 문제가 있는 패키지의 버전을 수정하면 된다.
예) eslint-plugin-vue의 버전 의존성 관련 오류가 발생한 경우
- package.json 파일을 열고 eslint-plugin-vue의 버전을 8.0.3에서 7.0.0으로 수정한다.
- 수정 후, npm install 실행 시, 오류가 없으면 된다.npm install이 오류없이 실행된 후에는 아래와 같이 vue 실행 환경 변수를 수정해야 한다.
front-end/vue.config.js 파일에 outputDir 설정을 추가한다.
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
outputDir: '../src/main/webapp'
})마지막으로 프론트엔드 빌드 출력 폴더를 gitignore에 추가한다. (이 폴더는 실질적으로 매번 프론트엔드 빌드때마다 실행에 필요한 파일이 생성되므로 git으로 관리할 필요가 없다.)
프로젝트 루트 경로에 있는 .gitignore 파일에 아래 경로를 추가한다.
src/main/webapp/4) 실행 방법
front-end 경로에서 프론트엔드 vue 프로젝트를 빌드한다.
> npm run build프로젝트 루트 경로에서 gradle로 웹 애플리케이션을 실행한다.
> gradle bootRun크롬과 같은 웹 브라우저를 실행하여 주소 칸에 localhost:8080을 입력하여 접속해본다.
아래와 같은 Vue 화면이 나오면 모든 작업이 정상적으로 완료된 것이다.
이제 백엔드는 Spring Boot로, 프론트엔드는 Vue.js로 개발할 수 있는 웹 애플리케이션 프로젝트가 만들어졌다. 이렇게 만들어진 기본 프레임워크 위에 코드를 추가하여 여러분이 만들고자하는 웹 애플리케이션을 개발하면 된다. Spring Boot에서 제공하는 안정적인 백엔드 프레임워크와 Vue.js 기반의 보다 쉽고 견고한 프론트엔드 프레임워크로 다양한 웹 애플리케이션을 개발할 수 있을 것이다.
[참고 도서]
제임스 J. 예 저, 김현만, 권봉혁, 변준석 역, 스프링 5와 Vue.js2로 시작하는 모던 웹 애플리케이션 개발, 위키북스, 2020