Woopii Vyeolog

Spring FrameWork 에서 CSS파일 JS파일 가져오기가 안될 때 본문

Spring Framework

Spring FrameWork 에서 CSS파일 JS파일 가져오기가 안될 때

WooPii 2020. 2. 12. 15:15

Dynamic Web Project에서는 상대경로로 그냥 js파일이나 css파일을 읽어 올 수 있었다.

 

그런데,  Spring STS 를 사용해서 프로젝트를 만들었을 경우 (Spring Legacy Project --> Spring MVC Project)

상대경로로 읽을 시 경로를 계속 읽을 수 없다고 나왔다.

 

 

 

그래서 찾아보니 프로젝트 안에 있는 servlet-context.xml에서 해당 파일들을 불러오는 디렉토리를 미리

설정해 놓고 있었다.

 

servlet-context의 역활 : web application내에 있는 모든 서블릿들을 관리하며 정보공유할 수 있게 도와 주는 역할을 담당한다.  쉽게 말하면 웹 애플리케이션의 등록정보 정도로 생각하면 좋을 듯.

servlet이란?? : 클라이언트가 어떠한 요청을 하면 그에 대한 결과를 다시 전송해주어야 하는데, 이러한 역할을 하는 자바 프로그램.

프로젝트 안에 있는 serlvet-context를 보면, 아래처럼 되 있었다.

 

이 말은 해당 아래와 같은 경로(/resourses/)에 있는 리소스를 읽겠다는 건데, 프로젝트 안에서의 경로는 src/main/webapp/resources 이다. 

 

이곳에 js파일이나 css파일을 넣어서 불러오면 불러와진다.

 

<beans ...>
...
    <mvc:resources mapping="/resources/**" location="/resources/" />
...
</beans>

 

실제로 fullcalendar API를 사용하고 싶어서 가져와 보았다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link href="<c:url value="/resources/core/main.css"/>" rel='stylesheet' />
    <link href="<c:url value="/resources/daygrid/main.css"/>" rel='stylesheet' />
</head>
<body>

    <div id='calendar'></div>
    
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src='<c:url value="/resources/core/main.js"/>'></script>
    <script src='<c:url value="/resources/daygrid/main.js"/>'></script>

<script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
        	 plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
        	 header: {
        		    left: 'prev,next today',
        		    center: 'title',
        		    right: 'dayGridMonth,timeGridWeek,timeGridDay'
        		  },
        	 editable: true,
        	 droppable: true,
        	 locale: 'ko',
        	 dateClick: function() {
        			    alert('a day has been clicked!');
        	  }
      	});
        calendar.render();

        calendar.addEvent({'title':'test', 'start':'2020-02-12', 'end':'2020-02-15'});
      });
</script>
</body>
</html>

 

**** 해당 파일이 없기 때문에 코드를 복사해도 결과 화면이 나오지는 않음 ****

 

가져올 때  maven으로 JSTL을 가져오고(아마 기본으로 가져와져 있을 것이다.)

 

위 코드처럼 <c:url> jstl 태그를 가져온다.

 

*** css 가져오기 : <lick href="<c:url value:"/resourses/경로/파일명.css"/>"  rel='stylesheet'/>

*** js 가져오기 : <script src="<c:url value:"/resourses/경로/파일명.js"/> "/></script>

 

 

결과 창

 

 

 

 

 

 

 

 

 

 

 

 

참고, 출처

 

https://marindie.github.io/spring/Spring-Include-Resource-KR/#

 

https://mangkyu.tistory.com/14

'Spring Framework' 카테고리의 다른 글

간단한 성적 처리 웹 페이지 생성하기1 (테이블 생성,삭제,데이터 조회)  (0) 2020.03.16
Spring 다운, 설치, 한글 설정(UTF-8)  (0) 2020.03.16
IOC container, DIP, DI Framework  (1) 2020.02.11
Bean VS POJO  (1) 2020.02.11
어노테이션(@) 간략 설명  (0) 2020.02.10
'Spring Framework' Related Articles more
Comments