-
스프링(Spring)에서 자바스크립트(JavaScript) 사용 방법Spring/컨셉 2018. 9. 7. 09:51
스프링에서 css, js, image 등의 자원은 파일이 존재하는 url 그 자체로 사용된다. 따라서 url 요청을 해야 하는데 이는 MVC의 DispatcherServlet에서 판단해 Controller에서 RequestMapping Annotation을 검색하게 된다. 404에러가 발생하게 된다.
따라서 CSS, JavaScript, Image 같은 정적 자원들에 대해 URL을 따로 주어야 하는데 이를 지원해주는 녀석이 mvc:resources이다. 이 태그를 DispatcherServlet에 등록해줘야 사용할 수 있다.다음과 같이 static 폴더들을 지정해둔다. 보통 WEB-INF 하위에 둔다.
web.xml에 springDispatcherServlet의 param-value로 지정해둔 Bean Configuration 파일에 mvc:resources 추가한다.
"/서버명:포트번호/setting/static/js/파일명" 요청에 대해
"/WEB-INF/resources/js/파일명"으로 응답 주겠다. 라는 의미이다.
mapping : url 요청
location : 해당 파일의 로컬 경로
이후 jsp에서 자바스크립트를 사용할 때 src 속성을 url로 주면 된다.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>/board/write.jsp</title> <script type="text/javascript" src="<c:url value="/static/js/jquery-3.1.1.min.js"/>"></script> <script type="text/javascript"> $().ready(function(){ $("#writeBtn").click(function(){ $("#writeForm").attr({ "method" : "post", "action" : "<c:url value="/board/write" />" }); $("#writeForm").submit(); }); }); </script> </head> <body> <form:form commandName="writeForm"> <!-- 스프링 태그의 form으로 변경 id 대신 commandName 사용 --> <input type="text" name="subject" placeholder="input subject"/> <form:errors path="subject" /><br/> <input type="text" name="writer" placeholder="input writer" /> <form:errors path="content" /><br/> <input type="text" name="content" placeholder="input content" /><br/> <input type="button" id="writeBtn" value="등록" /><br/> </form:form> </body> </html>script 태그의 src 속성값을 보면
src="<c:url value="/static/js/jquery-3.1.1.min.js"/>"
다음과 같이 되어 있다. c:url 태그를 사용하면 Context Path 이후의 경로만 value에 지정해줄 수 있다.
( Context Path는 간단하게 프로젝트명으로 생각하고 넘어가도록 한다. 더 궁금한 점이 있다면 다음 포스팅 참조)
http://blog.naver.com/p952973/220946137892프로젝트의 규모가 커질수록 유용한 태그가 될 것이다. 규모가 큰 프로젝트의 경우 Context Path 변경시 일일이 수정해야 하는 번거로움을 없앨 수 있다.
이후 사용방법은 기존 jsp의 그것과 동일하다 ( form 태그의 경우 스프링의 form을 사용하기 때문에 조금 다르고 자세한 내용은 다음포스팅 참조)'Spring > 컨셉' 카테고리의 다른 글
스프링(Spring) ORM : MyBatis 예제 (0) 2018.09.07 스프링(Spring) 유효성 검사(Validation Check) (0) 2018.09.07 스프링(Spring) DB 연동 예제 (0) 2018.09.07 스프링(Spring) DataSource 이용한 데이터베이스 (db, oracle) 연동 예제 (0) 2018.09.06 스프링(Spring) 예제 (0) 2018.09.06
