thumbnail
1_3. View 환경설정
java_spring_basic
2022.07.07.

1_3. View 환경설정

이번 시간엔 View 환경설정을 해보도록 하겠다.


java35 java36


이전 시간에 스프링부트를 실행했는데, 에러 페이지만 나왔었던 거를 기억할 것이다.
아무것도 없으니까 에러 페이지가 나오는 것이 당연하다.
이제 뭐라도 넣어보도록 하겠다.

1_3_1. Welcome Page 만들기

  • resources/static/index.html
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>

여튼 위 index.html 파일을 src/main/resources/static 폴더에 추가하시고 서버를 껐다가 다시 실행한다.


java37


그럼 위와 같이 index.html 파일이 웰컴 페이지로 뜰 것이다.

스프링이 출시가된 년도가 아마 2003년일 것이다.
그 이후로 거의 20년간 수많은 기능이 개발되어왔다.
스프링 부트는 그 스프링 생태계 자체를 감싸 스프링을 사용하기 쉽게 해주는 건데, 스프링이 사실 자바 엔터프라이즈 웹 애플리케이션과 관련된 전반의 생태계를 다 제공한다.
어마어마하게 크다. 그래서 머리속에 다 담을 수가 없다.

그래서 필요한걸 찾는 능력이 굉장히 중요하다.

웰컴 페이지 어떻게 만들지? 라는 생각이들 때, 이렇게 하시면된다.
먼저 https://spring.io에 접속한다.


java38


보면 Projects에 Spring Boot라는 메뉴가 있다.


java39


위와 같이 Reference Doc.에 가셔서


java40 java41


위 welcome page 부분을 읽어보시면 어떻게 index.html 파일을 찾아가는지에 대해 쓰여있다.

여기까지 만든건 ‘정적 페이지’이다.
존재하는 파일을 그냥 그대로 던져준 것이다.
그런데 여기서 템플릿 엔진이란걸 쓰면, index.html에서 내가 원하는 루프를 넣던지 해서 위 모양을 바꿀 수가 있다.

1_3_2. thymeleaf 템플릿 엔진

우리는 thymeleaf 템플릿 엔진을 사용할 것이다.

1_3_3. Controller 만들기

웹 애플리케이션에서 첫 진입점이 Controller이다.


java42 java43


java44


먼저 웹 브라우저에서 localhost:8080/hello를 딱 던지면, 스프링 부트는 톰캣이라는 웹서버를 내장하고 있다고했죠?
이 웹서버에서 localhost:8080/hello를 받아서 어? /hello네? 하면서 spring한테 물어본다.
그럼 spring이… 아래 helloController에 보면,


java45


@GetMapping("hello")이 있는데, 여기서 Get은 http의 get 메소드, post 메소드할 때 그 Get이다.
브라우저 주소창에 주소를 입력하고 엔터를 치면 이는 get 메소드가 호출되는 것이다.
여튼 그래서 이 @GetMapping("hello") 여기에 매칭이 된 것이다.

그러면 helloController에 있는 아래 메서드가 실행이된다.

@GetMapping("hello")
public String hello(Model model) {
    // MVC 패턴(Model, View, Controller)에서의 model을 뜻한다.
    model.addAttribute("data", "hello!!");
    return "hello";
}

그런데 인자에 model이란 것이 넘어온다.
스프링이 model을 만들어서 넣어주는 것이다.
이 model에다가 addAttribute해서 data 키를 넣고 “data” 키에 해당하는 값으로 “hello!!”를 넣는다.
이 값도 바뀔 수 있겠지?
DB에서 값을 조회해서 바꿀 수 있을 것이다.


java44


그래서 다시 위 스샷을 보시면 model에 data: hello!! 를 넣어놨다.
그리고 “hello”를 return한다.
무슨 얘기냐면, 인텔리J 에디터라면 return "hello"의 “hello” 부분에 마우스 커서를 놓으시고 윈도우라면 ctrl + b, 맥이라면 cmd + b를 눌러보면된다.
그러면 hello.html 파일로 갈 것이다.
이 return하는 값이 resources/templates/hello.html 이 파일의 이름과 똑같다.
즉, 이 파일을 찾아서 이 파일한테 가서 렌더링을 하라 라는 뜻인 것이다.


java44


다시 위 스샷을 보시면 return: hello인 것을 볼 수 있다.
그러면 스프링은 어떻게 반응을 하냐면, 기본적으로 이 스프링부터 어떻게 세팅이 되어있냐면, resources/templates 폴더 안에 있는 hello.html을 찾는다.
hello.html을 찾아서 렌더링을 하게된다.

여튼 이렇게 templates/hello.html을 스프링이 찾아서 thymeleaf 템플릿 엔진 처리를 해준다.

스프링 부트가 이렇게 동작하도록 기본적인 세팅을 해놓은 것이다.

1_3_4. Controller 정리

  • 컨트롤러에서 리턴 값으로 문자를 반환하면 뷰 리졸버(viewResolver)가 화면을 찾아서 처리한다.
    • 스프링 부트 템플릿엔진 기본 viewName 매핑
    • resources/templates/ + {viewName} + .html

참고: spring-boot-devtools 라이브러리를 추가하면, html 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경이 가능하다.
인텔리J 컴파일 방법: 메뉴 build -> Recompile

20230309 153541

1_3_5. spring-boot-devtools 라이브러리 추가

1_3_6. Devtools란?

devtools는 Spring boot에서 제공하는 개발 편의를 위한 모듈이다.
개발을 하다보면, 코드 수정시 브라우저에서 보여주는 내용도 수정하려면 어플리케이션을 재시작해야 하기 때문에 불편한점이 많은데, devtools를 사용하면 이러한 불편한점을 해결할 수 있다.
크게 아래의 5가지 기능들을 제공한다.

  1. Property Defaults
  2. Automatic Restart
  3. Live Reload
  4. Global Settings
  5. Remote Applications

쉽게 말하면 브라우저로 전송되는 내용들에 대한 코드가 변경되면, 자동으로 어플리케이션을 재시작하여 브라우저에도 업데이트를 해주는 역할을 한다.

자주 사용하는 H2 콘솔로 예를 들면, 인텔리제이에서 엔티티에 새로운 필드를 추가하거나 새로운 엔티티를 추가해도 프로젝트를 다시 시작하지 않고 h2 콘솔에서 업데이트된 정보를 볼 수 있다.
추가로 H2 데이터베이스를 사용중이라면 자동으로 H2콘솔도 활성화 시켜주는 장점도 있다.
(server(tcp) 모드로 h2를 사용할 때 콘솔을 활성화하지 않아도 프로젝트를 실행시킬 수 있다…!!)


1_3_7. 설정방법

  1. Dependency에 Devtools를 추가한다.
    Gradle이나 Maven 둘 중 아무거나 사용해도 좋다.

    Gradle 사용시

    dependencies {
    compileOnly("org.springframework.boot:spring-boot-devtools")
}

    Maven 사용시

    <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

  2. Advanced Settings 설정
    IntelliJ 2021이전에는 registry에 있는 compiler.automake.allow.when.app.running 설정에 체크해 주어야 했지만 2021 부터는 해당 설정이 레지스트리에서 Advanced Settings으로 옮겨 졌다.
    아래의 빨간색 상자안에 있는 체크박스를 체크해주면 된다. 참고링크


    java46 java46


  3. Build project automatically 체크
    Build, Execution, Deployment -> Compiler -> Build project automatically 체크


    java47 java47

Thank You for Visiting My Blog, Have a Good Day 😆
© 2022 Developer hyungju-lee, Powered By Gatsby.