14. 프론트엔드 라이브러리 설정
WebJar vs NPM
> 개인적으로는 WebJar보다는 NPM 선호
> WebJar는 라이브러리 업데이트가 느리다. 심지어 올라오지 않은 라이브러리도 많다.
스프링 부트와 NPM
> src/main/resource/static 디렉토리 이하는 정적 리소스로 제공한다. (스프링 부트)
> package.json에 프론트엔드 라이브러리를 제공한다.
> 이 둘을 응용하면, 즉 static 디렉토리 아래에 package.json을 사용해서 라이브러리를 받아오면 정적 리소스로 프론트엔드 라이브러리를 사용할 수 있다.
빌드는 어떻게?
> Gradle의 build.gradle (or 메이븐 pom.xml)을 빌드 할 때 static 디렉토리 아래에 있는 pacakge.json도 빌드하도록 설정해야 한다.
> 빌드를 안하면 프론트엔드 라이브러리를 받아오지 않아서 뷰에서 필요한 참조가 끊어지고 화면이 제대로 보이지 않는다.
부트스트랩을 스프링부트에 npm으로 설정해보자.
프론트엔드 라이브러리 설정하기
1. /static 경로로 이동
2. npm install 하기
npm ini (= init)
package.json 생성 확인하기
3. bootstarp 설치
npm install bootstrap
4. jquery 설치
위의 과정이 정상적으로 진행되었으면 package.json은 다음과 같이 구성된다.
뷰 화면 적용
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title>Dot Study</title>
<!-- bootstrap 설정 -->
<link rel="stylesheet" href=/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<style>
.container{
max-width: 100%;
}
</style>
</head>
<body class="bg-light">
<nav th:fragment="main-nav" class="navbar navbar-expand-sm navbar-dark bg-dark">
...
</nav>
<div class="container">
...
</div>
<!-- jquery, bootstrap bundle 설정 -->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="application/javascript" th:fragment="form-validation">
(function () {
}())
</script>
</body>
</html>
git.ignore 파일에 아래 코드 추가
### NPM ###
src/main/resources/static/node_modules
빌드는 어떻게?
build할 때 static 디렉토리 아래에 있는 pacakge.json도 빌드하도록 설정해야 한다.
> 빌드를 안하면 프론트엔드 라이브러리를 받아오지 않아서 뷰에서 필요한 참조가 끊어지고 화면이 제대로 보이지 않는다.
Gradle의 경우
build.gradle
> gradle의 경우에는 마땅한 자료를 찾기 어려웠다... 이래서 maven을 쓰는건가 싶었다...
plugins {
//https://github.com/siouan/frontend-gradle-plugin
id "org.siouan.frontend-jdk11" version "4.0.0"
}
apply plugin: 'org.siouan.frontend-jdk11'
frontend {
nodeDistributionProvided = false
nodeInstallDirectory = file("${project.projectDir}/src/main/resources/static/node")
packageJsonDirectory = file("${project.projectDir}/src/main/resources/static")
nodeVersion = '15.3.0'
assembleScript = 'run build'
cleanScript = 'run clean'
checkScript = 'run check'
}
> ./gradlew clean을 하면 아래와 같은 에러가 발생하는데 몇시간 죽썼지만 고치질못했다;
일단은 작동은 되어서 스킵하겠다. (git issue에 등록)
> Task :cleanFrontend FAILED
npm ERR! missing script: clean
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ijong-won/.npm/_logs/2020-11-30T13_33_47_045Z-debug.log
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':cleanFrontend'.
> Process 'command '/bin/sh'' finished with non-zero exit value 1
Maven의 경우
pom.xml
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.8.0</version>
<configuration>
<nodeVersion>v4.6.0</nodeVersion>
<workingDirectory>src/main/resources/static</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
</executions>
</plugin>
접근 경로 에러 발생
그런데 실행하면 아래와 같이 에러가 발생한다.
csrf 토큰때처럼 Spring Security 관련 버그이다.
이미지파일을 첨부할 때 SecurityConfig에 아래와 같이 static파일 접근을 허용한 코드가 있다.
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring()
.requestMatchers(PathRequest.toStaticResources().atCommonLocations());
}
그런데 atCommonLocations()는 흔히 말하는 위치로 아래에 있는 경로만 해당된다.
요청 자체가 /node_modules로 접근하기 때문에 해당 경로를 넣어주면 된다.
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring()
.mvcMatchers("/node_modules/**") // /node_modules/** 도 무시
.requestMatchers(PathRequest.toStaticResources().atCommonLocations());
}
설정에 /node_modules를 추가하니 정상적으로 작동하는 것을 확인할 수 있다.
참고
'Dot Programming > Spring Clone' 카테고리의 다른 글
| [스프링 웹앱 프로젝트 #15] 첫 페이지 보완 (Fontawesome, Jdenticon 사용) (0) | 2020.12.01 |
|---|---|
| [스프링 웹앱 프로젝트 #14] 뷰 중복 코드 제거 (0) | 2020.11.30 |
| [스프링 웹앱 프로젝트 #12] 회원 가입 메인 네비게이션 메뉴 (0) | 2020.11.27 |
| [스프링 웹앱 프로젝트 #11]회원 가입 완료 후 자동 로그인 (0) | 2020.11.26 |
| [스프링 웹앱 프로젝트 #10]회원 가입 인증 메일 확인 테스트 및 리팩토링 (0) | 2020.11.19 |
