[Spring] BootStrap 사용하기

[Spring] BootStrap 사용하기

무료 부트스트랩 템플릿을 다운받아서 적용시키기

---

1. 템플릿 다운 후 리소스 파일 복사 붙여넣기

부트스트랩 무료 템플릿으로 검색시 나오는 무료 템플릿을 다운 받습니다.

 알집 다운로드 후 압축을 풀면 여러 파일들을 확인할수있습니다.

css, fonts, images, js, vendor 와 같은 폴더는 리소스입니다.

/src/maing/webapp/resources/ 밑에 복사 붙여넣기를 해줍니다.

---

2. index.html

index.html 의 내용을 복사하여

/src/maing/webapp/WEB-INF/views 밑에 넣어줍니다.

(index.jsp를 생성후 index.html의 내용을 저는 복사 붙여넣기로 넣었습니다.)

---

3. 서버 실행하기

tomcat 8.5 버전으로 저는 설치가 되어있는 상황으로 실행시 시작이 되는 상황입니다.

서버 실행시 /src/main/java/

안의 

HomeController 가 실행이 됩니다.

(기본적으로 com.sora.shop안에 만들어진 자바파일인데 .controller 패키지를 추가해서 옮겼습니다.)

실행시 해당 화면이 보여야합니다.

? 같은 경우 한글이 깨지는 것이므로 encoding 처리를 해줘야합니다.

(http://sora-muck.tistory.com/42)

web.xml 설정 변경 후 서버를 재시작하면 한글이 깨지지 않는걸 확인할수있습니다.

---

4. Controller 추가 하기

저는 HomeController를 삭제 후 IndexController.java 를 추가했습니다.

@Controller : 컨트롤러 클래스 임을 명시

@RequestMapping : 요청 URI

@GetMapping : Get 방식으로 들어오는 요청

(@RequestMapping(value="/", method=RequestMethod.GET))

그 후에 localhost:8080/shop/ 하면 index.jsp 는 css나 js 와 같은 리소스가 하나도 적용이 안된 상태입니다.

(servlet-context.xml 에 보면

<context:component-scan base-package="com.sora.shop.controller" />

해당 태그를 확인 할수있습니다. @Controller 어노테이션이 적용된 클래스를 읽어들입니다.)

---

5. 리소스 경로 수정하기 (index.jsp)

DevelTools를 킨 후 다시 F5로 새로고침을 합니다. (웹페이지 화면에서 F12)

Network 탭에 들어가서 404 인 아무거나 클릭을 합니다.

확인시 경로가 이상한것을 확인 할수있습니다.

리소스 경로는 

(http://localhost:8080/shop/resources/js/main.js)가 되어야 하는 상황입니다.

index.jsp 파일 내의 경로 설정을 보면 현재 경로의 images/로 들어갑니다.

현재경로 : localhost:8080/shop

리소스 경로 : localhost:8080/shop/resources

resources/images/...

resources/vendor/...

resources/fonts/...

등등 으로 경로를 수정합니다.

경로 수정 후 다시 재 로드합니다.

정상적으로 화면이 보이는걸 확인 할수있습니다.