SpringBoot에서 경로 static

Q1.

Java gradle로 제작한 springboot 프로젝트에서, static 경로가 쓰이는 상황이 뭐지?

 

 

 

A1.
Spring Boot 프로젝트에서 static 경로는 주로 정적 리소스를 제공하기 위해 사용됩니다. Gradle을 이용해 생성된 Spring Boot 프로젝트의 기본 구조에서 src/main/resources/static 디렉토리는 웹 애플리케이션의 정적 파일(HTML, CSS, JavaScript, 이미지 등)을 놓는 위치입니다.

static 경로의 사용 상황

 

 

1. 정적 웹 자원 제공:

1) 사용자가 요청할 때 서버가 별도의 로직 없이 파일을 직접 반환해야 하는 경우입니다.

 

2) 예를 들어, 웹 페이지의 스타일을 지정하는 CSS 파일이나 클라이언트 측에서 실행되는 JavaScript 파일, 이미지 등을 static 디렉토리에 저장해두면, Spring Boot가 /css/style.css, /js/app.js 등과 같은 경로로 클라이언트 요청에 자동으로 응답합니다.

 

 

2. 템플릿 엔진과 함께 사용:

1) Spring Boot에서 Thymeleaf, Mustache와 같은 템플릿 엔진을 사용할 때, HTML 템플릿은 src/main/resources/templates 디렉토리에 두고, 그 템플릿에서 사용하는 정적 자원(CSS, JS, 이미지 등)은 static 디렉토리에 두어 템플릿과 함께 웹 페이지를 구성할 수 있습니다.

 

2) 예를 들어, Thymeleaf 템플릿에서 CSS 파일을 사용하려면 <link rel="stylesheet" href="/css/style.css">와 같이 static 경로의 파일을 링크할 수 있습니다.

 

 

3. REST API 및 웹 애플리케이션 혼합 제공:

1) Spring Boot 애플리케이션이 REST API와 함께 간단한 웹 애플리케이션의 정적 페이지도 제공할 경우, static 디렉토리에 필요한 파일들을 배치하여 /home.html과 같은 경로로 페이지를 제공할 수 있습니다.

 

2) 이 방식은 API 서버와 프론트엔드가 함께 배포되는 경우에 유용합니다.

 

 

Spring Boot에서 static 경로 기본 설정

 

Spring Boot는 static, public, resources, META-INF/resources 디렉토리 내의 파일을 자동으로 서빙하도록 설정되어 있습니다. 이는 추가적인 설정 없이도 정적 자원을 효율적으로 제공할 수 있게 해 줍니다.

혹시 추가적인 설정이나 다른 경로에 정적 자원을 배치하고 싶은 경우, application.properties에서 spring.web.resources.static-locations 설정을 통해 경로를 조정할 수 있습니다.

 

 

 

Q2.

만약, static안에 img 폴더를 만들고 거기에 html 뷰파일들이 쓸 이미지들을 두었어. 그런데, view로 쓸 html들은 resource의 templates에 있는데, 그 뷰 파일들을 비주얼 스튜디오 코드의 익스텐션인 라이브 서버로 기동했을 경우, 해당 뷰파일이 쓸 이미지 파일은 제대로 읽어오지 않고, templates 밑으로 옮겨야 하더라고. 원래 이런거야?

 

 

 

A2.

네, 설명하신 상황이 발생하는 이유는 Spring Boot의 리소스 로딩 방식과 Visual Studio Code의 Live Server 익스텐션이 동작하는 방식이 다르기 때문입니다.

 

이유 설명

 

1. Spring Boot의 정적 리소스 제공 방식:

1) Spring Boot는 src/main/resources/static에 있는 파일을 기본적으로 / 경로에서 서빙합니다. 예를 들어, static/img/logo.png 파일은 웹 브라우저에서 /img/logo.png로 접근 가능합니다.

 

2) 따라서, Spring Boot 애플리케이션으로 실행하면 templates 폴더에 있는 HTML 템플릿에서 /img/logo.png로 접근하여 이미지를 사용할 수 있습니다.

 

 

VS Code의 Live Server 익스텐션 동작 방식:

 

1) VS Code의 Live Server는 HTML 파일이 있는 디렉토리를 기준으로 정적 파일을 로드합니다. 즉, templates 폴더 아래의

HTML 파일을 브라우저로 열 때, 해당 HTML 파일에 설정된 이미지 경로를 그대로 탐색하는 방식입니다.

 

2) 이때 static/img/ 경로를 인식하지 못하고 templates/img/ 경로에 이미지를 찾으려고 하기 때문에 문제가 발생합니다.

 

 

해결 방법

1. Spring Boot로 애플리케이션 실행:

1) VS Code의 Live Server 대신 Spring Boot 애플리케이션을 실행하여 localhost:8080 같은 서버로 접근하면 Spring Boot의 정적 리소스 제공 방식이 적용되어 정상적으로 동작합니다.

 

2. VS Code에서 접근할 수 있도록 이미지 경로를 HTML에서 상대 경로로 설정:

1) HTML 파일에서 이미지 경로를 /img/logo.png 대신 상대 경로(../static/img/logo.png 등)로 설정하면 Live Server에서 로드할 때에도 정상적으로 표시될 수 있습니다. 다만, 이 경우 Spring Boot에서 실행할 때 경로 문제가 생길 수 있습니다.

 

3. 템플릿 파일에 넣기:

1) 말씀하신 것처럼 이미지를 templates 폴더에 넣는 것도 한 가지 해결 방법입니다. 다만, 이는 프로젝트 구조상 권장되지 않습니다. 정적 파일은 static 폴더에, 동적 HTML 템플릿은 templates 폴더에 위치시키는 것이 유지보수에 좋기 때문입니다.

 

추가 권장 사항

 

개발 환경에서는 Spring Boot 애플리케이션을 기동하여 테스트하고, 필요한 경우 VS Code의 Live Server는 프론트엔드 리소스 단독으로 작업할 때 사용하는 것이 좋습니다.



Q3.

일단 이미지파일들을 templates에 넣었는데, 당장에 문제는 없겠지?

 

 

 

A3.
네, 이미지 파일들을 templates 폴더에 넣는 방식으로 당장에는 큰 문제가 없을 것입니다. HTML 템플릿 파일에서 이미지를 불러오는 데도 문제가 없을 테니, 개발 속도 면에서는 편리하게 사용할 수 있습니다.

 

하지만 장기적으로 권장되지 않는 이유

 

1. 프로젝트 구조:

 

1) 일반적으로 Spring Boot에서는 정적 파일(이미지, CSS, JS 등)을 static 폴더에 두고, 템플릿 파일은 templates 폴더에 둡니다. 이렇게 분리해두면 유지보수 시 파일을 관리하기 쉽고, 다른 개발자가 프로젝트 구조를 빠르게 이해할 수 있습니다.

 

2. 템플릿 엔진 처리:

 

1) templates 폴더에 있는 파일들은 Spring Boot에서 템플릿 엔진(예: Thymeleaf, Mustache)에 의해 처리됩니다. 따라서, 만약 HTML 외의 파일들을 템플릿 엔진이 처리하게 된다면 성능에 약간의 영향을 줄 수도 있습니다.

 

3. 배포 시 최적화 문제:

1) 프로젝트를 배포할 때, 정적 자원은 브라우저의 캐싱 및 압축 등의 최적화를 거치기 때문에 static 폴더에 있는 것이 좋습니다. 하지만 templates에 위치한 파일은 일반적으로 동적으로 처리되는 자원으로 간주됩니다.

 

 

지금과 같은 상황에서는?

 

지금과 같은 개발 단계에서는 templates에 이미지 파일을 둬도 큰 문제는 없습니다. 다만, 프로젝트가 안정화되고 배포 준비를 할 때는 파일을 static 폴더로 옮기고 Spring Boot 애플리케이션으로 테스트하는 것을 추천드립니다.