[스프링 입문] 1.프로젝트 환경설정 - View 환경설정
🧶 𝗪𝗲𝗯/Spring

[스프링 입문] 1.프로젝트 환경설정 - View 환경설정

죽지도 않고 또 왔습니다. 이번에 간단하게 Welcom Page 를 만들면서 View 환경설정을 해보도록 하겠습니다.

 

이전 글

2021.10.05 - [🧶 𝗪𝗲𝗯/Spring] - [스프링 입문] 1.프로젝트 환경설정 - 라이브러리 살펴보기

 

[스프링 입문] 1.프로젝트 환경설정 - 라이브러리 살펴보기

이전 글 2021.10.05 - [🧶 𝗪𝗲𝗯/Spring] - [스프링 입문] 1.프로젝트 환경설정 - 프로젝트 초기화 및 환경 세팅 [스프링 입문] 1.프로젝트 초기화 및 환경 세팅 스프링 프레임워크 을 배워보려고 합

yeomss.tistory.com

 

 

 src/main/resources/index.html 

우선 src/main/resources 폴더를 선택해줍니다. 새로운 html 파일을 만들어주도록 하겠습니다.

그러면 src/main/resources/index.html 파일이 만들어지겠죠? 

 

<!DOCTYPE html>
<html>
    <head>
        <title>Hello</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    </head>
    <body>
        안녕하세요!
        <a href="/hello">/hello 링크입니다</a>
    </body>
</html>

static 밑에 생성하면 이는 스프링 부트에서 제공하는 index.html 파일입니다.

 

 

 

 

 Run 하기 

PracticeApplication 파일을 Run 해줍니다.

 

http://localhost:8080 에 접속합시다.

 

 

 

 라우팅 하기 

매핑하기

main/java/back.practice/controller 폴더를 만들어줍니다.

 

Controller Class 파일 추가

package back.practice.controller;

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

@Controller
public class PracticeController {
    @GetMapping("hello")
    public String practice(Model model) {
        model.addAttribute("data", "안녕!!");
        return "hello";
    }
}

controller 폴더 밑에 PracticeController 클래스 파일을 만들어줍니다.

/hello 경로에 해당 파일을 매핑합니다. data 속성에 "안녕!!" 을 할당합니다.

model 을 넘겨주는데 이는 Spring이 model 을 만들어서 넘겨줍니다. 

return "hello" 는 View 화면이 될 html 파일의 제목 입니다. 즉, 여기서는 hello.html 파일과 바인딩이 되겠죠?

 

 

http://localhost:8080/hello 로 들어가면 아직 화면이 안나오고 에러 페이지가 뜹니다.

 

View 화면 만들어주기

main/resources/templates 밑에 파일을 만들어줍니다.

 

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Hello</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    </head>
    <body>
        <p th:text="'안녕하세요. ' + ${data}">안녕하세요. 손님</p>
    </body>
</html>

resources/templates/hello.html 파일입니다.

여기 ${data} 에 아까 controller 에 있던 data가 들어갑니다.

 

 

 

 실행 하기 

 

hello 경로로 들어가면 다음과 같은 화면이 뜹니다.

 

 

 

 

 

 

스프링 view 환경설정 Spring View 환경설정 templates

다음 글

2021.10.05 - [🧶 𝗪𝗲𝗯/Spring] - [스프링 입문] 2.스프링 웹 개발 기초 - 정적 컨텐츠

 

[스프링 입문] 2.스프링 웹 개발 기초 - 정적 컨텐츠

 정적 파일 만들기 resources/static/hello-static.html <!DOCTYPE HTML> static content 정적 컨텐츠 입니다. 파일의 위치는 resource/static/ 밑에 생성합니다. 해당 위치 안에 아무 내용의 html 파일을 만들..

yeomss.tistory.com

 

728x90
저작자표시 비영리 변경금지

'🧶 𝗪𝗲𝗯 > Spring' 카테고리의 다른 글

[스프링 입문] 2.스프링 웹 개발 기초 - API  (0) 2021.10.05
[스프링 입문] 2.스프링 웹 개발 기초 - MVC와 템플릿 엔진  (0) 2021.10.05
[스프링 입문] 2.스프링 웹 개발 기초 - 정적 컨텐츠  (0) 2021.10.05
[스프링 입문] 1.프로젝트 환경설정 - 라이브러리 살펴보기  (0) 2021.10.05
[스프링 입문] 1.프로젝트 환경설정 - 프로젝트 초기화 및 환경 세팅  (0) 2021.10.05

    티스토리툴바