네로개발일기

[Spring MVC] Thymeleaf 타임리프 기본 기능

web/Spring

2022. 1. 17. 22:07

# 타임리프의 특징

1. 서버사이드 HTML 렌더링 (SSR)

JSP처럼 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용한다.

2. 네츄럴 템플릿

타임리프는 순수 HTML을 최대한 유지하는 특징이 있다.

타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.

JSP를 포함한 다른 뷰 템플릿은 해당 파일을 열면, 예를 들어 JSP 파일 자체를 웹 브라우저에서 열면 정상적인 HTML 결과를

반면에 타임리프로 작성된 파일은 해당 파일을 그대로 웹 브라우저에서 열어도 정상적인 HTML 결과를 확인할 수 없다. 오직 서버를 통해서 JSP가 렌더링되고 HTML 응답 결과를 받아야 화면을 확인할 수 있다.

반면에, 타임리프로 작성된 파일은 그대로 웹 브라우저에서 열어도 정상적인 HTML 결과를 확인할 수 있다. 물론 이 경우 동적으로 결과가 렌더링되지 않는다.

순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿(natural templates)이라 한다.

3. 스프링 통합 지원

자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.

# 타임리프 기본 기능

타임리프 사용 선언

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

기본 표현식

- 간단한 표현

* 변수 표현식 ${...}

* 선택 변수 표현식 *{...}

* 메시지 표현식 #{...}

* 링크 URL 표현식 @{...}

* 조각 표현식 ~{...}

- 리터럴

* 텍스트 'text', 'Spring' , ...

* 숫자 0, 421, 4.0

* 불린 true, false

* 널 null

* 리터럴 토큰 one, sometext, main, ...

- 문자 연산

* 문자 합치기 +

* 리터럴 대체 |The name is ${name}|

- 산술 연산

* Binary operators +, -, *, /, %

* Minus sign (unary operator) -

- 불린 연산

* Binary operators: and, or

* Boolean negation (unary operator) !, not

- 비교와 동등

* 비교 >, <, >=, <= (gt, lt, ge, le)

* 동등 연산 ==, != (eq, ne)

- 조건 연산

* If-then (if) ? (then)

* If-then-else (if) ? (then) : (else)

* Default (value) ?: (defaultvalue)

- 특별한 토큰

* No-Operation _

참고

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

728x90

저작자표시

'web > Spring' 카테고리의 다른 글

[Spring Boot] 기본 포트 설정하는 방법 (0)	2022.01.26
[Spring MVC] Thymeleaf 타임리프 기본 기능- 텍스트 text, utext (0)	2022.01.18
[Spring] UriComponentsBuilder / RestTemplate GET with parameters / RestTemplate 사용 시 Get 메서드로 파라미터 보내는 법 (0)	2022.01.13
[Spring] @RequestBody, @RequestParam, @ModelAttribute의 차이 (0)	2022.01.12
[Spring JPA] Spring JPA에서 Cubrid(DBMS) 연결하는 법 (0)	2022.01.04

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[Spring] UriComponentsBuilder / RestTemplate GET with parameters / RestTemplate 사용 시 Get 메서드로 파라미터 보내는 법

web/Spring

2022. 1. 13. 22:32

[이전 글]

[Spring] RestTemplate / spring 에서 http 통신하는 법 / API 호출

🐝 Rest 서비스를 호출하는 방법 - RestTemplate Spring 3부터 지원, REST API 호출 이후 응답을 받을 때까지 기다리는 동기 방식 - AsyncRestTemplate Spring 4에 추가된 비동기 RestTemplate - WebClient Spring..

frogand.tistory.com

🌱 UriComponentsBuilder

org.springframework.web.util.UriComponentsBuilder를 사용하면 명확한 URI 문자열을 생성할 수 있다.

final String uri = "https://frogand.tistory.com";
final String uriWithParameter = UriComponentsBuilder.fromHttpUrl(uri)
                                    .path("/category/programming/ECMAScript6"
                                    .queryParam("page", 2)
                                    .toString();
// https://frogand.tistory.com/category/programming/ECMAScript6?page=2

예제) parameter가 있는 url로 HTTP GET Method 호출

public static List<DataDto> selectDataByMemberId(String memberId) {
    if (StringUtils.isEmpty(memberId)) {
        return null;
    }

    final String selectDataUrl = "http://localhost:8080" + "/api/Data";
    String httpUrl = UriComponentsBuilder.fromHttpUrl(selectDataUrl)
            .queryParam("memberId", memberId)
            .toUriString();

    RestTemplate restTemplate = new RestTemplate();
    ResponseEntity<List<DataDto>> userRecommendResponse = 
            restTemplate.exchange(
            httpUrl,
            HttpMethod.GET, 
            null, 
            new ParameterizedTypeReference<List<DataDto>>() {
            });

    return userRecommendResponse.getBody();
}

출처

https://stackoverflow.com/questions/8297215/spring-resttemplate-get-with-parameters

Spring RestTemplate GET with parameters

I have to make a REST call that includes custom headers and query parameters. I set my HttpEntity with just the headers (no body), and I use the RestTemplate.exchange() method as follows: HttpHead...

stackoverflow.com

728x90

저작자표시

'web > Spring' 카테고리의 다른 글

[Spring MVC] Thymeleaf 타임리프 기본 기능- 텍스트 text, utext (0)	2022.01.18
[Spring MVC] Thymeleaf 타임리프 기본 기능 (0)	2022.01.17
[Spring] @RequestBody, @RequestParam, @ModelAttribute의 차이 (0)	2022.01.12
[Spring JPA] Spring JPA에서 Cubrid(DBMS) 연결하는 법 (0)	2022.01.04
[Spring Boot] Flyway를 이용한 데이터 마이그레이션 / Spring DB Migration Tool flyway (0)	2021.12.03

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[Spring] @RequestBody, @RequestParam, @ModelAttribute의 차이

web/Spring

2022. 1. 12. 22:06

Client에서 받은 요청을 객체로 바인딩하기 위해 사용하는 방법에는 총 @RequestBody, @RequestParam, @ModelAttribute 총 3가지가 있다.

🥑 @RequestParam

@RequestParam은 1개의 HTTP 요청 파라미터를 받기 위해서 사용한다.(HTTP 요청 파라미터를 @RequestParam이 쓰고있는 메서드의 변수로 Mapping해준다.) @RequestParam은 필수여부가 true이기 때문에 기본적으로 해당 파라미터가 전송되어야 한다. (전송되지 않으면 400 Error가 발생한다) 반드시 필요한 변수가 아니라면 required의 값을 false로 설정할 수 있으며 해당 Parameter를 사용하지 않고 요청을 보낼 경우 default로 defaultValue 옵션을 통해 값을 설정할 수 있다.

- value

- required

- defaultValue

🥑 @RequestBody

클라이언트가 전송하는 Json(application/json) 형태의 HTTP Body 내용을 Java 객체로 변환시켜주는 역할을 한다. 그렇기 때문에 Body가 존재하지 않는 HTTP GET 메서드에 @RequestBody를 사용할 경우 에러가 발생하게 된다. @RequestBody로 받은 데이터는 Spring에서 관리하는 MessageConverter들 중 하나인 MappingJackson2HttpMessageConverter를 통해 Java 객체로 변환된다.

Spring은 메시지를 변환하는 과정에서 객체의 기본 생성자를 통해 객체를 생성하고 내부적으로 Reflection을 사용해 값을 할당하므로 @RequestBody에는 값을 주입하기 위한 생성자나 Setter가 필요없다.

Json 데이터를 변환하기 위해서는 Jackson 라이브러리가 사용되는데, Jackson 라이브러리 내부적으로는 Getter나 Setter, @JsonInclude 등을 통해 필드에 있는 변수들의 이름을 찾고, Reflection을 이용해 값을 할당한다.

* Reflection

inspect or/and modify runtime attributes of classes, interfaces, fields, and methods.

자바에서 기본적으로 제공하는 API, 구체적인 클래스 타입을 알지 못해도 그 클래스의 정보(메서드, 변수 등등)에 접근이 가능하다.

🥑 @ModelAttribute

@ModelAttribute는 Client가 전송하는 multipart/form-data 형태의 HTTP Body 내용과 HTTP 파라미터의 값들을 생성자나 Setter를 통해 주입하기 위해 사용된다. @ModelAttribute에는 매핑시키는 파라미터의 타입이 객체의 타입과 일피하는지를 포함한 다양한 검증(Validation) 작업이 추가적으로 진행된다. 예를 들어 게시물의 번호를 저장하는 int형 index 변수에 1번이라는 String형을 넣으려고 한다면 BindException이 발생하게 된다. 즉, Json이나 XML과 같은 형태의 데이터를 MessageConverter를 통해 변환시키는 @RequestBody와 달리, @ModelAttribute는 multipart/form-data 형태의 HTTP Body와 HTTP 파라미터들을 생성자나 수정자로 주입시킨다는 차이가 있다.

> @ModelAttribut와 @RequestBody를 보다 극단적으로 설명하자면, @ModelAttribute는 바인딩하는 값들을 주입해주는 생성자나 Setter가 없다면 매핑이 되지 않는다. 하지만 @RequestBody는 요청받은 데이터를 변환시키는 것이기 때문에, 생성자나 Setter함수가 없어도 값이 매핑된다.

@ModelAttribut 어노테이션을 활용해서 특정 Parameter만 받아올 수도 있다.

[출처]

https://mangkyu.tistory.com/72

[Spring] @RequestBody, @ModelAttribute, @RequestParam의 차이

이번에는 Spring에서 Client로 받은 요청을 객체로 바인딩하기 위해 사용하는 방법들에 대해서 알아보도록 하겠습니다. 1. RequestBody, ModelAttribute, RequestParam이란? [ @RequestParam ] @RequestParam은..

mangkyu.tistory.com

https://www.baeldung.com/java-reflection

https://maivve.tistory.com/298

728x90

저작자표시

'web > Spring' 카테고리의 다른 글

[Spring MVC] Thymeleaf 타임리프 기본 기능 (0)	2022.01.17
[Spring] UriComponentsBuilder / RestTemplate GET with parameters / RestTemplate 사용 시 Get 메서드로 파라미터 보내는 법 (0)	2022.01.13
[Spring JPA] Spring JPA에서 Cubrid(DBMS) 연결하는 법 (0)	2022.01.04
[Spring Boot] Flyway를 이용한 데이터 마이그레이션 / Spring DB Migration Tool flyway (0)	2021.12.03
[Spring] RestTemplate / spring 에서 http 통신하는 법 / API 호출 (2)	2021.12.01

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[React] JSX에서 {} 사용하기

web/React

2022. 1. 11. 22:39

React에서는 JSX를 javascript로 변환하기 때문에 javascript 문법을 사용하기 위해서는 따로 mark를 해주어야 한다. => { }

Javascript 코드

<div className="card__top--weather">{weather}</div>

weather은 javascript 변수이다.

{ tags.map((tag, index) => {
    return (
        <div key={index} className="card__tags--tag">{tag}</div>
    );
 }) 
}

map이 javascript 함수이기 때문에 {}로 둘러싸여져 있다.

inline style

import React from 'react';
import Hello from './Hello';

function App() {
    const name = 'react';
    const style = {
        backgroudColor: 'black',
        color: 'yellow',
        fontSize: 24, // 기본단위 px
        padding: '1rem' // 다른 단위 사용 시 문자열로 설정
    };
    
    return (
        <>
            <Hello />
            <div style={style}>{name}</div>
        </>
    );
}

인라인 스타일은 javascript 객체 형태로 작성해야 한다. 따라서 javascript 객체인 style을 {style}로 사용하는 것이다.

import React from 'react';
import Hello from './Hello';

function App() {
    const name = 'react';
    
    return (
        <>
            <Hello />
            <div style={{
                backgroudColor: 'black',
                color: 'yellow',
                fontSize: 24, // 기본단위 px
                padding: '1rem' // 다른 단위 사용 시 문자열로 설정
             }}>
                 {name}
             </div>
        </>
    );
}

import / export

const a = 1;
const b = 3;
export {a};
export const c = 2;
export default b;

=> import b, {a, c} from './Example';

예) import React, { useState } from 'react';

export default로 export된 것은 {}로 감싸지 않고 Import를 하고, 나머지는 {}로 감싸서 import한다.

728x90

저작자표시

'web > React' 카테고리의 다른 글

[React] package.json 명령어 npm start / npm run build 스크립트 차이점 (0)	2022.02.10
[React] DOM & Virtual DOM / What is DOM? (0)	2022.01.10
[React] JSX 이해하기 (0)	2022.01.06
[React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1 (0)	2021.12.06

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[React] DOM & Virtual DOM / What is DOM?

web/React

2022. 1. 10. 22:57

**WHAT IS DOM?**

HTML 문서의 구성요소들을 객체로 구조화하여 나타낸 것

웹 브라우저 내부에서 HTML 태그들은 객체 형태로 실행된다. 이 객체들을 DOM 객체라고 부른다. 즉, DOM 객체는 웹 브라우저 내부의 태그 객체이다.

* DOM과 HTML의 차이점

- HTML: 화면에 보이고자 하는 구조를 문서로 만든 것으로 단순 텍스트

- DOM: HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용

DOM의 특징

- 객체 지향적 설계

- HTML 문서 내의 모든 요소를 객체화해서 표현하고 접근하도록 함.

- 문서를 '트리 구조'로 표현

- HTML 문서를 텍스트가 아닌, 트리 구조를 갖는 객체들의 계층적 구조로 표현

- Javascript와 같은 script 언어를 통해 동적 제어 기능을 제공 (등록, 삭제, 수정, 이벤트 처리 등) - Javascript에 의해 수정될 수 있는 동적 모델

DOM은 어떤 형태일까?

DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 가지고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.

DOM 객체 구조는 "노드 트리"로 표현된다.

HTML 예시에서

<!DOCTYPE HTML>
<html lang="ko">
    <head>
    	<title>My blog</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>How are you?</p>
    </body>
</html>

아래와 같은 노드 트리로 표현된다.

노드 트리를 자바스크립트 객체로 표현할 수 있다.

{
    type: 'body',
    props: {},
    children: [
        {
            type: 'h1',
            props: {},
            children: ['Hello, world!']
        },
        {
            type: 'p',
            props: {},
            children: ['How are you?']
        }
    ]
}

웹 브라우저 Workflow

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 거친다.

-> DOM tree 생성

브라우저가 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM 노드로 이뤄진 트리를 생성한다 각 노드는 HTML 요소들과 연관되어 있다.

-> CSSOM tree 생성

* CSSOM(Cascading Style Sheets Object Model) tree: 요소들과 연관된 스타일 정보의 구조화된 표현

-> Render tree 생성

외부 CSS 파일과 각 요소의 inline 스타일을 파싱한다. 스타일 정보를 사용해 DOM tree에 따라 새로운 트리인 Render Tree를 생성한다.

-> 브라우저에 그려짐 (Layout, Printing)

레이아웃 과정을 거쳐 각 노드들의 스크린 좌표가 주어지고 paint() 메서드를 호출하여 스크린에 원하는 정보를 브라우저에 출력한다.

node가 변경될 때마다 위 과정을 새롭게 하기 때문에 속도가 느려진다.

Virtual DOM 동작 방식

1. 데이터가 업데이트되면, 전체 UI를 Virtual DOM에 리렌더링한다.

2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용된다.

Virtual DOM의 특징

- DOM의 가벼운 복사본

- In-memory에 존재, 실제로 렌더링되지 않음

- Javascript 객체로 이루어진 tree data structure

- React와 같은 UI 라이브러리에서 많이 쓰임

Virtual DOM이 렌더링 횟수를 줄여주는 예시

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root">
            <ul class="list">
                <li>red apple</li>
                <li>yellow banana</li>
                <li>orange mandarin</li>
            </ul>
        </div>
    </body>
</html>

비효율적 업데이트 (DOM)

const root = document.querySelector('#root');
const liTags = roo.querySelectorAll('li');

// 화면 렌더링 발생 1
liTags[0].textContext = 'red apple';
// 화면 렌더링 발생 2
liTags[1].textContext = 'yellow banana';
// 화면 렌더링 발생 3
liTags[2].textContext = 'orange mandarin';

효율적인 업데이트 (Virtual DOM)

const root = document.querySelector('#root');
const virtualDOM = document.createElement('ul');
virtualDOM.classList.add('list');

const appleLI = document.createElement('li');
appleLI.textContext = 'red apple';

const bananaLI = document.createElement('li');
bananaLI.textContext = 'yellow banana';

const mandarinLI = document.createElement('li');
mandarinLI.textContext = 'orange mandarin';

virtualDOM.appendChild(appleLI);
virtualDOM.appendChild(bananaLI);
virtualDOM.appendChild(mandarinLI);

// 한 번 렌더링
root.replaceChild(virtualDOM, root.querySelector('ul');

* 위의 virtualDOM 변수가 실제 Virtual DOM을 의미하지는 않는다.

Reconciliation(재조정)

Virtual DOM이 변경된 부분만 알아내는 방법

- 전체 DOM 트리를 탐색하고 비교하는 알고리즘 (diff algorithm)이 있지만, 이 알고리즘은 O(n^3)의 복잡도

=> React는 두 가지 가정을 기반하여 O(n) 복잡도의 휴리스틱 알고리즘을 구현하였다.

Reconciliation 두 가지 가정

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어 낸다. 엘리먼트가 다르면 비교하지 않는다.

2. 개발자가 key prop을 통해 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야할지 표시해줄 수 있다.(key를 통해 비교)

=> 부모 노드의 타입이 다르면 자식 노드는 비교하지 않는다.

Virtual DOM은 정말 빠른가?

react는 실제 DOM의 복사본을 메모리에 저장한다. DOM을 수정하면 먼저 이러한 변경사항을 메모리 내 DOM에 적용하고 변화된 부분을 파악한다. 변경사항을 일괄 처리하고 호출을 통해 한 번에 실제 돔에 적용하여 리플로우와 리페인트를 최소화한다.

728x90

저작자표시

'web > React' 카테고리의 다른 글

[React] package.json 명령어 npm start / npm run build 스크립트 차이점 (0)	2022.02.10
[React] JSX에서 {} 사용하기 (0)	2022.01.11
[React] JSX 이해하기 (0)	2022.01.06
[React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1 (0)	2021.12.06

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

« 2024/04 »
일	월	화	수	목	금	토
	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

'전체 글'에 해당되는 글 194건

# 타임리프의 특징

# 타임리프 기본 기능

타임리프 사용 선언

기본 표현식

'web > Spring' 카테고리의 다른 글

Written by ner.o

🌱 UriComponentsBuilder

'web > Spring' 카테고리의 다른 글

Written by ner.o

🥑 @RequestParam

🥑 @RequestBody

🥑 @ModelAttribute

'web > Spring' 카테고리의 다른 글

Written by ner.o

Javascript 코드

inline style

import / export

'web > React' 카테고리의 다른 글

Written by ner.o

WHAT IS DOM?

DOM의 특징

DOM은 어떤 형태일까?

웹 브라우저 Workflow

Virtual DOM 동작 방식

Virtual DOM의 특징

Virtual DOM이 렌더링 횟수를 줄여주는 예시

Reconciliation(재조정)

Virtual DOM은 정말 빠른가?

'web > React' 카테고리의 다른 글

Written by ner.o

NOTICE

RECENT POSTS

RECENT COMMENTS

SITE LINK

TAGS

COUNTER

CALENDAR

티스토리툴바

**WHAT IS DOM?**