게시판을 구현하기 위해 여러 페이지를 HTML로 만들었으며 그 과정 중 유용한 내용을 정리하였다.
먼저, 타임리프(thymeleaf template engine)를 많이 사용하였다.
템플릿 엔진(Template Engine) : 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어로, 순수하게 Java Application(jar)으로만 웹 구현과 기동이 가능하다.
Thymeleaf 템플릿 엔진 사용법
1. build.gradle에 아래 코드를 추가하여 의존성을 주입해준다.
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
2. html 태그 안에 아래 속성을 추가해준다.
<html xmlns:th="http://www.thymeleaf.org"> - <html>의 xmlns 속성은 해당 문서를 위한 XML 네임스페이스(namespace)를 명시한다.
- xmlns 속성은 해당 파일이 XHTML일 경우 반드시 명시되어야 하며, HTML 4.01에서는 유효하지 않고
HTML5에서는 선택 사항이다.
3. body 안의 여러 태그 안에 th 속성을 추가하여 thymeleaf template engine의 메소드를 사용한다.
Thymeleaf 템플릿 엔진 활용
- 페이지를 이동할 때 데이터 값을 전달해야하는 경우.
위의 homeController에서 노란색 코드들(35,36번째 라인)이 웹페이지로 이동할 때 데이터 값을 전달해준다.
Model은 스프링에서 제공해주는 데이터 공유 객체로 Controller의 메서드는 Model을 파라미터로 받을 수 있다.
개발자가 메소드 내에서 model객체를 생성할 필요 없이 파라미터로 선언만 해주면 스프링이 알아서 만들어준다.
model의 addAttribute() 메소드로 model.addAttribute("key", value) 속성 값을 추가하여 데이터를 전달한다.
예시로 위 사진 속 빨간 밑줄을 그은 "loginMessage" key에 loginMember.getName()+"님 로그인 상태입니다."라는 value(데이터)가 매칭 된다.
homeController.java 파일에서 model.addAttribute()로 넘긴 "loginMessage"를 HTML 파일에서 th 속성을 활용하여 위와 같이 불러올 수 있다. ( Thymeleaf에서 변수 표현식 : ${변수명} )
loginMessage에 매칭 되었던 value 값이 정상적으로 출력되는 것을 볼 수 있다.
- th 태그 반복문
th:each 태그를 활용하여 다음과 같이 반복문을 구현할 수 있다. 파이썬의 for x in list: 와 같은 형태이다.
List 값인 members에서 데이터를 하나씩 member라는 변수에 저장하여 이를 반복문 내에서 사용할 수 있다.
위의 boardHome.html 코드에서 th:each 태그의 인덱스 부분인 두 번째 변수 i는 옵션이다. 이 인덱스 변수에는
.index / .count / .size 등의 메소드가 있으며, .index는 0부터 시작, .count는 1부터 시작, .size는 리스트의 사이즈를 가져온다. 이를 활용하여 아래와 같이 오래된 게시글에 낮은 번호를 부여하도록 코드를 작성하였다.
※ 참고
Property or field 'id' cannot be found on null
위와 같은 에러가 발생한 경우, 이는 member 가 null 인 케이스에 발생한 문제로,
다음과 같이 th:value="${memberFormData?.id}" ?를 붙여 해당 데이터가 null 이 아닐 경우에만 name을 참조하도록 해야 한다.
위의 코드에서 '?'를 붙인 이유는 여기에 정리하였다. https://hyobn.tistory.com/13
input 태그
id 속성과 name 속성의 차이
id 속성은 page 안에서 중복으로 사용할 수 없으며, 주로 JavaScript에서 다루기 위해 지정한다.
또한, id 속성으로 설정된 값은 Server단의 파라미터 값으로 넘어가지 않기 때문에, Server단에서 접근이 불가능하다.
name 속성은 page 영역에서 중복되어 사용이 가능하며, action에 해당하는 페이지에 전달할 수 있는 파라미터로 사용한다. 즉, 태그의 name 값을 키(Key)로 하여 입력된 값(Value)이 전송된다.
required 속성
<input> 태그의 required 속성은 폼 데이터(form data)가 서버로 제출되기 전 반드시 입력되어 있어야 하는 입력 필드를 명시한다. required는 boolean 속성으로, 불리언 속성은 해당 속성을 명시하지 않으면 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.
<input required="required" />
readonly 속성
<input> 태그의 readonly 속성은 해당 <input> 요소의 입력 필드가 읽기 전용임을 명시한다.
읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트 하거나 복사할 수는 있다.
readonly 속성이 명시된 입력 필드의 값 역시 서버로 제출된다.
<input readonly="readonly" />
※ 주의할 점 : XHTML에서는 속성 값을 생략할 수 없으므로, 다음과 같이 속성명과 속성값을 모두 명시해야만 한다.
'Study > Spring' 카테고리의 다른 글
| IoC와 DI (0) | 2022.06.24 |
|---|---|
| 싱글톤 패턴 (0) | 2022.06.23 |
| 스프링 CRUD 게시판 구현(SpringBoot, MySQL, SpringDataJPA) (2) | 2021.12.29 |
| 좋은 객체 지향 설계의 5가지 원칙 - SOLID (0) | 2021.11.10 |
| [구름IDE] 스프링부트 에러 메시지와 해결방법 모음 (0) | 2021.10.20 |
