[JAVA/Spring] 외부 js 및 css 파일 사용방법

웹 프로젝트에서 화면을 만들다 보면 외부의 자원(js, css 등)을 가져다 쓰게 되는 경우가 많이 발생하게 되죠.

간단한 화면에서 조차 외부 파일들을 사용하는 경우가 상당히 많습니다.

이번에는 그런 파일들을 삽입하는 가장 기본적인(?) 방법에 대해 정리해 봅니다.

(프로젝트 별로 외부 파일을 저장하는 위치나 설정하는 방법은 조금 상이 할 수 있습니다.)

우선 설정이 제대로 되어 있지 않을때 STS 콘솔창에서 확인 할 수 있는 에러를 확인해 봅시다.

WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/js/jquery-3.3.1.min.js] in DispatcherServlet with name 'appServlet'

jQuery 나 부트스트랩 파일을 준비 합니다.

다운받기 귀찮다면 간단하게 정의한 파일을 준비 해도 됩니다.

전 jquery 파일을 준비 했습니다.

우선 아래 그림과 같이 

/src/main/webapp 아래에 resources/js 디렉토리를 만들어 줍니다.

그리고 jquery 파일을 js 디렉토리 아래에 넣어 줍니다.

이제 이 디렉토리를 사용하기 위해

xml 파일을 설정해야 합니다.

servlet-context.xml 파일을 열어 아래의 문구를 추가 합니다.

<resources mapping="/resources/**" location="/resources/" /> 를 추가해 줍니다.

(이미 추가 되어 있다면 넘어 가도록 합니다.)

이제 화면에서 사용하는 방법 입니다.

아래 구문을 추가해 줍니다.

<script src="${pageContext.request.contextpath}/resources/js/jQuery-3.1.1.main.js"></script>

이제 추가 작업이 모두 끝났습니다.

위의 설정이 제대로 되어 있지 않으면 아래와 같은 에러를 콘솔에서 확인 할 수 있습니다.

※ 포스팅 내용중에 설명이 잘 못 되었거나, 보완이 필요한 부분이 있으면 지적해 주세요~