SpringMVC - 간단한 컨트롤러와 간단한 뷰파일

dev_joo·2024년 3월 28일

서론

Spring boot JPA 강의를 들으면서 작성한 코드에 대해 간단히 정리하고 궁금한 부분을 찾아서 정리해보았다.

뷰파일

hello.html

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/json; charset=UTF-8">

</head>
<body>
    <p th:text="'귀한곳에 이런 누추한 '+ ${data} +'님'"> 안녕하세요 손님</p>
</body>
</html>

1. html 태그의 xmlns 속성:

hello.html 파일을 보면 xmlns 속성으로 타임리프를 추가한 것을 볼 수 있다.

xmlns란?

XML에서 하위 요소에 적용되는 namespace로,
접두사(prefix)는 th, 네임스페이스 식별자는 http://www.thymeleaf.org
URI는 정보를 검색하기 위해 사용되는게 아니라 고유한 이름을 부여하는 것이지만,
관례적으로 기업들이 네임스페이스를 기업의 웹페이지로 작성하고 있다.

접두사 th는 Thymeleaf엔진이 HTML 문서를 읽을 때, 해당 요소가 Thymeleaf의 처리 대상이라는 것을 알게 한다.
~~혹시 th를 다른 단어로 바꿔도 되는건지 해봤는데 안된다. Thymeleaf 내부동작과 관련이 있는듯.~~

(extensible markup language name space)

xml에서는 사용자가 자유롭게 요소를 정의할 수 있는데, 서로 다른 XML 응용프로그램의 XML 문서를 혼합하려고 할 때 이름이 같아 충돌이 발생하는 경우가 많다고 한다.
이러한 요소를 구분하기 위해 네임스페이스를 사용한다.

<root>
  
<h:table xmlns:h="http://www.w3.org/TR/html4/">
  <h:tr>
    <h:td>Apples</h:td>
    <h:td>Bananas</h:td>
  </h:tr>
</h:table>

<f:table xmlns:f="https://www.w3schools.com/furniture">
  <f:name>African Coffee Table</f:name>
  <f:width>80</f:width>
  <f:length>120</f:length>
</f:table>

</root>

위 코드와 같이 접두사를 붙여 <table/> 요소를 구분할 수 있다.

코드 출처 : w3schools

HTML 문서에 갑자기 나타난 XML? = XHTML

먼저 HTML과 XML에 대해서 알아보자.

HTML(HyperText Markup Language)은 웹의 초창기부터 사용되어 왔다. 팀 버너스리(Tim Berners-Lee)가 월드 와이드 웹을 개발할 때 사용된 초기 버전의 마크업 언어로서, 문서의 구조와 링크를 정의하는 데 사용되었고, 이후 HTML이 계속 발전하면서 웹 페이지의 디자인과 레이아웃을 지정하는 기능이 추가되었다.

XML(Extensible Markup Language)은 HTML보다는 후에 등장했으며, 주로 데이터 교환 및 저장을 위한 목적으로 사용된다. XML은 데이터베이스, 웹 서비스, 구조화된 문서 등의 다양한 분야에서 활용되고 있다.

구분	HTML	XML
목적	웹 페이지의 구조를 정의하고 표시하는 데 사용됨	데이터를 저장, 전송 및 교환하는 데 사용됨
문법	자유로운 문법을 가지며, 일부 요소는 닫히지 않아도 됨	엄격한 문법을 가지며, 모든 요소는 반드시 닫혀야 함
내장 태그 및 속성	사전 정의된 태그와 속성을 사용하여 웹 페이지의 구조를 정의함	사용자가 정의한 태그와 속성을 사용하여 데이터를 구조화함
용도	웹 페이지의 디자인, 레이아웃 및 컨텐츠를 표시하기 위해 사용됨	데이터의 구조화와 교환을 위해 사용됨

그렇다면 HTML에 왜 XML에만 있어야할법한 xmlns속성이 있는걸까?

XML의 엄격한 규칙을 따르면서도 HTML의 특성을 유지하고자 하는 목적으로 HTML과 XML를 혼합한 XHTML(ExtensibleHypertext Markup Language)이 HTML 4.01의 후속 제품으로서 개발되었다.
그러나 브라우저 호환성과 개발자들의 적응 문제 등으로 XHTML은 널리 채택되지는 않았다고 한다.

그러나 HTML5을 작성할 때 xmlns 속성을 추가하지 않더라도 네임스페이스 xmlns="http://www.w3.org/1999/xhtml"를 기본값으로 가지고, 이번에 사용한 Thymeleaf처럼 XHTML 규칙을 따르는 내용이 필요할 때 추가로 작성한다고 한다.

즉, html에서도 xml의 이점을 가지기 위해서 사용한다는것!

2. meta 태그의 http-equiv 속성 :

	<meta http-equiv="Content-Type" content="text/html">

처럼 인코딩 정보를 생략해도 된다. 대부분의 브라우저에서 기본적으로 UTF-8 인코딩을 사용하기 때문.

html파일의 meta 태그의http-equiv"Content-Type" 속성은 해당 메타 태그가 HTTP 헤더의 Content-Type 필드를 대체한다는 것을 나타낸다.

	<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

처럼 http 헤더의 속성과 meta태그의 속성을 같이 쓰면 안된다. meta태그 작성 표준에 맞지 않는다고 한다.

컨트롤러 코드

HelloController.java

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

@Controller
public class HelloContoller {
    @GetMapping("hello")
    public String hello(Model model){ // 컨트롤러에서 내용을 담으면 뷰로 전달할 수 있는 객체
        model.addAttribute("data", "박선주!");
        return "hello"; // 화면 이름, 관례상 resources > templates > hello.html
    }
}

컨트롤러에서 보낸 데이터가 뷰파일로 이동한다.

서버를 실행하고 localhost:8080/hello 경로로 요청하면 다음과 같이 컨트롤러에서 담아준 데이터를 포함한 html 페이지가 보이게 된다.

더 자세한 과정 알아보기

GPT에게 코드를 주고 무슨 일이 일어나는지 물어보니 친절하게 대답해줬다.
다시 정리해서 작성해봤다.

클라이언트가 HTTP GET 요청을 보낸다. (크롬 브라우저에서 loclahost:8080/hello 주소 입력)

스프링 MVC 프레임워크에서 컨트롤러로 요청이 라우팅된다.
이 때 @GetMapping("hello") 어노테이션에 지정된 엔드포인트/hello가 매칭된다.

컨트롤러 메서드public String hello(Model model)가 Model 객체를 매개변수로 받아 실행된다.

컨트롤러 메서드는 비즈니스 로직을 수행하고, 필요한 데이터를 생성하거나 데이터베이스에서 가져온다.
(여기서는 그냥 이름 문자열 입력)

이 데이터를 Model 객체의 addAttribute 메서드를 사용하여 데이터를 "이름-값" 쌍으로 저장한다.
이때 "이름"은 뷰에서 사용할 때 참조하는 식별자"data"이고, "값"은 해당 데이터"박선주!"이다.
model.addAttribute("data", "박선주!");

컨트롤러는 데이터를 추가한 Model 객체를 반환한다. return "hello";

스프링 MVC 프레임워크는 뷰 리졸버(View Resolver)를 사용하여 뷰의 논리적인 이름을 실제 뷰 파일로 변환한다.
(논리적인 뷰 이름은 컨트롤러에서 반환된 문자열인 "hello")

뷰 리졸버는 뷰 이름"hello"을 템플릿 엔진에 전달하여 뷰를 렌더링시킨다.
템플릿 엔진으로 Thymeleaf 엔진이 사용된다.

Thymeleaf는 뷰 파일(hello.html)을 찾아서 해당 파일을 렌더링한다.
뷰 파일에는 Thymeleaf의 템플릿 문법으로 데이터를 동적으로 삽입할 부분이 표시되어있다.
<p th:text="'귀한곳에 이런 누추한 '+ ${data} +'님'">
렌더링하는 과정에서 data라는 이름으로 저장된 데이터 "박선주!"를 사용한다.

이렇게 하면 브라우저에 전송되는 최종 HTML 페이지에는 컨트롤러에서 추가한 데이터가 포함되어 표시된다.

마무리

간단한 컨트롤러 코드를 통해 Spring MVC가 어떻게 동작하는지 알아보았다.
부트캠프를 다니면서 어느정도 백엔드를 배웠지만 아직 전체적인 웹 동작의 이해가 부족하다는 것을 상기했다.

짧은 강의에도 파보면 배울 내용이 정말 많다. 강의 들을 시간이 없다고 했는데 웹툰이랑 유튜브 볼 시간에 봐야겠다.💖🔥

dev_joo

풀스택 연습생. 끈기있는 삽질로 무대에서 화려하게 데뷔할 예정 ❤️🔥