2-6 정적 웹페이지로 응답하기
이제 웹 애플리케이션답게 웹 페이지로 사용자의 요청을 응답하도록 해 보겠습니다. 응답에는 2가지가 있습니다. 정적인 웹과 동적인 웹입니다. 정적인 웹은 이미 만들어진 내용을 그대로 html형태로 응답해 주는 것입니다. 반면 동적인 웹은 사용자의 요청에 따라 달라진 내용을 html에 반영하여 응답해 줍니다.
먼저 정적인 웹 응답을 통해 서버 웹 애플리케이션의 기초를 다져 보겠습니다.
Ex08StaticWeb 프로젝트를 만들어보겠습니다. Group은 com.study, Artifact와 Name은 Ex08StaticWeb이고, Package name은 com.study.springboot로 지정한 후 zip을 다운로드합니다. 나머지 과정은 전과 동일합니다.
resources폴더의 application.properties에 다음 내용을 추가하고 저장합니다.
server.port=8090
정적인 웹은 프로젝트 폴더의 resources 밑의 static 폴더 밑에 위치해 있습니다. 여기에 index.html파일과 css, img, js 폴더가 위치합니다. index.html은 웹 사이트에 있는 기본 페이지에 사용되는 가장 일반적인 이름입니다. 기본 랜딩 페이지(Default Landing Page)라고도 합니다. 스프링에서도 index.html을 기본 페이지로 정의하고 있습니다.
static폴더에서 마우스 우클릭하여 새로 만들기 > html 파일 메뉴를 이용하여 index.html파일을 생성합니다. 예제 URL : https://bit.ly/3D9xYvR
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- index.html은 웹사이트의 대문역활을 하는 웹페이지 파일임. -->
<!-- 대부분의 웹서버, WAS는 index.html을 기본으로 설정되어 있음. -->
<title>메인페이지</title>
</head>
<body>
<h2>스프링부트에 오신 것을 환영합니다!</h2>
<img src="/img/image1.jpg" style="width: 300px; height: 200px;"> <br>
<a href="/subpage/subpage.html">서브페이지로 이동</a>
</body>
</html>static폴더에서 우클릭하여 새로 만들기 > 경로 메뉴를 이용하여 css, img, js, subpage 폴더를 생성합니다. 그리고 subpage를 우클릭하여 subpage.html을 생성합니다. 예제 URL : https://bit.ly/3sakQQJ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서브페이지</title>
</head>
<body>
<h2>서브페이지입니다.</h2>
</body>
</html>css와 js폴더에는 각각 css파일, 자바스크립트 js파일이 들어갑니다. 각각의 파일에 접근하는 경로는 img폴더의 이미지 파일에 접근 하는 방법과 동일하므로, img 폴더의 이미지 파일 접근 방법만 설명하도록 하겠습니다.
img폴더에 image1.jpg라는 파일이 하나 필요합니다. 무료 이미지 사이트로 유명한 픽사베이 https://pixabay.com 로 이동하여, 카페라고 검색하여, 무료 이미지 한장을 다운받도록 합니다. 이미지 해상도는 1280×847입니다. 다운로드하고 탐색기에서 image1.jpg로 이름을 변경합니다. 파일을 복사 후 인텔리제이 img폴더에 붙여넣기 하면 됩니다.
이미지 URL : https://bit.ly/3TkMsP6
그러면 아래 그림과 같이 img폴더 밑에 이미지가 복사됩니다.
이제 정적 웹의 리소스가 다 준비되었습니다.
이제 사용자의 요청에 index.html로 응답하는 컨트롤러 클래스를 만들겠습니다.
com.study.springboot폴더 밑에 MainController 클래스를 만들어 줍니다. 예제 URL : https://bit.ly/3eJfPM9
package com.study.springboot;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MainController {
//URI : http://localhost:8090/
@GetMapping("/")
//@ReponseBody를 넣으면 안됨(문자열로 응답함.)
public String root() {
//웹페이지로 응답
return "index.html";
}
}주의할 점은 이전처럼 @ReponseBody를 사용하지 않고 바로 문자열 "index.html"로 응답합니다. 그러면 스프링에서 static폴더 밑에 있는 index.html 파일과 정적 리소스(css,img,js,subpage)를 찾아서 함께 응답해줍니다.
저장후 실행해 주겠습니다.
아래 URL을 크롬 웹브라우저로 요청해 보겠습니다.
localhost:8090/아래와 같이 정적 웹이 잘 출력되었다면 성공한 것입니다.
서브페이지로 이동 링크를 클릭하면 서브 페이지로 이동합니다.
index.html에서 img태그와 a태그의 경로를 보면 static폴더부터 시작하는 경로로 표현되어 있습니다. 정적 웹에서는 static폴더를 시작위치 - 루트경로로 지정하고 있습니다.
<img src="/img/image1.jpg" style="width: 300px; height: 200px;"> <br>
<a href="/subpage/subpage.html">서브페이지로 이동</a>만일 여러분이 / 앞에 점(.)을 넣어도 페이지를 호출해도 정상적으로 잘 출력될 것입니다.
<img src="./img/image1.jpg" style="width: 300px; height: 200px;"> <br>
<a href="./subpage/subpage.html">서브페이지로 이동</a>루트(/)부터 경로를 기술하는 방식을 절대경로 방식, 현재 폴더로부터 경로를 기술하는 방식을 상대경로 방식이라고 합니다. 예를 들어 점(.) 하나는 현재 경로를 의미하고, 점 2개(..)은 현재 파일이 위치한 경로의 상위 한단계 위 폴더를 의미합니다. 예를 들어 아래 그림을 보면 index.html이 위치한 폴더는 static폴더입니다. index.html에서 점 2개(..)면 resources폴더를 가르키고, 점 1개(.)면 static폴더를 가르킵니다.
MainController 클래스의 @GetMapping에 대해서 추가적으로 설명하겠습니다.
@GetMapping은 사용자의 HTTP Get요청에 대한 응답 경로와 메서드를 정의한다고 배웠습니다. 더불어 @PostMapping은 사용자의 HTTP Post요청에 대한 응답을 정의합니다.
다양한 매핑관련 어노테이션을 정리하겠습니다.
- @GetMapping : 사용자의 HTTP Get요청에 대한 응답 경로와 메서드를 정의합니다.
- @PostMapping : Post요청에 대한 응답 경로와 메서드를 정의합니다.
- @PutMapping : Put요청에 대한 응답 경로와 메서드를 정의합니다.
- @DeleteMapping : Delete요청에 대한 응답 경로와 메서드를 정의합니다.
- @PatchMapping : Patch요청에 대한 응답 경로와 메서드를 정의합니다.
- @RequestMapping : 모든 타입의 요청을 처리할 수 있습니다.
@RequestMapping(value = "/", method = RequestMethod.GET) @RequestMapping(value = "/", method = RequestMethod.POST) 등등...value속성은 경로를 의미합니다. method속성은 요청방식을 정의합니다.
Get요청은 서버에 전달하는 데이타가 없거나 주소줄에 데이타를 실어 보내는 경우이고, POST요청은 로그인이나 회원가입 같은 보안이 필요한 데이타를 HTTP Body에 넣어 숨겨보내는 요청입니다. Put요청은 데이타의 추가를, Delete요청은 주로 데이타의 삭제를, Patch요청은 데이타의 수정/변경을 요청하는 용도로 주로 사용됩니다.
요청의 형식은 이처럼 다양하지만, 편의상 개발자의 성향상 마다 Get/Post요청 2개만 사용하는 경우도 많습니다. 이후에 배우겠지만 Restfull API 서버 제작시에도 다양한 형태의 요청에 대해서 응답하도록 만들어 보겠습니다.
이제 여러분은 정적 웹 페이지 서버를 제작하게 되었습니다. 축하합니다.
