- [Spring] 스프링 MVC 1편 7) 스프링 MVC 웹 페이지 만들기(1)2023년 11월 09일 09시 31분 54초에 업로드 된 글입니다.작성자: 민발자728x90
Session 7 스프링 MVC 웹 페이지 만들기
1. 프로젝트 생성
1) 프로젝트 생성
스프링 부트 3.x 버전부턴 자바 17 이상을 사용
2. 요구사항 분석
1) 상품 도메인
상품 ID, 상품명, 가격, 수량
2) 상품 관리 기능
상품 목록, 상품 상세, 상품 등록, 상품 수정
3) 서비스 제공 흐름
디자이너 : 요구사항에 맞도록 디자인하고, 디자인 결과물을 웹 퍼블리셔에게 넘김
웹 퍼블리셔 : 디자이너에게 받은 디자인을 기반으로 HTML, CSS를 만들어 개발자에게 제공
백엔드 개발자 : 디자이너, 웹 퍼블리셔를 통해 HTML 화면이 나오기 전까지 시스템을 설계, 핵심 비즈니스 모델 개발하다가 HTML이 나오면 뷰 템플릿으로 변환해서 동적으로 화면을 그리고 웹 화면의 흐름을 제어한다.
3. 상품 도메인 개발
1) 상품 도메인
상품 ID, 상품명, 가격, 수량
private Long id; private String itemName; private Integer price; private Integer quantity;2) 상품 관리 기능
상품 목록, 상품 상세, 상품 등록, 상품 수정
private static final Map<Long, Item> store = new HashMap<>(); private static long sequence = 0L; public Item save(Item item) { item.setId(++sequence); store.put(item.getId(), item); return item; } public Item findById(Long id) { return store.get(id); } public List<Item> findAll() { return new ArrayList<>(store.values()); } public void update(Long itemId, Item updateParam) { Item findItem = findById(itemId); findItem.setItemName(updateParam.getItemName()); findItem.setPrice(updateParam.getPrice()); findItem.setQuantity(updateParam.getQuantity()); }
4. 상품 서비스 HTML
1) 부트스트랩 사용
웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크
2) html 생성
정적 리소스가 공개되는 /resources/static 폴더에 html을 넣어두면 실제 서비스에서도 공개된다.
서비스를 운영한다면 지금처럼 공개할 필요 없는 HTML을 두는 것은 주의
5. 상품 목록 - 타임 리프
1) 타임리프
순수한 html 파일을 웹 브라우저에서 열어 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과 확인 가능
순순 html을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿이라 함
<html xmlns:th="http://www.thymeleaf.org">타임리프 사용 선언
2) 속성 변경 th:XXX
th:href="@{/css/bootstrap.min.css}"href="value1"을 th:href="value2"으로 변경한다
타임리프 뷰 템플릿을 거치게 되면서 원래 값을 th:XXX값으로 변경 만약 값이 없다면 새로 생성
HTML을 그대로 볼 때는 href 속성이 사용되고 뷰 템플릿을 거치며 th:XXX값이 대체되면서 동적으로 변경할 수 있다
대부분의 HTML 속성을 변경할 수 있다.
핵심은 th:XXX가 붙은 부분은 서버사이드에서 렌더링되고 기존 것을 대체한다. 없으면 기존 html의 속성이 그대로 사용
html 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.
3) URL 링크 표현식 @{...}
th:href="@{/css/bootstrap.min.css}"URL 링크를 사용하는 경우에 사용, URL 링크 표현식이라고 함
URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함
3) 리터럴 대체 문법 | ... |
th:onclick="|location.href='@{/basic/items/add}'|"타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용, 이때 리터럴 대체 문법을 사용한다.
th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''" // 리터럴 대체 문법 사용 th:onclick="|location.href='@{/basic/items/add}'|"4) 반복 출력 th:each
<tr th:each="item : ${items}">모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고 반복문 안에서 item 변수를 사용할 수 있음
5) 변수 표현식 ${...}
<td th:text="${item.price}">10000</td>모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다, 프로퍼티 접근법을 사용
6) 내용 변경 th:text
<td th:text="${item.price}">10000</td>값을 th:text 값으로 변경
10000 → th:text 값 변경
7) URL 링크 표현식 @{...}
th:href="@{/basic/items/{itemId}(itemId=${item.id})}" // 쿼리 파라미터 생성 th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}" // http://localhost:8080/basic/items/1?query=testURL 링크 표현식을 사용하면 경로를 템플릿처럼 사용 가능
경로 변수 {itemId}뿐만 아니라 쿼리 파라미터도 생성
728x90'공부 > Spring' 카테고리의 다른 글
[Spring] 스프링 DB 1편 1) JDBC 이해 (0) 2023.11.11 [Spring] 스프링 MVC 1편 7) 스프링 MVC 웹 페이지 만들기(2) (2) 2023.11.10 [Spring] 스프링 MVC 1편 6) 스프링 MVC 기본 기능(2) (0) 2023.11.08 [Spring] 스프링 MVC 1편 6) 스프링 MVC 기본 기능(1) (0) 2023.11.07 [Spring] 스프링 MVC 1편 5) 스프링 MVC 구조이해 (0) 2023.11.06 이전글이 없습니다.댓글