Spring boot #2 static view, template, API

Study/Spring boot

Spring boot #2 static view, template, API

DOWN 2021. 7. 8. 01:12

1. static view

먼저 프로젝트의 main를 실행해보고 http://localhost:8080/ 에 접속해보자 (Spring boot는 기본으로 포트 8080를 사용)

그럼 아래처럼 에러페이지가 뜰 것이다. 아주 정상이다. 왜냐하면 클라이언트에게 보여줄 아무런 페이지를 생성하지 않았기 때문이다.

이번에는 src/main/resources/static/ 디렉토리에 index.html 파일을 생성해보자. 파일 html문은 아래와 같이 작성한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>안뇽!</title>
</head>
<body>
요~ 오태식이~
</body>
</html>

그리고 main 함수가 실행중이라면 종료하고 다시 실행해보자. 그럼 아래와 같이 페이지가 뜨는것을 확인할 수 있다!

2. template

static 디렉토리내에 있는 index.html은 기본 url에 접속하면 가장 먼저 띄어주는 역할을 한다. 그럼 기본 url이 아닌 하위 url에 접속 했을때 원하는 페이지를 띄울라면 어떻게 해야할까? 이번에는 src/main/java/[name]/ 디렉토리에 controller라는 폴더를 만들어보자. 그리고 controller 폴더내에 HelloController.java라는 파일을 만들어보자. 그리고 코드를 아래와 같이 작성한다.

@Controller
public class HelloController {

    @GetMapping("hello")
    public String hello(Model model){
        model.addAttribute("data", "hello");
        return "hello";
    }
    
}

그리고 src/main/resources/templates 폴더속에 hello.html라는 파일을 생성 후 아래와 같이 코드를 작성한다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Hello</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'HELLO~. ' + ${data}" >HI</p>
</body>
</html>

localhost:8080/hello에 접속해보자. 그럼 아래와 같이 페이지가 뜨는것을 확인할 수 있다!

어떻게 이렇게 작동하게 되는건지 코드를 한번 다시 보자. controller 자바파일을 보면 퍼블릭클래스에 @Controller 어노테이션이 있는것을 확인할 수 있다. 이 어노테이션으로 이 클래스는 컨트롤러 역할을 하게 된다. 그리고 @GetMapping 어노테이션은 해당 하위 url로 들어오면 다음 메소드를 반환한다는 의미를 지닌다. 그리고 model을 인자로 받는데 이 model의 attribute 값을 통해 템플릿으로 데이터를 전달할 수 있게 되는것이다. 그리고 마지막으로 리턴값이 의미하는것은 리턴값에 해당하는 이름의 html파일을 templates/ 디렉토리에서 찾고 반환하라는 의미다. 그럼 ${data}에 아까 준 model의 data attribute 값이 들어가게 되고 클라이언트는 그 값을 볼 수 있게 된다.

이번엔 url 파라미터를 통해 원하는 데이터를 출력해보자! 아까 작성한 contoller 자바파일을 아래와 같이 바꿔주자

@Controller
public class HelloController {

    @GetMapping("hello")
    public String hello(@RequestParam("name")String name,  Model model){
        model.addAttribute("data", name);
        return "hello";
    }

}

@RequestParam 어노테이션의 의미는 url의 해당 파라미터값을 인자로 주겠다라는 의미다. 그러므로 localhost:8080/hello?name=오태식 url에 접속해보자. 그럼 아래처럼 오태식이를 환영하는것을 확인할 수 있다.

3. API

지금까지는 url에 접속했을때 html파일을 반환받았다. 그런데 spring boot를 백엔드로만 활용할때는 json형식이 훨씬 유용할것이다. 이번에는 json형식으로 data를 전달하는 API를 간단히 구현해보자!

아까전 작성한 자바파일을 아래와 같이 고쳐보자.

@Controller
public class HelloController {

    @GetMapping("hello")
    @ResponseBody
    public person hello(@RequestParam("name")String name,  Model model){
        person p = new person(name);
        return p;
    }

    static class person{
        public String name;
        public person(String name){
            this.name = name;
        }
    }

}

그런다음 localhost:8080/hello?name=오태식 접속해보자. 그리고 마우스 우클릭 후 소스보기를 보면 아래와 같이 나오는것을 알 수 있다. 이는 html 형식이 아닌 json 형식이다. 이러한 방법으로 프론트엔드, 백엔드관의 통신에 유용하게 사용할 수 있다.