[웹사이트 제작] VSCode + Spring Boot + Gradle 프로젝트 만들기(2) - 웹 템플릿 이용하여 jsp 파일에 적용하기

 

 

이번 시간엔 저번에 가져온 템플릿을 이용하여 메인 화면에 적용시켜보겠습니다.

[이전 링크] [Springboot] VSCode에서 웹 템플릿을 이용한 스프링부트 웹사이트 만들기(1)

 

 

Day3. 웹사이트에 템플릿 적용하기

 

1. springboot 프로젝트에 템플릿 파일 옮기기

main/resources/static 폴더에 css,fonts,img,js와 같은 정적 파일이 담긴 폴더를 옮긴다.

 

 

 

 

 

2. html 페이지 옮기기

css, fonts와 같은 정적 파일들은 static 폴더에 옮겼지만 jsp로 수정하여 쓸 html 파일들은 아까 생성한

webapp/WEB-INF/jsp 경로에 옮겨 놓아야한다.

 

html 파일들을 복사하여 아래와 같이 옮겨두자.

 

 

 

 

 

3. 화면 확인하기

붙여넣은 화면들과 css와 같은 정적 파일들이 제대로 적용이 되었는지 확인을해보자.

 

1) Controller 수정

"/" 경로를 입력했을때 index.jsp 파일을 찾아가도록 수정하자.

 

2) index.html 파일명 수정

index.jsp로 확장자를 변경해두자.

 

 

 

 

 

 

3) localhost:8080에 접속하여 정상 실행되는지 확인한다.

 

 

 

너무 잘 작동된다 짝짝짝..

 

 

4. 값 전달하기

Controller에서 원하는 메세지를 jsp로 전달해보자.

index에 있는 세 메세지들을 아래와 같은 메세지로 수정할 예정이다.

 

 

1) PORTFOLIO (subtitle1) -> POTATOES?

2) Hello Everyone (subTitle2) -> Real Potato

 

3) World...~ (indexMsg) -> You guys have to find the real potato.

 

 

4.1) Controller 수정하기

 

Spring의 model을 이용해서 model.addAttribute("변수명","입력 문자") 이런 방법으로 위의 속성 값을 지정해준다.

 

 

 

 

4.2) jsp 파일 수정하기

 

 - el태그를 위에 상단에 아래 코드를 주가해준다.

 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

 

 

- 메세지를 전달받을 위치에 해당 ${변수명} 을 지정해둔다.

 

 

5. Controller와 JSP가 잘 연동되었는지 확인한다.

 

변경이 완료되었다.

 

 

다음 시간엔 Springboot와 DB연결을 도전해보자.