스프링 MVC - 웹 페이지 만들기
프로젝트 생성
프로젝트 선택
- Project: Gradle
- Project Language: Java
- Spring Boot: 2.7.2
Project Metadata
- Group: hello
- Artifact: item-service
- Name: item-service
- Package name: hello.itemservice
- Packaging: Jar (주의!)
- Java: 11
Dependencies: Spring Web, Thymeleaf, Lombok
요구사항 분석
상품 도메인 모델
상품 ID, 상품명, 가격, 수량
상품 관리 기능
상품 목록, 상품 상세, 상품 등록, 상품 수정
서비스 제공 흐름
요구사항이 정리되고 디자이너, 웹 퍼블리셔, 백엔드 개발자가 업무를 나누어 진행한다.
- 디자이너: 요구사항에 맞도록 디자인하고, 디자인 결과물을 웹 퍼블리셔에게 넘겨준다.
- 웹 퍼블리셔: 다자이너에서 받은 디자인을 기반으로 HTML, CSS를 만들어 개발자에게 제공한다.
- 백엔드 개발자: 디자이너, 웹 퍼블리셔를 통해서 HTML 화면이 나오기 전까지 시스템을 설계하고, 핵심 비즈니스 모델을 개발한다. 이후 HTML이 나오면 이 HTML을 뷰 템플릿으로 변환해서 동적으로 화면을 그리고, 또 웹 화면의 흐름을 제어한다.
참고: React, Vue.js 같은 웹 클라이언트 기술을 사용하고, 웹 프론트엔드 개발자가 별도로 있으면, 웹 프론트엔드 개발자가 웹 퍼블리셔 역할까지 포함해서 하는 경우도 있다. 웹 클라이언트 기술을 사용하면, 웹 프론트엔드 개발자가 HTML을 동적으로 만드는 역할과 웹 화면의 흐름을 담당한다. 이 경우 백엔드 개발자는 HTML 뷰 템플릿을 직접 만지는 대신에, HTTP API를 통해 웹 클라이언트가 필요로 하는 데이터와 기능을 제공하면 된다.
상품 서비스 HTML
부트스트랩
부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
부트스트랩 다운로드
https://getbootstrap.com/docs/5.0/getting-started/download/
Compiled CSS and JS 항목 다운로드
압축을 출고 bootstrap.min.css 를 복사해서 다음 폴더에 추가하자
resources/static/css/bootstrap.min.css
타임리프 간단히 알아보기
타임리프 사용 선언
<html xmlns:th="http://www.thymeleaf.org">
속성 변경 - th:href
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">href="value1" 을 th:href="value2" 의 값으로 변경한다.
HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경할 수 있다. 대부분의 HTML 속성을 th:xxx 로 변경할 수 있다.
타임리프 핵심 - Natural Templates
핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용된다. HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다.
따라서 HTML 파일을 서버 없이도 띄울 수 있고, 동적 템플릿 또한 가능하다.
이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 natural templates이라 한다
URL 링크 표현식 - @{...}
th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}"템플릿화 + 변수 선언
{itemId}(itemId=${item.id}) : itemId를 item.id로 치환
경로 변수( {itemId} ) 뿐만 아니라 쿼리 파라미터도 생성한다.
예) th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
생성 링크: http://localhost:8080/basic/items/1?query=test
리터럴 대체 - |...|
타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.
<span th:text="|Welcome to our application, ${user.name}!|">
location.href='/basic/items/add' => th:onclick="|location.href='@{/basic/items/add}'|"
반복 출력 - th:each
<tr th:each="item : ${items}">
모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.
컬렉션의 수 만큼 <tr>..</tr> 이 하위 태그를 포함해서 생성된다.
변수 표현식 - ${...}
<td th:text="${item.price}">10000</td>
모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다. 프로퍼티 접근법을 사용한다. ( item.getPrice() )
내용 변경 - th:text
<td th:text="${item.price}">10000</td>
내용의 값을 th:text 의 값으로 변경한다. 여기서는 10000을 ${item.price} 의 값으로 변경한다.
속성 변경 - th:value
th:value="${item.id}"
모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력한다. ( item.getId() )
value 속성을 th:value 속성으로 변경한다
'Advance I > Spring MVC' 카테고리의 다른 글
| 22.08.17 :: 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 (0) | 2022.08.17 |
|---|---|
| 22.08.16 (0) | 2022.08.16 |
| 22.08.13 (0) | 2022.08.13 |
| 22.08.11 (0) | 2022.08.11 |
| 22.08.10 (0) | 2022.08.10 |
