[springBoot] 웹개발(3) - bootstrap적용

https://kkkkims.tistory.com/52

[springBoot] 웹프로젝트 만들기(2) - DB연결 설정

에 이어서 bootstrap을 적용해볼까 한다.

전에 node.js를 깔았다면 간단하게 진행할 수 있다.

 

 

 

window 시작창에서 powershell을 수행하자.

 

파워쉘에서 프로젝트의 static 폴더가 있는 경로로 이동해준다

 cd C:\forStudy\src\main\resources\static

 

그리고 이명령어만 쳐주면 bootstrap이 설치된다.

npm install bootstrap

부트스트랩 설치 끄읕~~

실제 프로젝트 가서 f5를 누른뒤에 static 경로를 보면 무언가가 설치 되어있는 것을 확인 할 수 있다.

그러면 이제 이걸 어떻게 적용할것인가가 문제다. 나는 프론트엔드 개발자도 아니고 웹디자이너도 아닌 어쩡쩡한 코더다 그렇기에 그냥 부트스트랩 페이지에 있는 example을 그대로 배끼겠다

https://getbootstrap.com/docs/5.3/examples/

Examples

압축파일이 다운받아 질것이다.

저기 custom components에 product와 똑같이 뜨는것을 목표로 해보자

압축을풀면 수많은 폴더들이 나오는데 그중에 product 폴더에 들어가자

 

안에들어가면 파일이 2개가 뜬다.

하나는 product.css파일이고 index.html파일이 들어있을것이다.

이파일들을 각각 옮겨보자

static에 css폴더를 만들어주고 product.css를 옮겨주자

index파일 같은경우 지난번에 index.html있던곳으로 옮겨서 덮어씌워주자 방법을 모르겠다 싶으면 해당폴더에 파일 드래그 해서 넣으면 알아서 copy할꺼냐 물어봐준다.

 

그러면 이제 springboot를 수행하면 저창이뜰까?

응 안떠~

 

왜 안뜨는지는 index.html을 가보면 안다

저경로에서 script랑 css 가지고 와서 진행해야하는데 저경로에 실제 파일이 있는가? 참고로 ../의 뜻은 현재 디렉토리위에 디렉토리를 의미한다 즉 "../assets/dist/css/bootstrap.min.css" 즉 지금 index.html있는데 상위 폴더의 asset/dist/css/bootstrap.min.css를 읽어봐주세요 인데 없는데 읽히겠는가 이 경로를 우리가 npm으로 설치한 경로로 바꿔줘야한다.

우리가 깔았던 bootstrap을 기억해

 

 static/node_modules/bootstrap 폴더에 들어가면 각각 필요한 bootstrap 관련 파일들이 있다. 보통 dist에 있는데 dist내에

파일경로옮겨준다 이전에 aplication.properties에서 'spring.web.resources.static-locations'을 설정했던 기억이 있을것이다.

이는 웹 관련된 리소스를 불러올때 /static/경로밑에를 불러온다는 뜻이다. 그러면 우리가 불러올려는 bootstrap 경로는 어디있는가? static폴더 밑의 node_modules 폴더 밑에 bootstrap이라는 폴더에 있다.

 

우리가 bootstrap밑에 있는 css폴더를 불러오려면 어떻게 입력해야할까 

 

staic밑에서부터의 경로로 불러오면 된다.

<link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

마찬가지로

bootstrap.js경로도 다음과 같이 바꿔준다.

<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>

 

그다음에 springboot를 시작해보자. 로그인하면 우리가 bootstrap example에서 했던 화면 그대로 보일것이다.

그럴싸하게 나왔다.

하지만 최종적인 목적은 웹페이지를 만드는 것이기 때문에 다음에는 thymleaf를 이용하여 템플릿을 분리하는 작업을 할것이다.