thymeleaf 와 tailwind 로 자바 서블릿 프로젝트 구성하기

 

개발환경 : 

MacOS Sonoma

IntelliJ Ultimate

springboot 3.1.5

yml

gradle8.3(multi-module) 

jpa

thymeleaf

tailwindcss

node 21.1.0

npm 10.2.3

 

 

기본적인 백엔드 REST API 구성이 가능한 상태임을 가정하여 build.gradle 설정부터 보겠습니다.

 

이 프로젝트는 multi-module 구성입니다(매우 단순)

최상단에서 백엔드를 담당하는 API모듈과 프론트를 담당하는 VIEW 모듈 두개 있는 게 전부이고

두개의 모듈은 common 모듈을 의존하고 있습니다

 

이 글에서는 VIEW 모듈만 보면 다루고 있습니다

("..."으로 표현한 곳은 개인 환경과 관련된 부분이며 이 글과는 상관없는 부분들입니다)

 

최상단 build.gradle

plugins {
	...
    id "com.github.node-gradle.node" version "7.0.1"
}

...

subprojects {
	...
    apply plugin: 'com.github.node-gradle.node'
	...
}

...

 

VIEW 모듈 build.gradle

dependencies {
	...
}

// 현재 프로젝트 경로 확인
// println  "  projectDir-view:   ${project.projectDir}";

node {
    version = '21.1.0'
    npmVersion = '10.2.3'
    download = true
    nodeProjectDir = file("${project.projectDir}/src/main/front-modules")
}

// npm install
task vesselViewNpmInstall(type: NpmTask) {
    workingDir = file("${project.projectDir}/src/main/front-modules")
    args = ["install"]
}

// npm build
task vesselViewNpmBuild(type: NpmTask) {
    workingDir = file("${project.projectDir}/src/main/front-modules")
    args = ["run", "build"]
}

vesselViewNpmBuild.dependsOn vesselViewNpmInstall
compileJava.dependsOn vesselViewNpmBuild

 

저는 main 아래 경로에 front-modules 라는 이름으로 프론트에 사용될 모듈들을 모아놓을 생각입니다

node 패키지가 설치되어있다는 가정하에 설명드립니다

front-modules 디렉토리 안에 package.json을 생성합니다

저는 tailwind와 jquery를 기반으로 프론트를 구축할 것이기 때문에 아래와 같이 하였습니다

더 추가로 더 의존성이 필요하신 분들은 dependencies에 추가하시면 됩니다

{
  "name": "front-modules",
  "private": true,
  "scripts": {
    "build": "./build.sh",
    "watch": "tailwindcss -i ./main.css --watch"
  },
  "dependencies": {
    "jquery": "^3.7.1",
    "tailwindcss": "^3.3.5"
  }
}

 

scripts 하위에 "watch" 부분은 아직 사용하고 있지 않으며

"build" 부분은 따로 쉘파일을 생성하여 작성했습니다

 

현재 경로에 tailwind.config.js 파일과 build.sh파일을 생성하고 작성합니다

 

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["../resources/templates/*.{html,js}", "../resources/templates/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms')
  ],
}

 

build.sh

#!/bin/bash
tailwindcss -i ./main.css -o ../resources/static/css/main.css
cp node_modules/jquery/dist/jquery.min.js ../resources/static/js/env/jquery.min.js

 

이 부분을 build.gradle에 정의하여 gradle 빌드 시 자동화 처리되도록 할수도 있지만
저는 쉘이 더 익숙하기도 하고 개인적으로 gradle은 의존성 구성이 복잡하다고 느껴졌기 때문에 쉘로 작성하였습니다

 

tailwindcss가 어떻게 동작하는 지는 모르겠지만 tailwind.config.js 파일을 읽어 main.css에 css파일을 자동으로 작성하는 것 같습니다

-i 옵션으로 main.css에 작성하고, -o 옵션으로 원하는 경로에 output 하는 것 같습니다

 

VIEW 모듈의 build.gradle 에서 npm install 및 build 를 하도록 해놓았기 때문에
이렇게 파일 생성까지만 해놓고 프론트 프로젝트를 실행하면 static경로 하위에 제가 설정한 대로 셋팅 됩니다

 

(저는 static 하위에 js/env/ 라는 디렉토리를 생성해 자바스크립트 공통 라이브러리를 모아놓았고, css 디렉토리를 생성해 css만 모아놓는 공간을 만들어 놓았습니다. 이 부분을 개인 환경에 맞도록 build.sh 도 수정되어야 할 것입니다)

 

참고로 VIEW 모듈의 application.yml 설정은 다음과 같습니다

server:
  ...
  servlet:
    context-path: /view


spring:
  application:
    name: ...
  thymeleaf:
    suffix: .html
  web:
    resources:
      static-locations: classpath:/static/

 

이렇게 셋팅해놓은 후 VIEW 모듈의 프로젝트를 실행시키면

static/css 경로에 main.css 가 생성되어 있습니다

static/js/env 경로에 jquery.min.js 가 생성되어 있습니다

 

이제 사용하기만 하면 됩니다

 

 

그냥 수동으로 파일 복사해다가 놓으면 되는데 왜 이렇게 복잡하게 하는 지 궁금하시다면 좋은 궁금증입니다

그에 대한 답은 다음과 같습니다

 

1. 이 프로젝트는 나 혼자 관리하지 않는다

2. 이 프로젝트는 모듈화 되어 jar파일로 배포될 것이다

3. 내일의 나는 오늘의 내가 아니다

4. 세상은 빠르게 변하고 오픈소스도 마찬가지이다

 

그럼 이만