[인프런 강의] 스프링 부트 개념과 활용 - 6

1. 스프링 웹 MVC - 정적 리소스 지원

정적 리소스란 웹 브라우저 또는 클라이언트에서 요청이 들어왔을 때, 그에 대한 응답이 미리 만들어져 있을 경우에 새로 만들지 않고 그대로 보내주는데 이때 그 응답의 내용을 정적 리소스라고 할 수 있다. 

기본적으로 아래의 네가지 경로에 있는 리소스의 경우 정적 리소스로 맵핑되어 제공이 될 수 있다. (단, classpath:가 의미하는 것은 src/main/resource이다.)

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

위 내용을 확인하기 위해서 src/main/resource에 static폴더를 만들고 hello.html파일을 만들어 보자.

이후 스프링부트 애플리케이션을 실행한 다음 localhost:8080/hello.html을 입력하면 이 정적 리소스를 반환해주는 것을 확인할 수 있다.

이와 같이 정적 리소스로 맵핑하는 경로에 위치한 파일은 요청에 대해 미리 준비된 상태로 응답되게 된다.

이때 요청하는 주소는 기본적으로 root부터 시작하므로 /hello.html으로 요청하였지만 이것을 바꿀 수 도 있다. application.properties에 spring.mvc.static-path-pattern의 값을 설정해주면 된다. 

이렇게 하면 더이상 localhost:8080/hello.html로 해당 파일을 불러올 수 없고, localhost:8080/static/hello.html로 요청해야 불러올 수 있게 된다. (여기서 /** 이 정적 리소스를 맵핑해주는 역할을 한다는 것을 알 수 있다.)

 

+ 리소스 핸들러 커스터 마이징

WebMvcConfigurer의 addResourceHandlers를 오버라이드 하여 커스터마이징 할 수 있다. 즉, 위에 언급한 네 가지 경로 외에 정적 리소스의 path를 추가하고 싶을 때 이 방법을 이용하면 된다. 

 

WebMvcConfigurer의 addResourceHandlers 오버라이드

classpath에 m폴더 밑에 hello.html

localhost:8080/m/hello.html

위의 과정을 살펴보면 이렇게 커스터마이징 함으로서, 웹과 앱의 뷰를 분리할 수도 있겠다 라는 짐작을 할 수 있다. 위와 같이 커스트마이징한 정적 리소스 패스를 사용하면 상황에 따라 원하는 리소스로 응답해 줄 수 있게 된다. 이때 주의할 점은 addResourceLocations의 매개변수는 반드시 /로 끝나야 매핑이 잘 된다!! ( 놓치면 삽질하기 좋은 부분... )

 

2. 스프링 웹 MVC - 웹 JAR

스프링 부트는 정적 리소스 뿐만 아니라 웹 JAR파일 또한 자동으로 맵핑해준다. 이것이 의미하는 것은 예를 들어 css파일이나 javascript파일은 물론 리액트 등으로 작성된 코드들을 웹 JAR파일로 맵핑하여 사용한다는 것이다. 이를 위해서 해당 의존성을 추가하고 맵핑 코드를 넣어서 사용해야 한다. 갈수록 말로 표현하기는 참 어렵다... 그냥 코드로 확인하면 직관적으로 이해가 갈 것이다.

 

1) 여기선 jquery를 사용할 수 있는지 확인하기 위해 jquery 의존성을 추가해준다. (이때 버전을 생략하고 싶다면 webjars-locator-core 의존성을 추가해주면 된다.)

 

2) jquery 문법을 통해 코드를 작성한다. 

3) jquery가 잘 사용되었음을 확인할 수 있었다.

여기서는 jquery만 살펴보았지만, 실제로 프론트에 해당하는 파일들이 모두 이런 식으로 사용된다고 한다. 다음에 웹 JAR에 대한 내용을 따로 정리해 보아야겠다. 

 

3. 스프링 웹 MVC - index페이지와 파비콘

index페이지는 쉽게 말해서 welcome페이지라고 할 수 있다. 이것은 우리가 localhost:8080을 입력했을때 보이는 페이지를 의미한다.(루트 페이지라고도 한다.) 지금까지의 과정 중에서는 localhost:8080을 입력하면 whitelabel error page를 볼 수 있었다. 이것은 웰컴 페이지가 설정되어 있지 않아서 찾지 못했기 때문에 나타나는 화면이라고 보면 된다. 

 

웰컴 페이지의 경우 아래와 같이 설정된다. 이때 파일이 위치할 곳은 위에서 정적 리소스로 맵핑해주는 경로 네가지중 한 곳이면 된다. 

* 주의할 점은 spring.mvc.static-path-pattern값을 새로 정의해주면 루트자체가 바뀌기 때문에 작동하지 않았다.(이것을 해결하는 방법은 따로 있을 것 같다.)

• index.html 찾아 보고 있으면 제공.
• index.템플릿 찾아보고 있으면 제공.
• 둘 다 없으면 에러 페이지.

 

파비콘이란 웹페이지를 띄웠을때 해당 탭에 표시되는 이미지이다. 이것을 바꾸는 것은 아주 간단하다.

1) favicon.io 페이지에 접속하여 원하는 모양으로 파비콘을 만든다.

2) 파일이름을 favicon.ico로 하고 위의 리소스 패스 네 가지 중 한 곳에 위치시킨다.

* 파비콘이 바뀌지 않을 시 참고 사이트 https://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh