<< 학습 목표 >>
1. 정적인 요소를 어디에 둬야하는지 말할 수 있다.
2. 뷰를 추가하고 이와 관련된 설정을 할 수있다.
3. 컨트롤러를 추가할 수 있다.
이번 Chapter 를 시작하기 전 프로젝트에 com.example.domo.chapter02 패키지를 추가하자
Spring Boot 로 만든 Spring Framework 프로젝트의 경우 기본적으로 뷰(View)를 갖지 않음
Spring Boot 로 만든 Spring Framework 프로젝트는 일반적으로 백엔드 서버로만 활용됨
따라서 뷰가 필요하다면 뷰용 프로젝트를 별도로 생성해야함
우리는 뷰로 Postman을 사용하자
여기서 설명 하는 내용은 혹시 Spring Boot 로 만든 Spring Framework 프로젝트에서 뷰가 필요할 때를 위해서 기록해두는 것이므로 Spring Boot 를 공부하려고 오신분은 이 글을 넘어가도 됨
직접 Spring Framework 프로젝트를 생성했을 경우 HTML, CSS, JS, 이미지파일, 동영상파일 등과 같은 정적인 요소를 위해서 별도의 설정을 해야함
Spring Boot로 생성한 Spring Framework 프로젝트의 경우 별도의 설정을 할 필요 없이 정적인 요소를 src/main/resources/static 폴더에 넣어두면 됨
src/main/resources/static 폴더 안에 이름이 index.html 인 파일을 추가고 아래 코드를 추가하자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>static 폴더에 위치한 index.html</h1>
</body>
</html>
이번에는 src/main/resources/static 폴더 안에 chapter02 폴더를 추가 한 후 해당 폴더에 이름이 some.html 인 파일을 추가하자
그 후 아래 코드를 입력하자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>static -> chapter02 -> some.html</h1>
</body>
</html>
index.html 파일의 URL은 http://localhost:8080/index.html 이고 some.html 파일의 URL은 http://localhost:8080/chapter02/some.html 임
프로젝트를 실행시키고 해당 URL로 접근해보자
한가지 특이한 점이 있음
우리는 웹 페이지(HTML)를 static 폴더 안에 뒀는데 URL 경로에서는 static 을 뺐는데 잘 접속됨
이는 우리의 프로젝트가 정적인 요소로 접근하면 자동으로 static 폴더 안에서 찾기 때문임
HTML뿐만 아니라 JS, CSS, 이미지 파일 등 정적인 요소는 이 static 폴더 안에 모아두면 됨
다음 내용으로 이어가기 전에 한 가지 생각을 해보자면 Servlet, JSP 를 배우면서 웹 페이지를 만들 때 HTML 파일을 만든적은 없을 것
HTML 파일 대신 JSP 파일을 만들었을텐데 JSP 파일을 static 폴더에 두면 될까?
결론부터 말하면 "안된다"
static 폴더 안에는 위에 얘기한대로 HTML, JS, CSS, 이미지 파일, 동영상 파일 등 정적인 요소만 와야함
JSP는? 동적인 요소임
혹시 "왜?" 라는 생각이 들면 JSP 공부가 아직 부족한 것
이 글을 끝까지 읽다보면 JSP가 어디에 위치해야하는지 알 수 있음
우리는 웹 페이지를 HTML 대신 JSP로 만들것이므로 static 폴더 안에는 JS, CSS, 이미지 파일, 동영상 파일만 올 수 있다고 여기면 됨
Spring Boot로 만든 Spring Framework 프로젝트는 기본적으로 JSP를 사용하기 위한 설정이 되어있지 않음
혹시 왜 그런지 궁금하다면 아래 URL로 들어가 제일 밑에 있는 [ 24.2.4 JSP limitations ] 을 참고하자
중요한 내용은 아니므로 보지 않아도 됨
Spring Boot로 만든 Spring Framework 프로젝트에서 JSP를 사용하려면 pom.xml에 JSP 라이브러리를 추가해야함
(왼쪽) Maven Repository에서 jstl 검색 후 아래 라이브러리로 들어가자
! 라이브러리 이름 주의 하기 !
(오른쪽) 가장 최신 버전인 1.2 버전으로 들어가자
이제 JSP 를 담을 폴더를 추가하자
JSP를 저장할 폴더는 별도로 생성해줘야함
(1). 프로젝트 -> src -> main -> webapp 폴더 추가
(2). 프로젝트 -> src -> main -> webapp -> WEB-INF 폴더 추가
(3). 프로젝트 -> src -> main -> webapp -> WEB-INF -> views 폴더 추가
JSP는 WEB-INF 폴더 안에 위치해야함
WEB-INF 는 프로젝트에 필요한 중요한 설정 파일을 갖고 있는 용도의 폴더인데 중요한 설정 파일을 갖고 있는 폴더이기 때문에 외부(사용자)에서 절대 접근할 수 없고 프로젝트 내부에서만 접근할 수 있음
웹 페이지도 외부에서 직접 접근할 수 없도록 해야함
그래서 WEB-INF 폴더 안에 두는 것
배워나가면서 WEB-INF 폴더 안에 여러 파일이 쌓일 것이므로 구분할 수 있게 views 폴더를 추가한 후 그 안에 JSP ( 웹 페이지 ) 파일을 추가하려고 함
이제 views 폴더 안에 index.jsp 파일을 추가하자
또 views 폴더 안에 chapter02 폴더를 추가하고 그 안에 some.jsp 파일을 추가하자
<< index.jsp 코드 >>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>views 폴더에 위치한 index.jsp</h1>
</body>
</html><< some.jsp 코드 >>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>views -> chapter02 -> some.jsp</h1>
</body>
</html>
이제 프로젝트에 웹 페이지(JSP)를 추가했으니 웹 페이지에 접근해야하는데~!
프로젝트에 몇 가지 설정을 더해줘야함
1. ViewResolver 설정
2. 컨트롤러 생성
<< ViewResolver 설정 >>
ViewResolver 설정은 src/main/resources -> application.properties (1) 에 설정함
뷰리졸버 설명을 하기 전에 컨트롤러 먼저 생성하자
<< 컨트롤러 생성 >>
com.example.demo.chapter02 -> ViewTestController 클래스 추가 후 아래 코드 입력
package com.example.demo.chapter02;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class ViewTestController {
@RequestMapping(value="/chapter02/jsp1", method = RequestMethod.GET)
public String jsp1() {
return "index";
}
@GetMapping("/chapter02/jsp2")
public String jsp2() {
return "chapter02/some";
}
}
<< 코드 설명 >>
(1). @이 붙었으므로 애너테이션으로 Controller 애너테이션은 해당 클래스를 컨트롤러로 만들어줌
컨트롤러는 클라이언트의 요청을 받아 요청을 처리할 서비스 메서드를 호출함
그리고 서비스 메서드가 반환한 처리 결과에 따라서 클라이언트에게 적절한 결과를 응답함
(2), (3). RequestMapping, GetMapping 애너테이션은 클라이언트의 요청을 처리할 메서드에 붙는 애너테이션
@RequestMapping 애너테이션은 value, method 속성을 사용함
value 속성은 "해당 경로로 요청이 들어왔을 때" 로 해석할 수 있음
method 속성은 "해당 요청 방식으로 요청이 들어왔을 때" 로 해석할 수 있음
따라서 value, method 속성을 연결해 해석하면 "http://localhost:8080/chapter02/jsp1 로 GET 방식 요청이 들어왔을 때 jsp1 메서드가 그 요청을 처리하겠다" 임
(3). GetMapping 애너테이션은 속성 없이 ( ) 안에 문자열을 넣었는데 애너테이션 이름이 GetMapping 인 것처럼 "http://localhost:8080/chapter02/jsp2 로 GET 방식 요청이 들어왔을 때 jsp2 메서드가 그 요청을 처리하겠다" 임
(2)와 (3)에서 문자열을 반환해주는데 클라이언트에게 전달할 뷰이름으로 컨트롤러에서 문자열을 반환하면 뷰 리졸버가 동작해 반환하는 문자열의 앞에 prefix 를 붙이고 문자열의 뒤에 suffix 를 붙여서 해당하는 뷰를 클라이언트에게 전달함
따라서 컨트롤러는 문자열을 반환했지만 뷰리졸버 덕분에 클라이언트는 문자열이 아닌 뷰를 전달 받음
혹시 이대로 했는데 뷰가 안나온다면 무시하고 넘어가자
이 글의 처음에서 언급했듯 Spring Boot 로 만든 Spring Framework 프로젝트는 백엔드 용으로만 쓰지 그 안에 웹 페이지, CSS 등 뷰를 위한 것들을 넣지 않음
만약 Spring Boot 를 공부하고 포트폴리오를 만든다면 Spring Boot로 백엔드 프로젝트를 만들고 JSP 에서 배웠던 프로젝트를 만들어 이 프로젝트를 프론트엔드 프로젝트로 사용하면 됨
잘모르겠다면 Spring Boot 공부가 다 끝나면 마지막에 프로젝트를 할테니 그대로 따라오면 알게될 것
'Spring + Boot > Boot-Chapter01' 카테고리의 다른 글
| Chapter01. Spring Boot - Postman / 뷰 없이 백엔드 개발하기 (0) | 2023.04.08 |
|---|---|
| Chapter01. Spring Boot - 프로젝트 관리 도구 (0) | 2023.04.07 |
| Chapter01. Spring Boot - Spring Boot 서버 설정 (0) | 2023.04.06 |
| Chapter01. Spring Boot - 프로젝트 만들어보기 (0) | 2023.04.06 |
| Chapter01. Spring Boot - Framework란? / Spring Boot란? / STS 설치 (0) | 2023.04.05 |