[Spring boot] CSS, JS 사용하기

김정배·2024년 1월 26일

트러블슈팅

목록 보기
1/2

✨ 작성 계기


Spring boot 에서 Thymleaf 와 필요한 css,js 는 부트스트랩에서 사용을 하였다
팀프로젝트를 하면서 우리가 원하는 홈페이지를 원하는대로 만들기 위해서는
어느정도 기본적인 틀과 css,js를 직접 사용을 해야겠다는 생각이 들었다.
그래서 직접 사용하려고 보니 codepen이나 vscode에서 연습만 해보고
직접적으로 Spring boot에 사용을 해본적이 없기 때문에 기본적인 적용 방법에 대해 제대로 알지를 못하였다

🧨 첫번째

spring boot에서 CSS,JS 적용하는 방법

CSS

1.HTML 태그에 직접 적용 (Inline)
2.HTML head 영역에 <style> 태그 사용 (Internal)
3.HTML 외부에 CSS파일을 링크하여 사용 (Linking)


다음과 같은 화면을 출력한다는 가정

1.HTML 태그에 직접 적용 (Inline)

  • Html 코드에 style 속성을 사용하여 직접 스타일을 지정
    <body>
 <h1 style="color: blue;">테스트 제목입니다.</h1>
 <p style="font-size: 20px; color: red;"> 내용 입니다.</p>
</body>
  • 단점
    1.꾸미는데 한계가 있고 재사용에 불가능하다
    2.코드가 길어질수록 코드를 읽기 어려워진다

2.HTML head 영역에 <style> 태그 사용 (Internal)

  • 스타일을 head 영역에 분리시켜서 지정
  • HTML5 기준 <style> 을 사용하면 적용 가능
    <head>
  <meta charset="UTF-8">
  <title>테스트</title>
  <style>
      h1 { color: blue; }
      p {font-size: 20px; color: red;}
  </style>
</head>
<body>
  <h1>테스트 제목입니다.</h1>
  <p> 내용 입니다.</p>
</body>
  • 단점
    1.HTML 문서 안에서 여러가지를 한번에 꾸미기만 가능,다른 HTML에 적용 불가능
    2.HTML이 길어지고 꾸미는게 많을수록 HTML 파일 내부에 코드가 길어짐

3.HTML 외부에 CSS파일을 링크하여 사용 (Linking)

  • .css 파일을 외부에 따로 만들고 head 영역에 link 태그로 연결

    기본 디렉토리 구성



    -aaa.test.html

    <head>
  <meta charset="UTF-8">
  <title>테스트</title>
  <link rel="stylesheet" href="/test.css" type="text/css">
</head>
<body>
  <h1>테스트 제목입니다.</h1>
  <p> 내용 입니다.</p>
</body>

    -test.css

    h1 { color: blue; }
p {font-size: 20px; color: red;}

    링크를 사용하여 css 외부 파일을 적용 가능
    <link rel="stylesheet" href="/test.css" type="text/css">
    에서 rel속성은 현재 문서와 연결되는 문서/파일의 관계를 의미
    CSS의 경우 stylesheet 라는 속성을 적어주어야 함.

    JavaScript

    1.HTML head 영역에 <script>태그 사용
    2.HTML 내부에 <script th:inline="javascript"></script> Thymleaf 사용
    3.HTML 외부에 JS파일을 링크하여 사용


    다음과 같은기능을 구현한다고 가정

    1.HTML head 영역에 <script>태그 사용

    <head>
  <meta charset="UTF-8">
  <title>테스트</title>
  <script>
      function btn_alert(str) {
          alert(str);         }
  </script>
</head>
<body>
<button onclick="btn_alert('정상작동 확인입니다')"> 테스트 버튼 </button>
</body>

  • 단점
    html 내에 js문을 작성하게 되면 코드의 유지보수가 어렵다

    예를 들어 css 도 적용하고 js 도 적용하고 html 도 구성을 한다고 했을 때
    한 파일안에 코드들이 너무 많아지고 수정하기도 어려워 진다.

2.HTML 내부에 <script th:inline="javascript"></script> Thymleaf 사용

<body>
<script th:inline="javascript">
      function btn_alert(str) {
          alert(str);         }
</script>
<button onclick="btn_alert('정상작동 확인입니다')"> 테스트 버튼 </button>
</body>

  • 단점

    HTML head 영역에 <script>태그 사용때와 마찬가지로
    유지보수 측면에서 좋지 않다

3.HTML 외부에 JS파일을 링크하여 사용

기본 디렉토리 구성

-aaa.test.html

  <head>
    <meta charset="UTF-8">
    <title>테스트</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
</script>
<button onclick="btn_alert('정상작동 확인입니다')"> 테스트 버튼 </button>
</body>

-test.js

function btn_alert(str) {
      alert(str);
}

결론 ❗

각각의 코드를 유지보수 하거나 코드 재사용하기 좋다

대부분의 사이트들이 이와같이 외부에 파일을 두고 HTML을 관리

🧨🧨 두번째

CSS 파일 적용 오류

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>테스트</title>
    <script src="test.js" type="text/javascript"></script>
    <link rel="stylesheet" th:href="@{/staic/test.css}" type="text/css">
</head>
<body>
    <h1>테스트 제목입니다.</h1>
    <p> 내용 입니다.</p>
    <button onclick="btn_alert('정상작동 확인입니다')"> 테스트 버튼 </button>
</body>
</html>

위와같이 디렉토리를 구성하고 css를 html에 Thymleaf로 링크 하였음.

이와같은 에러가 나오면서 CSS가 적용이 되지 않음.

❓ 적용 되지 않은 이유 와 해결

기본적으로 Spring Boot는 클래스패스의 static 디렉토리에서 정적 리소스를 찾는다.
/resources/static에 위치한 test.css는 정적 리소스로 간주된다.

Spring Boot에서 정적 리소스를 제공하기 위해 사용되는 기본 디렉토리는 
src/main/resources/static이다. 그래서 @{/test.css}로 작성 해주어야
실제로 클래스패스의 static 폴더에서 test.css를 찾아주는 것이다.

일반 link로 할때의 경로는 href="{/test.css}"
Thymeleaf 를 이용할때 경로는 th:href="@{/test.css}" 설정하면 기본적으로 사용할수 있다.

👍 해결 방안 1. 스프링 부트 정적 리소스 설정 변경

application.yml에서 변경

thymeleaf:
  prefix=classpath: templates/
  suffix: .html
  check-template-location: true
  cache: false
mvc:
  static-path-pattern: "/static/**"
prefix: 파일의 시작위치
suffix: 파일의 확장자명
check-template-location: 파일의 존재 여부 확인
cache: 캐시 저장 여부
static-path-pattern: 정적 파일 경로 지정

application.properties 에서 변경

spring.mvc.static-path-pattern: 맵핑 설정 변경 가능
spring.mvc.static-locations: 리소스 찾을 위치 변경 가능

예를 들어 모든 리소스를 /newsource/ 로 재배치하고 싶다면
spring.mvc.static-path-pattern: /newsource/ 를
application.properties에 추가하면 된다.

하지만 application.properites를 통해서 설정변경을 한다면
스프링 부트에 기본으로 등록되어 있는 정적리소스의 location들을 사용하지 못하게 된다.
기본 등록되어 있는 리소스는 유지한채 새로 리소스를 추가할 수 있는 방법을 이용해야 한다.

👍 해결 방안 2. 스프링 부트 정적 리소스 추가방법

@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/static/**")
              .addResourceLocations("classpath:/static/")
              .setCachePeriod(100);
  }
}

WebConfig 설정파일을 하나 만들고 WebMvcConfigurer
인터페이스를 상속받아 addResourceHandlers()를 구현한다.
.addResourceHandler와. addResourceLocations를 이용해 경로설정을 추가해 준다.
이렇게 하면 기본 resourceHandler는 유지하면서 새로운 resourceHandler를 추가할 수 있다.

profile
김정배
다음 포스트

Spring Security 및 CSRF 토큰

0개의 댓글