0. 프로젝트 개요
Spring 의 MVC 패턴을 이용하여 기본적인 CRUD 를 구현하는 프로젝트
README 참고 : https://github.com/wootaepark/SpringSchduler
1. 배경
프런트도 아래와 같이 이쁘게 만들고 백엔드 연동까지 잘 되었다.
하지만 해당 프런트 코드는 하나의 html 파일 내부에 css 파일과 js 파일이 섞여 있어서 매우 긴 코드였고 나는 이 코드를 디렉토리에 분리해서 사용하려고 하였다.
=> 위처럼 모든 코드를 한 파일에 넣었을 때는 잘 되었다. 이때 디렉토리 구조는 아래와 같다.
├── resources
│ ├── static
│ │── │──index.html
│ ├── │──script.js
│
├── ├── templates
│ ├── ├── viewSchedule.html
├── 분리 이전에 메인 페이지를 나타내는
index.html과 백엔드로의 요청을 담당하는script.js는 분리가 되어 있었고 이경우는 두 코드가 모두 잘 동작하였다.
저 상태에서는thymeleaf가 사용하는 공간인templates의viewSchedule.html파일 또한 아래 컨트롤러를 통해 접근이 가능하게 하여 잘 동작한다.
- ScheduleViewController.java
package com.sparta.springscheduler.viewController;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ScheduleViewController {
@GetMapping("/view")
public String view(Model model) {
return "viewSchedule";
}
}
2. 발단
복잡한 html 의 코드의 css, js 코드를 분리하기 위해 위와 같이 디렉토리 화 하였다.
그리고 아래와 같이 html 코드를 작성하였다.
<link rel="stylesheet" href="../static/css/view.css">
...
<script src="../static/js/view.js"></script>현재 html 파일과 해당 파일의 상대적인 위치를 나타냈는데 아래와 같이 적용이 안되는 것을 볼 수 있었다.
3. 전개
인터넷을 검색해보니 아래와 같이 thymleaf 전용으로 th: @ 와 같은 추가 문법이 존재한다는 것을 확인하고 이를 적용해보았다.
<link th:href="@{../static/css/main.css}" rel="stylesheet" />
<script th:src="@{../static/js/view.js}"></script>하지만 여전히 위와 같은 문제가 발생하였다.
4. 위기 & 절정
처음에는 단순한 오타나 디렉토리 구조가 잘못된 줄 알았다.
하지만 좀더 찾아 보니Thymleaf엔진은 spring 디렉토리에서
resource 내부의 static 폴더내부에서 css, js 파일을 가져온 다는 것을 확인!!
알고보니 위 이유 때문에 상대경로가 아닌 절대 경로로서 ../ 와 같이 시작하는 것이 아닌 /css/main.css, /js/view.js 와 같이 / 로 시작하는 절대 경로로 설정을 해야한다는 사실을 알게됨
6. 결말
<link th:href="@{/css/main.css}" rel="stylesheet" />
<script th:src="@{/js/view.js}"></script>위와같이 기본적으로 thymleaf 는 static 폴더 내부의 파일을 감지하기 때문에 위와 같이 static 을 제외한 절대경로를 통해 적용하니 아래와 같이 정상적으로 동작하는 것을 알 수 있었다.
- 참고로 아래와 같이 구지
th:@와 같이thymleaf전용 문법을 사용하지 않아도 동작하는 것을 알 수 있었다.
<link rel="stylesheet" href="/css/view.css">
<script src="/js/view.js"></script>