밍경송의 E.B

SPRING 2 - VIEW 환경설정, Controller 본문

lang./SPRING

SPRING 2 - VIEW 환경설정, Controller

m_gyxxmi 2023. 3. 13. 23:53

**이 글은 인프런의 <스프링 입문-코드로 배우는 스프링부트, 웹 MVC, DB접근 기술>의 내용을 바탕으로 작성하였습니다.

 

지난 시간에 HelloSpringapplication의 메인 메소드의 실행을 통해 개발을 위한 환경설정을 모두 마쳤는데요.

아직까지는 localhost:8080에 접속하여도 Error page라는 문구밖에 뜨질 않습니다.

 

두둥 그래서 이번에는 html을 이용하여 hello라는 글자가 출력되는 Welcome page를 만들어보도록 하겠습니다!

프론트를 다루는 강의였으면 좀 더 디테일하고도 예쁘게 만들어보려는 시도를 했겠지만,, 

이 강의 백엔드 강의이므로 기존에 작성된 코드만을 복붙하여 사용했습니다. 스껄

static->index.html을 생성해주시고, 아래 코드를 따라치면 됩니다.

<!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>

 

짜잔 localhost:8080에 무언가 생겼습니다!

다음으로 Controller 패키지를 하나 생성해볼 건데요.

Controller에 대해 알려면, 스프링 프레임워크가  MVC 패턴을 사용하고 있다는 점을 알아야 합니다.

여기서 MVC(Model - View - Controller) 사용자의 인터페이스/로직을 구현 및 제어하는 것을 말합니다.

 

그렇다면 Controller란?

-> 사용자가 화면(view)단에서 입력과 같은 이벤트를 행했을 때, 그 이벤트에 맞는 화면(view)나 로직(model)을 실행할 수 있도록 해주는 역할을 하는 친구로, View와 Model을 연결시켜주는 역할을 하는 친구입니다.

저도 controller에 무지하므로 강의에서 시키는 대로 따라쳐보도록 했습니다..

@Controller을 쳐서 springframework라고 뜨는 것을 누르면 자동으로 색깔이 바뀌면서 적용됩니다.

HelloController

 Controller파일을 모두 만들면, templates 아래에 hello.html 파일을 생성해서 아래와 같은 내용을 넣어줍니다. 

두 파일 간 어떤 연결점과 변화가 생길까요?

hello.html

<html xmlns:th="http://www.thymeleaf.org">

 

ㄴ일단 이것은 thymeleaf 문법을 사용할 수 있는 코드입니다.

일전에 startspring.io로 프로젝트를 생성할 때 thymeleaf 라이브러리를 추가했던 것 기억하시죠?

 

<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>

->이부분이 중요한데요. 여기서 data부분이,  앞서 작성한 HelloController 파일의 

model.addAttribute("data", "hello!!");

->model 부분에 의해서 hello!! 로 바뀐다는 점 이해가시나요?

결과물은 이렇습니다.  Key값data에 부여했던 Value hello!가 나왔네요.

localhost:8080/hello로 접속하시면 된다냥

*참고로 꼭 run을 중단하고 다시 실행해줘야 보입니다.!

하 여러분은 지금 컴퓨터 진짜 똥망느려서 갑자기 열이 확 받은 여성의 블로그를 보고 계십니다.

 

그림으로 보면 조금 더 이해가 편합니다. 그러니까 modelreturn값이 hello라서,

spring이 자체적으로 resources-> templates-> hello라는 이름의 .html 파일을 찾아 이를 처리한다는 말인데요..

어렵죠?

네 저도 그래요..

그럼 다음 시간에는 springboot를 이용해 빌드하고 실행하는 방법 +a 의 내용과 함께 찾아오겠습니다. 뿅