[210524] View 환경설정

9567 단어 SpringSpring

View 환경설정

Maven, Gradle은 의존관계를 관리해 준다
의존관계에 따라 Lib를 쭉 가져오다보니 Spring core까지 갖고오게 됨

Spring은 내용이 너무 방대해서 모든 지식을 습득하기 어렵고, 시간도 오래 걸린다. 따라서 어떤 작업을 해야할 때 어떤 기술을 사용해야 하는지를 아는가가 더 중요하다.

spring.io - project - spring boot - Learn - 최신버전 Reference Doc - Spring Boot Features
ex) Welcome page를 검색하면 어떻게 쓰는지 나옴

Src/main/resources/static - New - File - index.html을 올려두면
Welcome page 기능을 제공한다

 <!DOCTYPE HTML>
 <html>
 <head>
     <title>Hello</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 </head>
 <body>
 Hello
 <a href="/hello">hello</a>
 </body>
 </html>

단, 여기서 static 즉 정적페이지로 적어놓은 파일을 그냥 웹 브라우저에 넘겨주는거에 지나지 않음 -> 프로그래밍이 아니라 파일을 던진 거

여기서 템플릿 엔진을 쓰면 원하는대로 툴을 넣어 모양을 바꿀 수 있다.

여기서는 thymeleaf 템플릿 엔진을 사용한다
링크텍스트

package hello.hellospring.controller;

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

@Controller
public class HelloController {
    @GetMapping("hello")
    public String hello(Model model){
        model.addAttribute("data", "hello!!");
        return "hello";
    }
}
<!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="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</body>
</html>

웹 브라우저에서 /hello 를 넘겨주면 스프링부터에 내장되어 있는 톰켓 서버에서 /hello를 스프링에게 물어본다.
그럼 spring의 HelloController를 보면 @Getmapping("hello")로 넘어오게 되어 /hello URL에 매칭이 된 것!
그럼 HelloController에 있는 method가 실행되는데 여기서 model이란 게 넘어온다
Spring이 model을 만들어서 넣어주게 됨!
ㄴaddAttribute로 Key(name = "data"), Value = "hello!!"로 여기서 Value는 바뀔 수 있음(DB에서 가져오던지)

여기서 return 이름이 hello인데 여기 이름은 resources/templates/hello.html과 이름이 같다!
즉, 위 경로로 가서 랜더링을 해라는 의미!

-> Controller에서 return value로 문자를 반환하면 'viewResolver'가 화면을 찾아서 처리한다.
ㄴSpring boot templates engine 기본 viewName mapping
ㄴ'resources:templates/' + {ViewName} + '.html'

Error
URL is not registerd 가 뜰 경우
Alt + Enter - Fetch external resource

TIL#29 React ) Router
React | '프립' 모티브 프로젝트 코드공유

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage