KEEP GOING
[스프링 부트(SPRING BOOT)] MVC & 템플릿 엔진 사용하여 웹 구현하기 본문
전반적으로 spring framework에 대해 이해하였으나
직접 만들고 구현해보진 않아서 이해한게 맞나? 하는 의구심이 들었습니다.
그래서 인프런 사이트의 김영한님의 스프링 입문
영상을 참고하며 실습하려고 합니다.
영한 님께서는 intelliJ를 사용하지만
이미 sts가 깔려 있어서 그냥 sts를 사용했습니다.
영상에서는 start.spring.io를 통해 만든 Gradle pakage를 만드셨는데
sts에서 import하는 방법이 잘 모르겠어서(;;) 그냥 새로 프로젝트를 만들어줬습니다!
File > New > Spring Starter Project
영한님께서 제공하신 프로젝트 파일 정보
위 내용에 맞춰서 내키는대로 명칭들을 세팅해주었습니다
보통 com 뒤에는 회사명이 온다고 하여 현장 실습 중인 회사명을 넣었습니다.
그리고 Spring Web과 Thymeleaf 템플릿 엔진을 의존성 설정시 넣어주어야 합니다.
그리고 Finish를 누르면 Spring project 가 만들어집니다.
Thymeleaf는 뷰 템플릿 엔진으로 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해준다.
이게 뭔말인지 모르겠으면 springboot 작동원리와 mvc 패턴에 대해 공부할 필요가 있습니다.
(작동원리 같은 경우 과거랑 현재랑 차이가 있어서 최근 올라온 정보들만 골라 먹어야 합니다.
그런지도 모르고 쓸데없는걸 너무 많이 공부해버렸고... 후 ^^)
src/main/java에 컨트롤러 패키지를 하나 만들어줍니다!
그리고 패키지 아래 HelloController.java 파일을 만듭니다.
이 자바 파일에 @Controller 어노테이션을 적용하면 앞으로 스프링 내에서 컨트롤러 역할을 해줄 것입니다.
(어노테이션이 뭔지 모르겠으면 또 공부....)
그리고 src/main/resources 폴더의 templates 패키지를 만들고 (원래 있나..? 있다면 만들지 마세룡ㅎ)
hello.html 파일을 만들어 주겠습니다.
백번 말로 하는거 보다 눈으로 보는게 빠르니 사진을 참고하면
다음과 같습니다!
실습 파일 코드
1. HelloController.java
package com.ssnc.inflearn.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class HelloController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("data", "hello!!");
return "hello";
}
}
2. hello. html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymleaf.org">
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' +${data} ">안녕하세요. 손님</p>
</body>
</html>
코드 설명을 조금 추가하자면
url에서 /hello 경로로 진입하면 컨트롤러 내 @GetMapping("/hello") 처리된 메소드가 동작합니다.
하나의 컨트롤러 java 파일 안에 여러 컨트롤러가 있을 수 있는데 그중에서도 /hello 경로에 대한 컨트롤러가 동작하는 것입니다.
그니까 HelloController.java 파일 안에
@GetMapping("/coffee") 주석 달고 public String coffee(Model model){....} 과 같은
메소드를 여러개 만들 수 있고 그 중에서 접근한 url에 매핑된 메소드만 돌아간다는 뜻입니다.
model.addAttribute("data", "hello!!")에서 data는 key이고 hello는 value 값입니다.
즉 data라는 키를 통해 hello라는 value에 접근할 수 있습니다. 우리가 웹 페이지에 적고 싶은 값이 value 값에 해당됩니다.
"hello"로 return하는데 이 리턴된 것이 view에 해당하고 그것이 바로 hello.html 파일입니다.
hello.html 파일에서는 아까 컨트롤러에서 설정해준
data라는 키를 이용해 ${data}와 같은 형태로 "hello!!" 데이터에 접근할 수 있습니다.
참고로 <p> 태그 안에 th는 thymeleaf 템플릿 엔진을 써먹기 위한 약자입니다.
자! 그러면 이제 스프링 부트 파일을 돌려봅시다!
그러면 아래처럼 Console에서 예쁘게 spring 로고가 나오고
Boot DashBoard를 보면 8080포트가 열린 것을 알 수 있습니다.
호다닥 아무 웹브라우저나 열고
http://localhost:8080/hello 로 들어가봅시다!
다음과 같은 화면이 출력된다면.. 축하드립니다!
컨트롤러로 html 파일에 접근해서 동적으로 웹페이지 구현하기 쌩기초 버전을 완성하셨습니다!
+만약에..... 화이트라벨 페이지가 나온다면...?
뭔가 실수가 있을 것입니다... 첨에 저도 @Controller 어노테이션을 깜빡해 이 화면이 나왔습니다.
엥 뭔소리?
난 잘 작동돼서 몰라! 하는 분들은 @Controller 어노테이션을 주석처리하고
빨간 네모 눌러서 작동 멈추고 다시 초록 처튼눌러서 실행해봅시다
그러면 이러한 끔찍한 페이지가 나옵니다...
혹시라도 이런 화면이 나온다면 잘못 친 내용은 없는지 확인해보시길!
'web > springboot' 카테고리의 다른 글
| [스프링 부트(SPRING BOOT)] API 구현하기 (0) | 2021.07.23 |
|---|
