mustache(템플릿엔진), 동적HTML, MVC의 개념, form태그, GET/POST 차이

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

mustache(템플릿엔진), 동적HTML, MVC의 개념, form태그, GET/POST 차이 본문

🖥 BE 백엔드/Spring 스프링

mustache(템플릿엔진), 동적HTML, MVC의 개념, form태그, GET/POST 차이

비비 bibi 2021. 3. 9. 01:05

mustache를 활용한 동적인 HTML과 MVC 설명

컨트롤러에서 mustache라는 템플릿엔진에 데이터를 전달해, 동적인 HTML을 만들어내는 법을 배운다.

MVC의 개념

MVC는 한 곳에서 많은 로직을 처리하는 대신, 각 코드의 역할을 분담하기 위해 등장했다.

Controller : 최초 진입 지점. 사용자의 입력 값이 유효한 지를 검증하고, 사용자가 입력한 데이터를 Model에 전달하고, Model의 처리 결과에 따라 이동할 View를 결정하는 역할
Model : 실질적인 비즈니스 로직을 구현하는 역할을 담당함. 비즈니스 로직 처리 결과를 DB에 저장하고 조회하는 역할. 애플리케이션의 엔진이라 할 수 있음.
View : Controller에 의해 전달된 데이터를 단순히 출력하는 역할

템플릿 엔진이란?

: 지정된 템플릿 양식과 데이터를 이용하여 HTML문서를 출력하는 소프트웨어.

서버 템플릿엔진 : JSP, Freemarker ..
- 서버에서 Java코드로 문자열을 만든 뒤, 문자열을 HTML로 변환해 브라우저로 전달함
클라이언트 템플릿엔진 : View파일(리액트 등)

자바에서는 다양한 서버 템플릿 엔진이 존재함.

JSP, Velocity, Freemarker, Thymeleaf, Mustache .. 가 있음
- 권장 : Mustache, Thymeleaf
- Mustache(문법이 심플. JS와 Java 모두 지원. 인텔리제이 무료버전에서도 플러그인 지원)
- Thymeleaf(스프링이 적극 지원 but 문법이 어려움. JS프레임워크와 비슷)

mustache(머스태시)

: 수많은 언어를 지원하는 가장 심플한 템플릿엔진.

자바에서 사용될 때는 서버 템플릿 엔진으로 사용 가능.

Mustache 템플릿 파일을 호출하려면 반드시 컨트롤러를 통해 호출해야 한다.
머스태시의 파일 위치는 기본적으로 scr/main/resources/templates이다.
머스태시의 파일 확장자는 .mustache이다. (.html파일 확장자를 .mustache로 생성하면 된다)

설치

인텔리제이 플러그인 - mustache 검색 - "Handlebars/Mustache" 설치 후 재시작
build.gradle에 mustache 의존성 등록 (dependencies에 추가) 후 gradle 업데이트

compile('org.springframework.boot:spring-boot-starter-mustache')
application.properties에 다음과 같이 설정한다.

(html 코드 수정시 매번 서버를 재시작하는 번거로움을 피하기 위한 작업이다)

spring.mustache.cache=false

정적인 페이지

package com.codessquad.qna.controller;

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

@Controller
public class WelcomeController {

    @GetMapping("/helloworld")
    public String welcome() {
        return "welcome";
    }
}

@Controller : 컨트롤러임을 명시하는 어노테이션

메서드명은 아무 상관이 없다.
@GetMapping("URL주소")

: 해당 메서드가 호출될 URL을 지정함.

@GetMapping(""), @PostMapping("") 두 가지를 먼저 사용해 본다.

returl "welcome";

머스태시 스타터가 컨트롤러의 리턴값(문자열)에 대해 앞의 경로(src/main/resources/templates)와 뒤의 파일 확장자(.mustache)를 자동 지정해 준다.

파일을 불러오는 과정

브라우저에서 localhost:8080/helloworld로 요청을 하며 데이터를 보낸다.
컨트롤러에서 /helloworld가 맵핑된 welcome()메서드가 호출된다
welcome()의 리턴값인 "welcome"에 해당하는 template디렉토리의 html파일(mustache)인 welcome.mustache가 로드된다

동적인 페이지

서버에 동적인 요청 보내기

: 요청 URL 뒤에 ?을 붙인 다음, 키=값(변수명=변수의 값) 을 지정한다.

localhost:8080/helloworld?name=bibi

두 개 이상의 값을 보낼 때는 키=값 사이에 &를 사용한다.

localhost:8080/helloworld?name=bibi&age=30

서버에서 데이터 받기

: URL에 지정된 변수명을 맵핑된 메서드의 파라미터로 받는다.

예를 들어localhost:8080/helloworld?name=bibi 의 name=bibi를 받기 위해서는

@GetMapping("/helloworld")메서드의 파라미터를 welcome(String name) 로 받을 수 있다.
받은 데이터를 활용하기 위해서는 MVC패턴 중 Model을 사용한다.

WelcomeController.java

package com.codessquad.qna;

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

@Controller
public class WelcomeController {

    @GetMapping("/helloworld")
    public String welcome(String name, Model model) {
        System.out.println("name : " + name);
        model.addAttribute("name", name);
        return "welcome";
    }
}

Model : 임포트해서 사용 (import org.springframework.ui.Model;)

메서드의 파라미터로 Model을 지정하고,
addAttribute(키, 값)로 Model에 파라미터로 받은 값을 넣어 전달할 수 있음.
Model에 저장된 데이터는 "welcome"이 리턴될 때 함께 전달된다.

즉 해당 과정은 MVC로 다음과 같이 설명할 수 있다.

: Controller에서 Model에 데이터를 저장 후, welcome.html이라는 View로 보내는 것.

welcome.mustache

<!DOCTYPE HTML>
<html>
<head>
    <title>Welcome</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>스프링 부트로 시작하는 웹 서비스</h1>
{{name}}, hello world!
</body>
</html>

{{name}}

{{,}} : 머스태시의 문법으로, Model에 담은 데이터를 꺼낼 때 사용한다.
name : Model에 값을 담을 때(addAttribute(키, 값)) 사용한 키를 등록하면 그 값을 가져와 준다.

즉 웹 페이지상 결과는 bibi, hello world! 가 된다.

웹 개발에 html을 활용할 때는 거의 동적으로 사용한다.

즉 사용자가 입력한 데이터를 가공 및 처리하고, 값에 따라 html을 동적으로 반환해 보여주게 된다.

그 때 사용하는 것이 템플릿엔진이며, 템플릿엔진 중 하나가 mustache이다.

`<form>`

서버로 데이터를 전달할 때 <form>태그를 사용한다.

속성 action : 서버에 요청을 보낼 때 어떤 URL로 보낼지를 지정할 수 있음.

<form action="/create"> : 해당 form으로부터 /create로 서버에 요청을 보냄

URL이 추가되면 항상 상응하는 Controller 및 메서드가 있어야 한다.

form태그에 아무 속성을 입력하지 않으면 기본적으로 GET방식으로 통신한다.

`index.mustache`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<form action="/create">
    <div>
        <label for="userid">아이디</label>
        <input type="text" name="userid" placeholder="아이디">
    </div>
    <div>
        <label for="password">비밀번호</label>
        <input type="password" name="password" placeholder="비밀번호">
    </div>
    <div>
        <label for="username">이름</label>
        <input type="text" name="username" placeholder="이름">
    </div>
    <div>
        <label for="useremail">이메일</label>
        <input type="email" name="useremail" placeholder="이메일">
    </div>
    <button type="submit">제출</button>
</form>
</body>
</html>

아무것도 입력하지 않고 제출했을 때의 URL

: http://localhost:8080/create?userid=&password=&username=&useremail=

`UserController.java`

package com.codessquad.qna.controller;

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

@Controller
public class UserController {

    @GetMapping("/create")
    public String create(String userid, String password, String username, String useremail) {
        System.out.println("아이디 : " + userid);
        System.out.println("비밀번호 : " + password);
        System.out.println("이름 : " + username);
        System.out.println("이메일 : " + useremail);
        return "index";
    }
}

출력 결과 : 아이디 : a 비밀번호 : b 이름 : c 이메일 : d@e

즉, html에서 name에 해당했던 값들 (userid, password, username, useremail)을 파라미터로 받아와 사용할 수 있다.

단점 : GET방식은 URL로 값이 전달되어 비밀번호 등 노출위험이 있다. 이럴 때는
해결 : form태그에 method="post"속성을 추가하고, 컨트롤러 어노테이션을 @PostMapping()으로 변경해 POST방식으로 전달하면 된다.

POST방식은 데이터를 URL로 전달하지 않아 정보가 노출되지 않는다.

GET방식과 POST방식

GET 방식 : 데이터 요청 및 조회할 때.

POST 방식 : 서버에 데이터를 전송해 추가 및 수정할 때.

GET, POST 사용하는 기준은?

GET은 Select적인 성향을 가지고 있습니다. GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이지 서버의 값이나 상태등을 바꾸지 않습니다. 게시판의 리스트라던지 글보기 기능 같은 것이 이에 해당하죠.
POST는 서버의 값이나 상태를 바꾸기 위해서 사용합니다. 글쓰기를 하면 글의 내용이 디비에 저장이 되고 수정을 하면 디비값이 수정이 되죠. 이럴 경우에 POST를 사용합니다.

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

'🖥 BE 백엔드 > Spring 스프링' 카테고리의 다른 글

[Spring] @RequestParam, @PathVariable 차이 (0)	2021.03.11
회원가입 및 회원조회 기능 만들기 - <form>, GET/POST, 리다이렉션 (0)	2021.03.09
[Spring] 인프런 스프링 입문(김영한 님) - 순수JDBC, 통합테스트, 스프링JdbcTemplate, JPA, 스프링 데이터 JPA (0)	2021.03.06
[Spring] 인프런 스프링 입문(김영한 님) - 스프링 DB 접근기술 : H2 데이터베이스 설치 (0)	2021.03.05
[Spring] 인프런 스프링 입문(김영한 님) - 웹 MVC 개발(회원관리 예제) : 회원 등록 및 조회 (0)	2021.03.05

'🖥 BE 백엔드/Spring 스프링' Related Articles

Bibi's DevLog 🤓🍎

mustache(템플릿엔진), 동적HTML, MVC의 개념, form태그, GET/POST 차이 본문

mustache(템플릿엔진), 동적HTML, MVC의 개념, form태그, GET/POST 차이

mustache를 활용한 동적인 HTML과 MVC 설명

MVC의 개념

템플릿 엔진이란?

mustache(머스태시)

설치

정적인 페이지

동적인 페이지

서버에 동적인 요청 보내기

서버에서 데이터 받기

<form>

index.mustache

UserController.java

GET방식과 POST방식

'🖥 BE 백엔드 > Spring 스프링' 카테고리의 다른 글

티스토리툴바

`<form>`

`index.mustache`

`UserController.java`