🍃static & templates 내의 파일 경로명

✔️상황

블로그 웹 페이지를 구현하는 실습을 진행하고 있다.
블로그 화면을 구성하기 위해 html과 js 파일을 작성하였다.
html상에서 삭제 버튼을 클릭했을 때, js파일이 동작하여 파일을 삭제시키는 메소드 요청을 보내야 하는데, 버튼을 눌려도 아무런 반응이 없었다.

✔️원인

두 가지 원인을 생각했다.
1. 삭제 버튼을 인식하기 위해 작성한 html에서의 id값과 js에서의 id값의 불일치 문제
2. js 파일의 경로명 문제

결론은 경로 문제였다.

resources >> static >> article.js 와 같은 경로에 js 파일이 존재했기 때문에, html 파일에서 js 파일의 경로를 작성할 때 /static/article.js로 작성했다.

하지만 SpringBoot는 static, public, resources, META-INF/resources 폴더를 자동으로 정적 리소스 경로로 매핑한다.

예를 들어 src/main/resources/static/article.js 경로명이 있다면
웹에서 접근할 때는 👉🏼 http://localhost:8080/article.js 로 접근하는 것이다.

classpath:/static/
classpath:/public/
classpath:/resources/
classpath:/META-INF/resources/

SpringBoot의 정적 자원 매핑 경로는 위와 같다.

따라서 브라우저에서 접근할 때 /static/article.js가 아니라 /article.js라고 요청하면 Spring이 알아서 static 폴더 내부를 뒤져 찾아주는 것이다.

✔️결론

즉, 폴더명인 static은 경로에서 생략하는 것이 SpringBoot의 규칙임 ❗❗

✔️궁금증

그러면 html 파일이 들어있는 templates 폴더도 마찬가지일까?
=> 아니다.

웹페이지에 http://localhost:8080/templates/article.html 을 요청했을 때 404 에러가 떴다.

templates 폴더는 static 폴더와 다르게 동작한다.

templates 폴더는 정적 리소스가 아니라 템플릿 엔진이 처리하는 동적 리소스이다.
보통 Thymeleaf, Mustache, Freemarker 같은 템플릿 엔진에서 사용된다.

따라서 templates 안에 있는 파일들은 직접 URL로 접근할 수 없고, Controller에서 해당 파일 이름을 리턴해야 뷰로 렌더링된다.

@Controller
public class BlogController {
    @GetMapping("/blog")
    public String getBlogPage(Model model) {
        model.addAttribute("title", "블로그 제목");
        return "blog";  // → templates/blog.html 렌더링
    }
}