Spring/Spring boot 입문

[스프링 부트] 정적 컨텐츠, MVC와 템플릿 엔진 - 스프링 입문 강의 / 인프런

mopipi 2022. 7. 24. 01:43
반응형

섹션 2. 스프링 웹 개발 기초

더보기
  1. 정적 컨텐츠
  2. MVC와 템플릿 엔진 : 가장 자주하는 방법
  3. API 
  4. 회원 관리 예제 - 백엔드 개발
    1. 비즈니스 요구사항 정리
    2. 회원 도메인과 리포지토리 만들기
    3. 회원 리포지토리 테스트 케이스 작성
    4. 회원 서비스 개발
    5. 회원 서비스 테스트

1. 정적 컨텐츠

정의

✓ 정적 컨텐츠: 서버에서 다른 특별한 동작 없이 html 파일 그대로 웹 브라우저(고객)로 전달하는 방식

스프링 부트는 정적 컨텐츠 기능을 자동제공 (static 폴더에서 찾아서 제공)

 

static 폴더 하위에 있는 파일들 == 정적 컨텐츠

→ 서버에서 웹 브라우저에게 hello-static.html , index.html 파일 자체를 단순하게 전달함.

  • URL) localhost:8080/"파일명".html 로 직접 접속 가능하다. (100% 동일한 파일 그대로 반환)
  • 대신 별도의 추가적인 프로그래밍 불가능 (정적 컨텐츠니까...)

원리

웹 브라우저 → localhost:8080/hello-static.html 요청

  1. 톰켓 서버) (스프링 부트의) 내장 톰켓 서버가 요청 받아서 → 스프링에게 넘김
  2. 스프링 부트) "hello-static"과 mapping 된 컨트롤러가 있는지 스프링 컨테이너에서 찾음 → 없다
  3. 내부 resources 안 static폴더에서 해당 파일 찾아서 반환
즉 , (1) 동적 컨텐츠인지 먼저 확인 (관련 controller 존재하는지) 확인 하고
       (2) 없을 경우 → (static 폴더 하위의) 정적 컨텐츠 찾아 반환.

 

2. MVC와 템플릿 엔진

 

MVC: Model, View, Controller [동적 문서를 제공하기 위해 필요한 3가지 요소]

 

- 이때 view는 템플릿 엔진 화면

  • 템플릿 엔진 (jsp, php...) : 서버에서 별도의 프로그래밍 → 동적 문서 제공 

- view는 화면을 그리는데 초점이 맞춰져 있음 ⇔ controller, model은 비지니스 로직, 내부 처리에 초점

 

HelloController에 control 생성하기

* thymeleaf의 장점: 파일 경로를 그대로 열면 서버 없이도 브라우저로 확인 가능

- name이 입력 될 경우, hello! empty 부분이 hello + name으로 바꿔서 출력됨 (by 서버)

- 따라서 hello! empty 이부분은 빈 자리를 채워주는 땜빵이라고 보면 된다.

 

이후, localhost:8080/hello-mvc에 접속하면, 에러페이지 나옴. 왜?

name이 없어서 발생하는 오류

Ctrl + P 로 파라미터 옵션을 확인 가능하다.

→ default 값이 true인 required 옵션... 따라서 값을 아래와 같이 넘겨줘야 함

/hello-mvc?name="넘겨줄 값"

name = spring!으로 값이 넘어갔으므로 ${name} → spring! 으로 변경 돼서 출력됨

 

 

   name = spring! 으로 controller 에 넘어감

    →  hellomvc라는 controller에서 요청받은 param인 spring!으로 name 자리가 대체되어 model에 담김

- 정리하자면... 
1. 웹브라우저에서 url로 입력한 값 (=/= html 이름)
2. 입력(url)을 통해 받아오는 값을 가리키는 키 (/hello-mvc?name=~~ 요거) → ?name뒤에 오는 값을 받아온다.
3-1. 서버 내에서 requestParam으로 받아온 값에 매핑되는 key ( ${ name} 에서 호출용으로 사용)
3-2. 동적 페이지에서 입력받은 값으로 대체될 값 (key가 자리채움)
4. 입력받은 값이 넘어갈 것 (String name; string형으로 받아온 변수 name의 값이 넘어감)
5. html 문서 반환할 때, 반환할 html 명

원리

웹 브라우저 → localhost:8080/hello-mvc?name=spring 요청

  1. 톰켓 서버] (스프링 부트의) 내장 톰켓 서버가 요청 받아서 → hello-mvc를 스프링에게 넘김
  2. 스프링 부트] "hello-static"과 mapping 된 컨트롤러가 있는지 스프링 컨테이너에서 찾음 → 있음!
    1. helloController의 method에 mapping 되어 있음 (helloMvc) →  해당 method 호출
    2. model에게 key = name, value = spring으로 짝지은 값을 넣음
    3. return할 때 hello-spring이란 이름을 스프링 부트에 넘겨줌
  3. viewResolver(view를 찾아주고, 템플릿 엔진 연결해줌)가 templates 폴더 밑에, return 값으로 받아온 파일명과 동일한 html 파일을 찾아 thymeleaf 템플릿 엔진에게 넘김
  4. 템플릿엔진이 랜더링 후 변환한 html을 웹브라우저(고객)에게 넘김 (⇔ 정적일때는 변환 X)

자체적으로 변환 해 넘겼기 때문에 페이지 소스보기 하면 변환된 값으로 나옴

동적 컨텐츠 (templates/)에서는 변환이 필요하지만 (템플릿 엔진이 처리함) 
정적 페이지 (static/) 는 변환 없이 바로 html 파일을 넘긴다.

 

 

 

반응형