Spring 입문주차/1주차

9. 정적 페이지와 동적 페이지

note994 2024. 8. 13. 15:01

정적 페이지 처리하기

static 폴더에서 New -> HTML File

파일 이름은 "hello"로 지정

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Spring</title>
</head>
<body>
Hello, Spring 정적 웹 페이지!! (static)
</body>
</html>

이 코드를 작성한다.


SpringBoot 서버에 html 파일을 바로 요청하면 해당 html 파일을 static 폴더에서 찾아서 반환해준다.

그렇다면 Controller를 거쳐서 html을 반환할 수도 있을까?

물론 가능하다. 하지만 이미 완성된 정적인 html 파일을 Controller를 통해서 반환할 필요는 없다.

Controller를 통해서 반환하는 것을 테스트 하려면

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

해당 dependency를 주석 처리해야 테스트가 가능하다.(이렇게 하는 의미는 별로 없다. 단순 테스트용)

thymeleaf는 동적 페이지 처리를 위한 템플릿 엔진이다. 추가하면 자동으로 Controller에서 html 파일 찾는 경로를  /resources/templates 로 설정한다.

htmlcontroller 패키지를 만들고 그 안에 HtmlController java 파일을 만든다.

@GetMapping("/static-hello")
public String hello() {
    return "hello.html";
}

static-hello URL을 가진 get 요청이 오면 hello.html 페이지를 보여주는 코드를 작성한다.

 

하지만 주석처리를 하지 않고 http:localhost:8080/static-hello 를 주소창에 쳐서 요청하면 이런 오류 페이지가 나타나게 된다. 

 

원하는 페이지를 받기 위해선 http:localhost:8080/hello.html로 직접 접근을 해야한다.


redirect

 

그렇다면 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' 를 주석처리하지 않고 controller를 통해 html을 반환할 수 없을까?

 

그럴땐 redirect를 사용하면 된다.

 

@GetMapping("/static-hello")
    public String hello() {
        return "redirect:/hello.html";
    }

 

이렇게 하면 /static-hello 경로를 통해서도 hello.html을 반환해준다.


Template engine에 View 전달

 

이번에는 templates 폴더에 hello.html을 작성한다. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Spring</title>
</head>
<body>
Hello, Spring 정적 웹 페이지!! (templates)
</body>
</html>

 

그리고 HtmlController에 아래의 코드를 추가해준다.

@GetMapping("/html/templates")
    public String htmlTemplates() {
        return "hello";
    }

실행시키고 http:localhost:8080/html/templates URL을 입력하면 페이지가 정상적으로 나온다.

 

static 폴더에 있는 html파일을 바로 호출하는 방법이 가장 간단하지만 외부 즉, 브라우저에서 바로 접근하지 못하게 하고 싶거나 특정 상황에 Controller를 통해서 제어하고 싶다면 이렇게 templates 폴더에 해당 정적 html 파일을 추가하고 해당 html파일명인 "hello" 문자열을 반환하여 처리할 수 있다. return할 때 .html은 생략이 가능하다.


동적 페이지 처리하기

templates 폴더에 hello-visit.html 파일을 만든다.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Hello Spring</title></head>
<body>
  <div>
    Hello, Spring 동적 웹 페이지!!
  </div>
  <div>
    (방문자 수: <span th:text="${visits}"></span>)
  </div>
</body>
</html>

 

Controller에 아래의 코드를 추가한다.

private static long visitCount = 0;

...

@GetMapping("/html/dynamic")
public String htmlDynamic(Model model) {
    visitCount++;
    model.addAttribute("visits", visitCount);
    return "hello-visit";
}

동적인 페이지는 데이터를 Model에 넣는다. 그 Model을 Spring에서 객체로 제공하고 있다.

 

그것을 사용하기 위해선 아래와 같이 import 해줘야 한다.

import org.springframework.ui.Model;

이것을 import 하지 않으면 Model을 매개변수로 받는 부분과, addAttribute 부분이 오류가 발생한다.

 

URL로 접속해보면 동적 페이지를 확인할 수 있다. 새로고침 할때마다 방문자수 ("visits")이 1씩 증가하는 것을 알 수 있다.

'Spring 입문주차 > 1주차' 카테고리의 다른 글

11. Jackson이란 무엇일까?  (0) 2024.08.13
10. 데이터를 Client에 반환하는 방법  (0) 2024.08.13
8. Controller 이해하기  (0) 2024.08.12
7. Spring MVC란 무엇일까?  (0) 2024.08.12
6. MySQL 설치하기  (0) 2024.08.12