[Spring Boot] Thymeleaf, redirect/forward

• Thymeleaf
  • 타임리프란 템플릿 엔진의 일종이며 html 태그에 속성을 추가하여 동적 HTML로 값을 출력한다.
  • 사용 전 설정
    • 의존성 추가
      • implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    • application.properties 추가

      • #타임리프
        #캐시 off : html파일을 수정시마다 매번 내려준다.
        spring.thymeleaf.cache=false
        #html 파일 위치 지정
        spring.thymeleaf.prefix=classpath:/templates/
        #파일 확장자
        spring.thymeleaf.suffix=.html

  • 컨트롤러에 Model 클래스를 매개변수로 받은 서블릿 메서드 작성
    • Model 클래스
      • Model 클래스란 스프링에서 데이터를 담아서 전달하는 용도의 클래스
      • 서블릿 메서드에 매개변수로 선언하면 스프링 컨테이너(컨텍스트)에서 자동 주입된다.
        • 메서드명(Model model)
      • model.addAttribute(”attribute이름”, “attribtue값”); 형태로 작성
    • 컨트롤러에서 html 파일 경로로 return
      • return "redirect:index"; 또는 return "forward:index"; 또는 return "index";
    • 예시

      • @GetMapping("index")
            public String index(Model model) {
                model.addAttribute("name_text", "홍길동");
                return "index";
            }

  • html 파일 작성
    • <p th:text="${ name_text }">innerText</p> 와 같이 태그 안에 th:text=”${ attributeName }” 을 작성하면 값이 주입된다.
    • input 태그 안에는 name=”attributeName”을 작성해야 값이 연결된다.
      • <input typeof="text" name="id" value="" placeholder="아이디" required>
    • 예시

      • Form 태그에서 GET 방식으로 서버에 데이터 전달하기
        <form action="index-param" method="get">
            <input typeof="text" name="id" value="" placeholder="아이디" required>
            <input typeof="password" name="pw" value="" placeholder="암호" required>
            <button type="submit">전송</button>
        </form>
        
        Form 태그에서 POST 방식으로 서버에 데이터 전달하기
        <form action="index-param" method="post">
            <input typeof="text" name="id" value="" placeholder="아이디" required>
            <input typeof="password" name="pw" value="" placeholder="암호" required>
            <button type="submit">전송</button>
        </form>

• 타임리프의 조건식
  • th:if
    • if 조건이 false인 경우 해당 값이 랜더링되지 않는다.
    • 예시
      • <p th:if="${ role } == 'admin'" th:text="|사용자는 관리자입니다.|"></p>
  • th:unless
    • unless 조건이 false인 경우 값이 출력된다.
    • 예시
      • <p th:unless="${ role } == 'admin'" th:text="|사용자는 관리자가 아님.|"></p>
  • th:switch
    • 예시

      • <div th:switch="${ role }">
            <p th:case="'admin'">사용자는 관리자입니다.</p>
            <p th:case="'guest'">사용자는 손님입니다.</p>
            <p th:case="*">사용자는 그외 권한입니다.</p>
        </div>

• th:block
  • 타임리프의 자체 로직을 위한 블록 태그
  • 위의 조건식과 함께 사용한다.
  • 예시

    • <th:block th:if="${ address_null == null }">
          <p>address_null은 null입니다.</p>
      </th:block>
      
      <th:block th:unless="${ address_null == null }">
          <p>address_null은 null이 아닙니다.</p>
      </th:block>

• 타임리프의 날짜/금액 출력
  • 날짜
    • 컨트롤러에서 model.addAttribute("localDate", LocalDate.*now*());
    • html에서 <p th:text="${ #temporals.format(localDate, 'yyyy/MM/dd') }"></p>
  • 금액
    • 컨트롤러에서 model.addAttribute("number1", 12345678);
    • html에서 <p th:text="|${ #numbers.formatInteger(number1, 3, 'COMMA') }원|"></p>
• th:object
  • 객체를 선택한다.
  • 블록 안에서 객체 선택후 *{ 변수 } 로 해당 객체(클래스)의 변수에 접근한다.
  • 예시

    • <th:block th:object="${ member }">
          <p th:text="*{ username }"></p>
          <p th:text="*{ password }"></p>
      </th:block>

• th:each
  • 객체 리스트 출력
  • 예시

    • <table border="1">
          <tr th:each="member, status : ${ list }">
              <td><span th:text="${ status.count }"></span></td>
              <td><span th:text="${ member.username }"></span></td>
              <td><span th:text="${ member.password }"></span></td>
          </tr>
      </table>

• th:href
  • 내부 링크로 이동
  • 태그 안에 th:href=”@{ 이동할html명 }” 작성
  • 예시
    • <a th:href="@{ index7 }">타임리프 링크입니다. index7로 redirect 됩니다.</a>

 

• button 태그
  • <button></button>
    • 기본 버튼 태그는 submit 버튼으로 동작
  • <button type=”submit”></button>
    • submit 버튼으로 동작
  • <button type=”button” onclick=”alert(’클릭됨’);”></button>
    • 버튼 클릭시 alert 창 출력

 

• redirect와 forward의 차이
  • redirect
    • 내부 변수값을 버리고 페이지 이동 (타 사이트 이동시)
  • forward
    • 내부 (세션, 모델) 변수값을 가지고 페이지 이동 (내부 URL로 이동시)

 

• HTML에서 서버로 데이터를 전송하는 방법 (Front-end)
  • HTML Form 태그
    • GET/POST 방식으로 submit 한다.
  • JavaScript Fetch() 함수
    • GET/POST/PUT/DELETE 방식으로 전송한다.
  • JQuery Lib에서 ajax() 함수
    • GET/POST/PUT/DELETE 방식으로 전송한다.
  • Axios 모듈에서 axios() 함수
    • GET/POST/PUT/DELETE 방식으로 전송한다.
  • 디버깅 툴
    • POSTMAN, THUNDER 등 사용
• GET 방식으로 요청 파라미터의 데이터를 받을 수 있다.
  • URI(URL)
    • localhost:8080/index-param?id=hong&pw=1234
      • id: hong
      • pw: 1234