JSP에서 부트스트랩 CSS 스타일 적용되지 않는 문제

부트스트랩을 셋팅하고 사용을 해봤는데 CSS 스타일이 적용되지 않고 있습니다. 뭐가 문젠지 보기 위해 익스플로러를 켜봅니다. F12를 눌러서 네트워크탭을 킨 뒤 새로고침을 한 번 하면 오고가는 페이지의 정보를 볼 수 있습니다.

 

 

 

저장해둔 bootstrap.css 파일을 불러오는데 '결과/설명'란에 "302 Found"라는 메세지가 떠 있습니다. 의미는 리다이렉션을 시도했다는 뜻입니다. 서버에서 HTML 코드를 브라우저에 전송할 때 참조할 CSS 파일 위치에 대한 URL 정보를 넣습니다. 이전 글에서 셋팅했던 아래 코드 부분입니다. 

<link rel="stylesheet" type="text/css" href="/hssweb/resource/css/bootstrap.css">

 

 

브라우저 입장에선 CSS 스타일 코드를 읽어오기 위해 한 번 더 저 주소에 접속에서 해당 코드를 읽어와야 합니다. 문제는 여기서 발생합니다. 현재 MVC 패턴을 사용하기 위해 디폴트 서블릿 지정(@WebServlet("/")을 했다면 'web.xml'에서 별도로 매핑해준 URL을 제외하고 모두 디폴트 서블릿, 즉 컨트롤러로 향하게 됩니다. 이 부분에 대해 헷갈리시면 아래 링크글을 참조하시면 됩니다.

 

2020/02/22 - [· JSP & Servlet/- 기본 문법] - URL 매핑_'/' 와 '/*' 의 차이점

 

 

 

CSS 파일에 대한 위치 또한 URL주소이고, 따로 매핑해두지 않았기 때문에 마찬가지로 컨트롤러로 끌려갑니다. 그래서 리다이렉션을 시도(302 found)했는데 다시 응답을 받지 못했기 때문에 해당 CSS 파일에 대해 200(OK)가 다시 떨어지지 않는 것입니다. 

 

Spring 프레임워크의 경우 이런 문제를 해결해줄 수 있는 방법들이 많이 보이는데 일반 JSP/서블릿 구조에서는 CSS파일을 어떻게 매핑해주는지 정보가 없어서 그냥 찾기를 포기했습니다. 어차피 Spring을 다루기 위해 거쳐가는 단계라 원인을 파악한 이상 굳이 시간을 더 들여서 고치진 않아도 될 것 같습니다. ㅎㅎ

 

대신 간단한 해결 방법은 프로젝트에 부트스트랩 라이브러리 파일을 직접 삽입해서 사용하지 않고, CDN을 이용하는 것입니다. 이 경우 브라우저가 CSS파일을 찾기 위한 요청을 CDN URL로 하게 되므로 우리쪽 서버와는 관계 없는 통신이 됩니다. 아래는 부트스트랩 공식 홈페이지에 있는 CDN 주소입니다. 복사해와서 헤더에 대신 삽입해주면 됩니다.  하는 김에 JQeury와 JS 라이브러리도 그냥 한 세트로 넣어놓고 사용하면 깔끔합니다.

<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
crossorigin="anonymous"></script>

 

수정 후에는 정상적으로 적용되는 것을 확인할 수 있습니다. 이는 CSS 뿐만 아니라 JS(자바스크립트)에 대해서도 마찬가지입니다. 공부할 때는 그냥 CDN을 사용해고 본격적으로 스프링을 사용하게 되면 로컬에 라이브러리를 저장해서 사용하면 될 것 같습니다. CDN은 편하지만 스크립트를 수정할 수 없는 반면, 다운받아 사용하면 소스코드를 입맛에 맞게 수정해 사용할 수 있습니다.