Java - Spring &&n SpringBoot

Spring - Index 페이지 만들기, MVC 맛보기, 빌드 &실행(feat. Thyleaf 템플릿)

TerianP 2021. 12. 4.

728x90

여기서 나오는 Spring MVC 에 대해서는 추후에 다시 정리하도록 하겠습니다.

1. Index.html - 기본 page 만들기

이전에 스프링을 구동했을 때는 아무것도 없었기 때문에 에러가 나왔다면 이번에는 index 페이지를 만들어서 출력되도록 만들어보자!

src - main - resources - static 폴더 안에 index.html 생성 후 인덱스 페이지 생성

<!DOCTYPE HTML>

<html>
<head>
    <title>Welcome HJproject</title> // 인터넷 창 맨위에 보이는 제목
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
    My First Java Spring Page // 페이지 내용
    <a href="/hello">hello</a> // 하이퍼링크
</body>
</html>

이렇게 생성된 페이지는 정적 페이지로 따로 작동하는것이 아니라 단순히 웹 서버가 해당 웹 브라우저에 보내는 방식이다.

2. 페이지 구현 - controller, model, thymeleaf 사용

index.html 처럼 정적 페이지를 thymeleaf 같은 템플릿 엔진을 이용해서 좀 더 프로그래밍 적으로 구현 가능하다.
이를 위해서 spring controller 과 hello.html , home.html 을 만들어보겠다.

1) Spring controller : 스프링 컨트롤러

package HJproject.Hellospring.Controller;

import org.springframework.ui.Model;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class My_Controller {

    @GetMapping("hello")
    public String hello(Model model) { // MVC : model view controller 중 model
        model.addAttribute("data","hello!!"); // data 가 넘어오면 hello!! 출력
        return "hello";
        // viewResolver 가 화면을 찾아서 처리함
        // resources : 'templates/' + (ViewName)+'.html'
    }

    @GetMapping("home")
    public String home(Model model){
        model.addAttribute("home","my sweet spring home");
        return "home";
    }

}

@controller : Spring 컨트롤러를 생성한다.
@GetMapping : 이는 인터넷에서 get 방식으로 넘어올때 어떻게 동작한다는 정의하기 위해 사용한다.
model.addAttribute("data","hello!!") : 이 부분은 model 에 대해서 정의하는데, 첫 번째 파라미터는 data 부분에 넘어오는 값을 두 번째 파라미터는 출력되는 값을 넣는다.
- model.addAttribute("data","hello!!"); : 여기서는 data 라는 값이 넘오면 hello!! 를 출력
- model.addAttribute("haha","spring"); : 여기서는 haha 라는 값이 넘어오면 spring 를 출력
return "hello" : return 뒤에 오는 값은 ViewName 이다. 이는 model 에서 정의된 것들을 '어디로(어디에서)' 출력할 것인지 지정하는 곳이라고 생각하면 될 듯 하다. 즉 ViewName = 출력 위치
- 이 부분을 좀 더 설명하자면 컨트롤러에서 리턴 값으로 문자를 반환하게 되면 View Resolver 이 화면을 해당 문자 이름과 동일한 ViewName 화면을 찾아서 처리한다.
- 예를 들어 return hello 인 경우 ViewResolver 은 hello 인 ViewName 화면을 찾아서 처리하는 방식이다.
- ViewResolver 가 기본적을 찾는 위치 : resources/templates/(ViewName).html

2) hello.html

<!Doctype html>

<html xmlns:th="http://www.thymeleaf.org"> <!-- thymeleaf 문법을 사용하기 위해 선언 -> th 로 www.thyleaf.org 를 연결-->
<head>
    <title>Hello Spring</title>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
</head>
<body>
    <h1>
        <p th:text="'안녕하세요 '+ ${data}"></p> <!-- th 를 사용해서 thymeleaf 문법을 사용함 -->
    </h1>
</body>
</html>

<html xmlns:th="http://www.thymeleaf.org"> : 이렇게 정의하여 thymeleaf 와 연결하여 thymeleaf 문법을 사용할 수 있게 됨.
<p th:text="'안녕하세요 '+ ${data}"></p> : th 를 사용하여 해당 thymeleaf 템플릿 문법을 사용할 수 있게 됨.

3) home.html

<!Doctype html>

<html xmlns:th="http://www.thymeleaf.org"> <!-- thymeleaf 문법을 사용하기 위해 선언 -> th 로 www.thyleaf.org 를 연결-->
<head>
    <title>Hello Spring</title>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
</head>
<body>
<h1>
    <p th:text="'Welcome to my '+ ${home}"></p>  <!-- th 를 사용해서 thymeleaf 문법을 사용함 -->
</h1>
</body>
</html>

hello 와 다르게 출력해보기 위해 만든 페이지

3. 동작 확인 : 실제로 어떻게 보여지나?

아래 사진처럼 구현되는 것을 확인했다!!

1) 인덱스 페이지

2) hello.html

3) home.html

4. 내가 만든 페이지가 어떻게 동작할까? - Spring 동작 방법

1) 처음에 웹 브라우저가 사용자가 접속한다.

2) 접속 후 hello 또는 home 링크를 클릭하면 localhost:8080:hello , localhost:8080:home 으로 연결된다.

3) 이때 톰캣 내장 서버를 경유하는데 톰캣에서는 get 으로 넘어오는 home, hello 에 대해 스프링 컨테이너에 해당 페이지를 어디서 찾아야할까에 대해서 질의를 던진다.

4) 스프링은 이미 정의되어진 My_controller 을 참고하여 GetMapping 이 hello 인 hello 메서드를 실행한다.

5) hello 메서드는 웹에서 넘어오는 ${data} 를 hello!! 로 치환한다.

6) 마지막으로 return 되는 hello 를 ViewResolver 이 확인하여 이와 동일한 이름의 View 객체를 찾아서 해당 페이지를 찾아 위 내용을 랜더링한다.

7) 최종적으로 처음 받아드린 ${data} 는 hello!! 로 치환된 후 hello.html 페이지가 연결되어 열리게 된다.

정확한 동작 방법이 아닐 수 있습니다. 제가 이해한 대로 적어두었기 때문에 뭔가 애매하다 싶으면 goole 을 좀 더 검색해주시기 바랍니다!!

5. 빌드 && 실행하기

1) Spring 이 설치된 폴더에 들어간 후 gradlew.bat 를 찾는다. 이후 아래 사진처럼 gradlew.bat build 명령어를 사용하면 뭐가 쭉쭉 진행되면서 jar 파일로 빌드가 완료된다.

2) 이후 spring > build > libs 폴더 안 만들어진 jar 파일을 찾고, java -jar <jar 파일명> 을 사용하면 아래 사진처럼 스프링이 구동된다.

만약 build 에서 오류가 나는 경우 gradlew.bat clean build 명령어를 사용한다. 해당 명령어는 기존의 build 폴더를 완전히 지우고 다시 빌드하는 명령어이다.
이렇게 빌드해서 실행하면 다른곳에서 따로 스프링을 설치하거나 할 필요없이 명령어 하나로 구동 가능하다고 한다.

Spring 이 참 신기하고 편하다는 것을 느꼈다. 이전에 간이 웹페이지를 만들때는 그때는 참 어렵다고 느꼈는데 Spring 으로 하니까 오히려 편한 부분이 많구나...라는 것을 느꼈다. 하긴...아직은 처음이니까 그럴지도 모르지ㅋㅋ

추가로 아래 페이지 2가지를 소개하고 마무리하겠다. Thymeleaf 와 spring boot reference documentation 로 필요한 정보가 있을때 여기서 검색해서 사용해도 좋을 듯 하다.

Thymeleaf

Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati

www.thymeleaf.org

Spring Boot Reference Documentation

The reference documentation consists of the following sections: Legal Legal information. Getting Help Resources for getting help. Documentation Overview About the Documentation, First Steps, and more. Getting Started Introducing Spring Boot, System Require

docs.spring.io

저작자표시 비영리 동일조건

'Java - Spring &&n SpringBoot' 카테고리의 다른 글

자바 Spring 개념 잡기 : IoC 제어의 역전, 의존성 주입(Dependency Injection) 와 컨테이너, 스프링 빈 (0)	2021.12.13
회원 관리 페이지 만들기 1) 도메인, 리포지토리(저장소), 테스트 실행 (0)	2021.12.10
Spring - 스프링 웹 개발 기초(feat. 정적 페이지, MVC, API, Json) (0)	2021.12.07
Spring 라이브러리 살펴보기 (0)	2021.12.04
Java Spring 시작 - IntelliJ 설치와 프로젝트 생성 및 Spring 구동 (5)	2021.12.03