스프링 관리자 페이지 - 부트스트랩 적용하기

프로젝트를 할 때 웹사이트는 html, css, jquery로 일일이 손수 제작하는 반면,
관리자 페이지는 그냥 부트스트랩 가져다 쓴다. 한 번 적용해보자.

1. 다운로드 수가 많은 어드민 부트스트랩 하나 다운받는다.
   https://startbootstrap.com/theme/sb-admin-2

2. 폴더 내의 css, img, js, scss, vendor 폴더를 스프링 프로젝트 내의
   /webapp/resources 폴더 안에다가 넣는다.
   

3. 다운받은 폴더 내의 index.html 코드들을 전부 긁어서 스프링 프로젝트의 index.jsp에 넣는다.

4. 경로 설정(진짜 열받았음..)
   인터넷을 많이 검색해 보고 그 방법을 따라해봤는데 경로가 자꾸 틀렸다.
   에러 이유가 mime 타입이 맞지 않아 css가 무시되었습니다.~ 이런 내용인데 그냥 경로 틀렸다는 뜻이다.

<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

<!-- Custom styles for this template-->
<link href="/css/sb-admin-2.min.css" rel="stylesheet">

처음엔 <c:url value="" />도 써보고 ${request.getContext~~}도 써봤지만
결론은 => "/"만 붙이면 된다이다. 기존의 "css/sb-amin-2.min.css"로 되어 있는 파일들 앞에 /만 추가해주면 끝난다.

어떤 블로그를 보면 앞에 /resources/경로를 추가해야 한다고 한다. 여기는 설정의 차이다.
나는 servlet-context.xml에서 아래와 같이 설정했기에 /resources/가 생략가능하다.

	<resources mapping="/**" location="/resources/" />

그러고도 css가 잘 적용이 안된다면 그냥 프로젝트를 닫았다가 다시 켜보니 또 동작하기 시작했다.

이제 모든 페이지마다 적용되어야 하는 코드들을 include를 사용해서 중복제거해보자.

header는 css를 link하는 태그를 포함한 head태그 안에 들어가는 코드들을 담는다.
navBar는 정확히는 sideBar이고, topbar는 검색창과 사용자 정보 표시하는 부분이다.
그리고 footer와 script들을 모은 파일들도 별도 분리한다.

일일이 html태그로 감쌀 필요는 없다.(예전에 그랬었음)

부트스트랩하면 form-control 클래스 같은 몇몇개밖에 기억이 안 난다ㅋㅋ.
pagination이나 select 태그의 경우 내가 클래스를 알아서 가져다 써야 하는데 documentation이 없어서 좀 난감했다.

그래서 https://getbootstrap.com/docs/4.0/utilities/flex/ 사이트에 들어가서
부트스트랩의 클래스 중 비슷하겠거니 한 것들을 내 부트스트랩 css에서 검색해서 추측해서 가져다 썼다.

스프링에서 일일이 테스트를 하면 매번 redeploy를 해야 해서 번거롭다.
(원래 jsp는 그냥 실시간 적용이라는데 나는 왜 그게 안되는가?)
그래서 vsCode에서 테스트하고 스프링 프로젝트에 적용하는 식으로 하고 있다.

flex의 경우도 중앙 처리를 아래처럼 할 수 있다는 걸 알았다. 신기하다.

<ul class="d-flex justify-content-center pagination">

사이즈의 경우 sm, lg등으로 구분짓는데 기존 preview에 적용된 클래스들을 보고 감을 익혀야겠다.