<div id="readability-page-1" class="page"><div>
 
 <header>
 
 

 
 

 

 
 
 

 
 
 
 2 분 소요
 
 
 
 


 </header>
 

 <section itemprop="text">
 
 

<h2 id="1-needs">1. Needs</h2>

특정 기술의 컨셉을 확인하기 위해 스프링 부트(spring boot), 타임리프(thymeleaf) 프레임워크로 간단한 어플리케이션을 만들어보는 과정에서 다음과 같은 문제를 만났습니다.

<ul>
 <li>타임리프는 SSR(server side rendering) 방식이라 요청에 대한 응답을 페이지로 받는다.</li>
 <li>매번 신규 페이지를 받아 처리하다보니 브라우저의 새로고침이나 뒤로가기를 하면 데이터가 꼬인다.</li>
</ul>

위 문제들을 해결하기 위해 다음과 같은 방식으로 기능을 구현했습니다.

<ul>
 <li>SPA(single page application) 방식처럼 페이지는 유지한 채 특정 영역만 다시 렌더링(rendering)</li>
 <li><code>jquery</code>, <code>axios</code> 같은 외부 의존성을 추가하지 않고 기능 구현</li>
</ul>

이번 포스트에선 브라우저가 기본으로 제공하는 웹 API <code>fetch</code> 함수를 사용해 페이지의 부분적인 렌더링을 수행하는 방법에 대해 정리하였습니다.

<h2 id="2-practice">2. Practice</h2>

간단한 예시를 만들어 살펴보겠습니다.

<h2 id="21-packages">2.1. packages</h2>

<div><pre><code>./
├── HELP.md
├── build.gradle
├── gradle
│&nbsp;&nbsp; └── wrapper
│&nbsp;&nbsp; ├── gradle-wrapper.jar
│&nbsp;&nbsp; └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── settings.gradle
└── src
 ├── main
 │&nbsp;&nbsp; ├── java
 │&nbsp;&nbsp; │&nbsp;&nbsp; └── action
 │&nbsp;&nbsp; │&nbsp;&nbsp; └── in
 │&nbsp;&nbsp; │&nbsp;&nbsp; └── blog
 │&nbsp;&nbsp; │&nbsp;&nbsp; ├── ActionInBlogApplication.java
 │&nbsp;&nbsp; │&nbsp;&nbsp; ├── controller
 │&nbsp;&nbsp; │&nbsp;&nbsp; │&nbsp;&nbsp; └── FormController.java
 │&nbsp;&nbsp; │&nbsp;&nbsp; └── domain
 │&nbsp;&nbsp; │&nbsp;&nbsp; └── User.java
 │&nbsp;&nbsp; └── resources
 │&nbsp;&nbsp; ├── application.yml
 │&nbsp;&nbsp; ├── static
 │&nbsp;&nbsp; │&nbsp;&nbsp; └── index.css
 │&nbsp;&nbsp; └── templates
 │&nbsp;&nbsp; └── index.html
 └── test
 └── java
 └── action
 └── in
 └── blog
 └── ActionInBlogApplicationTests.java
</code></pre></div>

<h2 id="22-buildgradle">2.2. build.gradle</h2>

다음과 같은 환경에서 실습을 진행합니다.

<div><pre><code>plugins {
 id 'java'
 id 'org.springframework.boot' version '3.0.4'
 id 'io.spring.dependency-management' version '1.1.0'
}

group = 'action-in-blog'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'

configurations {
 compileOnly {
 extendsFrom annotationProcessor
 }
}

repositories {
 mavenCentral()
}

dependencies {
 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
 implementation 'org.springframework.boot:spring-boot-starter-web'
 compileOnly 'org.projectlombok:lombok'
 annotationProcessor 'org.projectlombok:lombok'
 testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

tasks.named('test') {
 useJUnitPlatform()
}
</code></pre></div>

<h3 id="23-applicationyml">2.3. application.yml</h3>

타임리프를 위한 설정입니다.

<div><pre><code>spring:
 mvc:
 static-path-pattern: /static/**
 thymeleaf:
 prefix: classpath:templates/
 check-template-location: true
 suffix: .html
 mode: HTML5
 cache: false
</code></pre></div>

<h3 id="24-indexhtml">2.4. index.html</h3>

<ul>
 <li>submit 함수
 <ul>
 <li><code>preventDefault</code> 함수를 호출하여 폼(form) <code>submit</code> 이벤트의 고유 기능인 페이지 이동을 막습니다.</li>
 <li>폼 엘리먼트(element)를 폼 데이터 객체로 변경합니다.</li>
 <li>API 요청을 수행합니다.</li>
 <li>비동기 콜백을 통해 응답을 텍스트로 변경합니다.</li>
 <li><code>#user</code> 영역의 HTML 텍스트를 응답 결과로 대체합니다.</li>
 </ul>
 </li>
</ul>

<div><pre><code>&lt;html&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
 &lt;link rel="stylesheet" type="text/css" href="static/index.css"&gt;
 &lt;title&gt;Document&lt;/title&gt;

 &lt;script type="text/javascript"&gt;
 async function submit(event) {
 event.preventDefault()
 const formElement = document.querySelector("#form");
 const formData = new FormData(formElement);
 const result = await fetch('/user', {
 method: 'POST',
 body: formData,
 }).then(response =&gt; response.text())
 document.getElementById('user').outerHTML = result
 }
 &lt;/script&gt;
 
&lt;/head&gt;
&lt;body&gt;
&lt;div id="user"&gt;
 &lt;div class="row"&gt;
 &lt;p&gt;name&lt;/p&gt;
 &lt;p th:text="${name}" class="value"/&gt;
 &lt;/div&gt;
 &lt;div class="row"&gt;
 &lt;p&gt;contact&lt;/p&gt;
 &lt;p th:text="${contact}" class="value"/&gt;
 &lt;/div&gt;
 &lt;div class="row"&gt;
 &lt;p&gt;e-mail&lt;/p&gt;
 &lt;p th:text="${email}" class="value"/&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;form id="form"&gt;
 &lt;div class="row"&gt;
 &lt;p&gt;name&lt;/p&gt;
 &lt;input type="text" name="name"&gt;
 &lt;/div&gt;
 &lt;div class="row"&gt;
 &lt;p&gt;contact&lt;/p&gt;
 &lt;input type="text" name="contact"&gt;
 &lt;/div&gt;
 &lt;div class="row"&gt;
 &lt;p&gt;e-mail&lt;/p&gt;
 &lt;input type="text" name="email"&gt;
 &lt;/div&gt;
 &lt;button type="submit"&gt;submit&lt;/button&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;
 const formElement = document.querySelector("#form");
 formElement.addEventListener('submit', submit)
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>

<h3 id="25-formcontroller-class">2.5. FormController Class</h3>

<ul>
 <li><code>/user</code> 경로
 <ul>
 <li>요청으로 들어온 정보를 그대로 모델(model) 객체에 담습니다.</li>
 <li>응답 경로는 <code>index.html</code> 내부에 <code>#user</code> 영역만 페이지로 만들어 반환합니다.</li>
 </ul>
 </li>
</ul>

<div><pre><code>package action.in.blog.controller;

import action.in.blog.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class FormController {

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

 @PostMapping("/user")
 public String user(@ModelAttribute User user, Model model) {
 model.addAttribute("name", user.getName());
 model.addAttribute("contact", user.getContact());
 model.addAttribute("email", user.getEmail());
 return "index::#user";
 }
}
</code></pre></div>

<h5 id="result-of-practice">Result of Practice</h5>

<ul>
 <li>오른쪽 폼에서 입력한 값들이 왼쪽 창으로 그대로 이동됩니다.</li>
</ul>


 <img src="https://junhyunny.github.io/images/rerender-specific-elements-in-thymeleaf-1.gif" width="100%">


<h2 id="closing">CLOSING</h2>

REST API 방식처럼 필요한 데이터만 주고 받진 않지만, 사용자에겐 같은 경험을 제공합니다. 
다만 HTML 엘리먼트를 통째로 바꾸기 때문에 XSS(cross site script) 공격에 취약하므로 주의해야합니다.

<h4 id="test-code-repository">TEST CODE REPOSITORY</h4>

<ul>
 <li><a href="https://github.com/Junhyunny/blog-in-action/tree/master/2023-03-24-rerender-specific-elements-in-thymeleaf">https://github.com/Junhyunny/blog-in-action/tree/master/2023-03-24-rerender-specific-elements-in-thymeleaf</a></li>
</ul>

<h4 id="recommend-next-posts">RECOMMEND NEXT POSTS</h4>

<ul>
 <li><a href="https://junhyunny.github.io/information/security/spring-mvc/reflected-cross-site-scripting/">반사형 XSS(Reflected Cross Site Scripting) 공격과 방어</a></li>
 <li><a href="https://junhyunny.github.io/information/security/spring-mvc/stored-cross-site-scripting/">저장형 XSS(Stored Cross Site Scripting) 공격과 방어</a></li>
 <li><a href="https://junhyunny.github.io/information/security/dom-based-cross-site-scripting/">DOM 기반 XSS(DOM based Cross Site Scripting) 공격과 방어</a></li>
 <li><a href="https://junhyunny.github.io/javascript/react/security/xss-weakness-when-dangerously-set-inner-html-attribute/">dangerouslySetInnerHTML Attribute And XSS Attack</a></li>
 <li><a href="https://junhyunny.github.io/javascript/vue.js/security/xss-weakness-when-using-v-html/">v-html Directive And XSS Attack</a></li>
</ul>

<h4 id="reference">REFERENCE</h4>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/text">https://developer.mozilla.org/en-US/docs/Web/API/Response/text</a></li>
 <li><a href="https://wangtak.tistory.com/29">https://wangtak.tistory.com/29</a></li>
 <li><a href="https://chaelin1211.github.io/study/2021/04/14/thymeleaf-ajax.html">https://chaelin1211.github.io/study/2021/04/14/thymeleaf-ajax.html</a></li>
</ul>


 
 </section>

 

 


 
 

 </div></div>

Junhyunny's Devlogs

1. Needs
특정 기술의 컨셉을 확인하기 위해 스프링 부트(spring boot), 타임리프(thymeleaf) 프레임워크로 간단한 어플리케이션을 만들어보는 과정에서 다음과 같은 문제를 만났습니다.
타임리프는 SSR(server side rendering) 방식이라 요청에 대한 응답을 페이지로 받는다.
매번 신규 페이지를 받아 처리하다보니 브라우저의 새로고침이나 뒤로가기를 하면 데이터가 꼬인다.
위 문제들을 해결하기 위해 다음과 같은 방식으로 기능을 구현했습니다.
SPA(single page application) 방식처럼 페이지는 유지한 채 특정 영역만 다시 렌더링(rendering)
jquery, axios 같은 외부 의존성을 추가하지 않고 기능 구현
이번 포스트에선 브라우저가 기본으로 제공하는 웹 API fetch 함수를 사용해 페이지의 부분적인 렌더링을 수행하는 방법에 대해 정리하였습니다.
2. Practice
간단한 예시를 만들어 살펴보겠습니다.
2.1. packages
./
├── HELP.md
├── build.gradle
├── gradle
│   └── wrapper
│   ├── gradle-wrapper.jar
│   └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── settings.gradle
└── src
 ├── main
 │   ├── java
 │   │   └── action
 │   │   └── in
 │   │   └── blog
 │   │   ├── ActionInBlogApplication.java
 │   │   ├── controller
 │   │   │   └── FormController.java
 │   │   └── domain
 │   │   └── User.java
 │   └── resources
 │   ├── application.yml
 │   ├── static
 │   │   └── index.css
 │   └── templates
 │   └── index.html
 └── test
 └── java
 └── action
 └── in
 └── blog
 └── ActionInBlogApplicationTests.java
2.2. build.gradle
다음과 같은 환경에서 실습을 진행합니다.
plugins {
 id 'java'
 id 'org.springframework.boot' version '3.0.4'
 id 'io.spring.dependency-management' version '1.1.0'
}
group = 'action-in-blog'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'
configurations {
 compileOnly {
 extendsFrom annotationProcessor
 }
}
repositories {
 mavenCentral()
}
dependencies {
 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
 implementation 'org.springframework.boot:spring-boot-starter-web'
 compileOnly 'org.projectlombok:lombok'
 annotationProcessor 'org.projectlombok:lombok'
 testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
tasks.named('test') {
 useJUnitPlatform()
}
2.3. application.yml
타임리프를 위한 설정입니다.
spring:
 mvc:
 static-path-pattern: /static/**
 thymeleaf:
 prefix: classpath:templates/
 check-template-location: true
 suffix: .html
 mode: HTML5
 cache: false
2.4. index.html
submit 함수
 
preventDefault 함수를 호출하여 폼(form) submit 이벤트의 고유 기능인 페이지 이동을 막습니다.
폼 엘리먼트(element)를 폼 데이터 객체로 변경합니다.
API 요청을 수행합니다.
비동기 콜백을 통해 응답을 텍스트로 변경합니다.
#user 영역의 HTML 텍스트를 응답 결과로 대체합니다.
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" type="text/css" href="static/index.css">
 <title>Document</title>
 <script type="text/javascript">
 async function submit(event) {
 event.preventDefault()
 const formElement = document.querySelector("#form");
 const formData = new FormData(formElement);
 const result = await fetch('/user', {
 method: 'POST',
 body: formData,
 }).then(response => response.text())
 document.getElementById('user').outerHTML = result
 }
 </script>
 
</head>
<body>
<div id="user">
 <div class="row">
 name
 
 </div>
 <div class="row">
 contact
 
 </div>
 <div class="row">
 e-mail
 
 </div>
</div>
<form id="form">
 <div class="row">
 name
 <input type="text" name="name">
 </div>
 <div class="row">
 contact
 <input type="text" name="contact">
 </div>
 <div class="row">
 e-mail
 <input type="text" name="email">
 </div>
 <button type="submit">submit</button>
</form>
<script type="text/javascript">
 const formElement = document.querySelector("#form");
 formElement.addEventListener('submit', submit)
</script>
</body>
</html>
2.5. FormController Class
/user 경로
 
요청으로 들어온 정보를 그대로 모델(model) 객체에 담습니다.
응답 경로는 index.html 내부에 #user 영역만 페이지로 만들어 반환합니다.
package action.in.blog.controller;
import action.in.blog.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class FormController {
 @GetMapping("/")
 public String index() {
 return "index";
 }
 @PostMapping("/user")
 public String user(@ModelAttribute User user, Model model) {
 model.addAttribute("name", user.getName());
 model.addAttribute("contact", user.getContact());
 model.addAttribute("email", user.getEmail());
 return "index::#user";
 }
}
Result of Practice
오른쪽 폼에서 입력한 값들이 왼쪽 창으로 그대로 이동됩니다.
CLOSING
REST API 방식처럼 필요한 데이터만 주고 받진 않지만, 사용자에겐 같은 경험을 제공합니다. 
다만 HTML 엘리먼트를 통째로 바꾸기 때문에 XSS(cross site script) 공격에 취약하므로 주의해야합니다.
TEST CODE REPOSITORY
https://github.com/Junhyunny/blog-in-action/tree/master/2023-03-24-rerender-specific-elements-in-thymeleaf
RECOMMEND NEXT POSTS
반사형 XSS(Reflected Cross Site Scripting) 공격과 방어
저장형 XSS(Stored Cross Site Scripting) 공격과 방어
DOM 기반 XSS(DOM based Cross Site Scripting) 공격과 방어
dangerouslySetInnerHTML Attribute And XSS Attack
v-html Directive And XSS Attack
REFERENCE
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/en-US/docs/Web/API/Response/text
https://wangtak.tistory.com/29
https://chaelin1211.github.io/study/2021/04/14/thymeleaf-ajax.html

Re-render Specific Elements in Thymeleaf

댓글