SPRING 입문 [ 코드로 배우는 스프링 부트 ]

[스프링 입문] 섹션 2.1 스프링 웹 개발 기초 (정적 컨텐츠)

wlalsu_u 2023. 1. 7. 15:52

2.1.0  웹 개발 3가지 방법

 

웹을 사용하기 위한 3가지 방법이 있다.

먼저 간단히 개념을 정리한 후, 각각에 대해 자세히 살펴보자.

 

1) 정적 컨텐츠

 

서버에서 하는 일 없이, 단순히 파일을 웹 브라우저에 표시한다.

ex) Welcome Page

 

2) MVC와 템플릿 엔진

 

템플릿 엔진(ex. JSP, PHP) 서버에서 프로그래밍을 하여, html을 동적으로 바꾼다.

(정적 컨텐츠와의 차이는 서버에서 변형을 한다는 점!)

최근 가장 많이 사용하는 방식

 

 

 3) API

 

JSON 포맷으로 데이터를 클라이언트한테 전달한다.

서버끼리만 통신할 때는, 데이터만 전달하면 되므로 API방식이 주로 사용된다.

 

 

 


 

2.1.1  정적 컨텐츠 파일 작성 

 

 

정적 컨텐츠에 대한 매뉴얼은 다음 사이트에서 확인 할 수 있다.

https://docs.spring.io/spring-boot/docs/2.7.7/reference/html/web.html#web.servlet.spring-mvc.static-content

 

Web

Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and servlet-based web applications. It occurs as part of closing the application context and is performed in the earliest

docs.spring.io

 

 

 

 

 

 

resources  >  static  폴더에 파일을 작성하면, 정적 파일을 생성할 수 있다.

 

static 폴더 아래에 hello-static.html 파일을 다음과 같이 작성하였다.

 

 

<!DOCTYPE HTML>
<html>
<head>
    <title>static content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
정적 컨텐츠 입니다.
</body>
</html>

 

 

파일명을 url로 사용하므로,

 

http://localhost:8080/hello-static.html 을 통해 접속할 수 있다.

 

 

 

 

 

 

이처럼 정적 컨텐츠는 static 폴더 아래에 작성한 파일을 그대로 웹 브라우저에 표시한다.

따라서 프로그래밍이 불가하다.

 

실제 페이지 소스를 보면,  작성한 html과 동일한 것을 볼 수 있다.

 

 

<!DOCTYPE HTML>
<html>
<head>
    <title>static content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
정적 컨텐츠 입니다.
</body>
</html>

 

 

 

 


 

2.1.1  정적 컨텐츠 동작 원리

 

1) 웹 브라우저에서 localhost:8080/hello-static.html 에 접속

 

2) 톰캣 내장 서버가 요청을 받음

 

3) Spring 에게 넘어가면, 먼저 Controller 에 "hello-static" 이 있는지 확인 (Controller가 우선순위)

 

4) Controller에 없으므로, resources/static/hello-static.html 이 있는지 확인

 

5) 있다면, 웹 브라우저에 반환

 

 

 

 

 

 

 

 

김영한 '스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술' 강의를 기반으로 작성하였습니다.

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8/dashboard