스프링부트에 부트스트랩 템플릿 적용하기

새로운 프로젝트를 들어가면서 주제는 정했지만 시작을 어떻게 해야할지 모르겠더라

그래서 결정을 한게 일단은 스프링을 조금 공부했지만 부트스트랩을 사용을 해보기도 했고

프론트 보다는 백엔드 위주니까 프론트는 부트스트랩의 템플릿을 사용을 해보기로 했다.

그래서 스프링에다가 부트스트랩 템플릿을 적용하려고 하는데 생각보다 어렵더라...

자꾸 시작부터 404 에러가 떠서 나는 분명 매핑 똑바로 했는데 왜 이러지.. 만 하고

그냥 뭐가 잘못됐는지 계속 찾아봤는데 애초에 에러 메세지부터 검색을 해봤어야했다...

 

우선은 부트스트랩 템플릿 적용하는 것 부터 알아보면서 에러 뜬 것도 정리해서 올려보려고 한다.

 

https://bootstrapmade.com

Free Bootstrap Themes and Website Templates | BootstrapMade

 

우선 내가 무료로 템플릿을 다운받기 위해서 들어간 곳은 위의 주소와 같다.

위의 주소에서 템플릿을 다운을 받으면 여러가지 폴더가 나오게 되는데 일단 그 부분은 냅두고

 

 

우선 위 처럼 static 폴더에다가 bootstrap 폴더를 하나 만들었다.

그리고 무료 템플릿 다운을 받으면 폴더가 템플릿마다 다르겠지만

나의 경우에는 assets 폴더 안에 저렇게 css,img,js,scss,vendor 라는 폴더가 있었고

그리고 당연히 index.html 파일도 있었다.

우선은 css,img,js,scss,vendor 라는 폴더는 static 폴더 안에다가 넣고 index.html은 templates에 넣었다.

그리고 Main이라고 클래스를 하나 만들었고 이건 컨트롤러로 사용해서 index를 불러올거다.

 

 

 

위와 같이 컨트롤러를 작성하고 부르면 나는 진짜 이상하게 계속 404 에러가 뜨더라...

그래서 템플릿을 몇개를 다운 받고 프로젝트도 몇번을 다시 만들었는지 모르겠다 ㅋㅋㅋㅋ

 

This application has no explicit mapping for /error, so you are seeing this as a fallback.

 

위의 에러 메세지와 함께 404 가 나오게 되었다.

저 부분을 검색해보니까 두가지 때문에 오류가 나는거라고 하는데 그 부분은

 

1. 스프링부트는 처음 구동 시 index.html을 찾아서 구동을 한다고 하는데 그 파일이 없어서이다.

자, 난 이 부분이 되게 이해가 안갔다, 왜냐하면 위의 사진을 보면 나는 분명 index.html 파일을 템플릿 폴더 안에

넣어놨는데 왜 ? 왜 파일이 없다고 떠 ? 이렇게 생각을 했다.

 

2. 파일의 경로 또는 없는 파일을 경로로 잡았다.

 

이것 또한 당연히 이해가 안갔다 그래서 나는 1번을 가닥을 잡고 하라는대로 한 번 해봤다.

1번을 해결하기 위해서는 static 폴더 안에다가 index.html 파일을 하나 만드는거였는데

진짜 귀신같이 되더라 그래서 템플릿 폴더 안에 있는 index.html 파일 내용을 새로 만든 index.html에다가 넣어놨고

그리고 템플릿에 있는 파일은 혹시 몰라서 그냥 냅뒀다...

 

그러더니 되더라.. 진짜.. 내가 몇번을 깔고 지우고 깔고 지우고 했는데....

자 그러면 이제 다시 시작이다 일단 404 에러는 해결을 했는데 들어가게 되면 css랑 js가 적용이 아예 안되어있을거다

이건 index.html 파일을 들어가면 css,js 경로가 잘못되어있어서 그렇다.

 

 

 

지금 나는 수정을 한 상태라서 경로가 /bootstarp/css/main.css 이런식으로 되어있는데 이게 수정 전에는

원래 있던 폴더로 지정이 되어있기 때문에 경로를 다시 설정을 해줘야해서 나는 혹시 모르기 때문에

경로를 싹 다 다시 설정 해줬다, 이게 뭔소리냐면 나는 원래 경로가 assets/css/main.css 등등

assets 으로 시작했는데 assets 이라는 단어를 찾아서 싹 다 bootstrap 으로 변경을 해줬다

그리고 꼭 bootstrap 앞에다가 / 를 붙여야한다 안그러면 적용 안된다.

 

이렇게 하니 템플릿은 적용이 되었다.. 드디어 뭐라도 시작을 할 수 있을 것 같다...