STUDY AND LESSON

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

변수를 넘길 예제 컨트롤러를 하나 생성합니다.

그리고 'message' 라는 이름으로 '정상적으로 처리되었습니다.' 이라는 문자열을 담아 model에 넘깁니다.

@Controller
public class HomeController {

    @GetMapping("/test")
    public String test(Model model) {

        model.addAttribute("message", "정상적으로 처리되었습니다.");
        model.addAttribute("searchUrl", "https://www.google.com");
        return "test";
    }
}

아래 적힌 방법으로 작성하면 컨트롤러에서 받아온 데이터를 자바스크립트에 적용할 수 있습니다.

<script th:inline="javascript">

/*<![CDATA[*/

이 사이에 자바스크립트 코드를 적어주고 컨트롤러에서 넘어온 변수는 [[ ${   } ]] 로 감싸줍니다.

/*]]>*/

</scrirpt>

아래의 View 생성 예제를 참고해주세요.

<script th:inline="javascript">
    
    /*<![CDATA[*/
    
    var message = [[${message}]];
    alert(message);
    
    location.replace([[${searchUrl}]]);
    
    /*]]>*/
    
</script>

위 코드를 실행하면 메시지를 띄운 후 구글로 이동하게 됩니다.

이를 이용하여 컨트롤러에서 특정 로직을 처리하고 알림을 띄운 후 원하는 페이지로 이동할 수 있습니다.

간단한 예시로 글 작성이 완료되었을 때 바로 리스트로 보내주는 것이 아닌 '글 작성이 완료되었습니다' 라는 문구를 출력한 이후에 리스트로 보낼 때 사용합니다.

추가내용(2021.10.18)

타임리프 3.0 버전부터는 스크립트 사용 시 CDATA 구문을 작성하지 않아도 됩니다. 구체적인 내용은 첨부한 PDF 파일이나 공식 문서 링크에서 확인해주세요.

타임리프 메뉴얼 PDF 파일

타임리프 공식 문서

타임리프에서 a태그를 작성할 때는 th:href="@{}" 을 이용하여 작성합니다.

<!-- 특정 url로 이동 -->
<a th:href="@{https://developer-rooney.tistory.com}">글 상세보기</a>


<!-- 현재 서버 내에서 이동 -->
<a th:href="@{/board/list}">게시글 리스트</a>


<!-- 파라미터를 넘길 시 -->
<a th:href="@{/board/view(id = ${board.id})}">글 상세보기</a>


<!-- 파라미터를 여러 개 넘길 시 -->
<a th:href="@{/board/view(id = ${board.id}, writer = ${board.writer}})}">글 상세보기</a>


<!-- PathVariable 사용 시 -->
<a th:href="@{/board/view/{id}(id = ${board.id})}">글 상세보기</a>

input 태그를 검증하기 위한 jQuery 라이브러리 validate 사용 순서입니다.

1) jQuery import

2) jQuery validate import

3) 검증할 태그를 선택하여 validate() 적용

4) validate 함수 내에서 필요한 설정 적용

예제 코드는 아래를 참고해주세요.

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 제이쿼리 validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>




<!-- 검증할 form 태그 -->
<form id="searchForm">
	<input type="text" name="userName" id="userName">
    <button type="submit">전송</button>
</form>


<!-- validate에서 검증 -->
<script>


	$("#searchForm").validate({

        // validate로 체크할 항목을 선정
        rules : {
            userName : {
                required : true
            }
        },
        
        // 미입력시 띄어줄 메시지를 입력
        messages : {
            userName : {
                required : '이름을 입력해주세요.'
            }
        },
    });

</script>

위처럼 작성했을 때 input 태그에 입력 없이 전송 버튼을 눌렀을 때 오른쪽에 '이름을 입력해주세요.' 라는 문구와 함께 submit을 막아줍니다.

기본적으로 사용되는 dependency만 작성했습니다.

<dependencies>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${springframework.version}</version>
        </dependency>
        
          <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>${springframework.version}</version>
        </dependency>
  
          <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>${springframework.version}</version>
        </dependency>
        
        <!-- Hibernate -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>${hibernate.version}</version>
        </dependency>
        
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-c3p0</artifactId>
            <version>${hibernate.version}</version>
        </dependency>
        
        <!-- C3PO -->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>${c3po.version}</version>
        </dependency>
        
        <!-- Hibernate Validator -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>${hibernate.validator}</version>
        </dependency>
        
        <!-- JSTL Dependency -->
        <dependency>
            <groupId>javax.servlet.jsp.jstl</groupId>
            <artifactId>javax.servlet.jsp.jstl-api</artifactId>
            <version>${jstl.version}</version>
        </dependency>
        
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>${tld.version}</version>
        </dependency>
        
        <!-- Servlet Dependency -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>${servlets.version}</version>
            <scope>provided</scope>
        </dependency>
 
        <!-- JSP Dependency -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>${jsp.version}</version>
            <scope>provided</scope>
        </dependency>
        
        <!-- MySQL -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.connector.version}</version>
        </dependency>
        
        <!-- Add Jackson for JSON converters -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>${jackson.databind.version}</version>
        </dependency>
        
        <!-- junit Dependency -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
    </dependencies>