1장
웹 서비스 동작 원리 이해하기
- 클라이언트-서버 구조
클라이언트 : 서비스를 사용하는 프로그램 또는 컴퓨터
서버 : 서비스를 제공하는 프로그램 또는 컴퓨터.
웹 브라우저가 클라이언트로서 동작하고, 스프링 부트는 서버 역할을 수행
- hello.html
url 주소 뒤에 hello.html을 붙여줘야 해당 html 화면을 볼 수 있음
-> 내 컴퓨터의 8080번에서 수행되는 서버에 hello.html 파일을 요청한 것.
이렇게 파일을 직접 지정할 경우
스프링 부트는 기본적으로 src > main > resources > static 디텍터리에서 파일을 찾는다. 그리고 찾은 HTML 코드를 응답으로 보냄
2장 MVC 패턴 이해와 실습
웹 페이지를 하나의 틀로 보고 변수에 따라 서로 다르게 출력하는 뷰 템플릿을 만들어보자
- 뷰 템플릿이란?
화면을 담당하는 기술로, 웹 페이지를 하나의 틀(Template)로 만들고 여기에 변수를 삽입해 서로 다른 페이지를 보여준다.
스프링 부트 프로젝트 생성시 머스테치(Mustache)라는 도구를 추가하였는데 이 도구가 바로 뷰 템플릿을 만드는 도구
- MVC 패턴
뷰 템플릿은 간단히 '뷰'라고도 함.
뷰는 컨트롤러와 모델이라는 두 동료가 존재한다.
컨트롤러는? 클라이언트 요청에 따라 서버에서 이를 처리
모델은? 데이터를 관리
MVC는 이와같이 역할을 나누는 기법이다.
: 웹 페이지를 화면에 보여줌(View)/ 클라이언트 요청을 받아 처리(Controller)/데이터 관리(Model)
2.2 뷰 템플릿 페이지 만들기
html은 static에 작성하였지만 뷰 템플릿은 templates 디렉터리에 작성
- greetings.mustache 파일 생성
제일 윗줄에 doc를 입력한 후 tab 키를 누르면 HTML 기본 코드가 자동으로 작성됨
<h1> oo님, 반갑습니다!</h1>위 코드를 추가.
- 컨트롤러를 만들고 실행하기
-
src > main > java > com.example.firstpriject에 하나의 새로운 패키지 생성
com.example.firstpriject.controller 를 만들면 기본 패키지 안에 Controller 패키지가 생성된다. -
FirstController 클래스를 생성
- @Controller 어노테이션 작성 : 이 클래스가 컨트롤러임을 선언
- niceToMeetYou() 메서드 선언 : 반환형 문자열 메서드
-
greetings 페이지 반환
niceToMeetYou() 메서드로 greetings.mustache 페이지를 반환하기 위해서는 파일이름인 greetings만 적으면 됨.-> 서버가 알아서 templates 디렉터리에서 mustache 템플릿 파일을 찾아 웹 브라우저로 전송함 -
@GetMapping을 통해 greetings 페이지를 반환해달라는 URL 요청 접수하기
niceToMeetYou() 앞에 @GetMapping() 추가
@GetMapping 괄호 안에 URL주소인 ("/hi") 넣기 -> /hi로 접속하면 컨트롤러가 greetings.mustache 파일을 찾아 반환을 하게됨. 그렇기 때문에 컨트롤러 선언을 먼저 하고 보여줄 페이지를 반환해야함
package com.example.firstproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FirstController {
@GetMapping("/hi") //url 연결 요청, url주소 hi
/// hi로 접속하면 greetings.mustache를 반환하라는 뜻
public String niceToMeetYou(Model model){
/// niceToMeetYou는 반환형 문자열 메서드
/// 컨트롤러 메서드에 Model 타입의 model 매개변수를 추가하여 Model을 통해 매개변수를 받아올 수 있게함
/// Model 패키지 임포트 해줘야함
model.addAttribute("username", "아무개"); //model객체가 addAttribute를 통해 "홍팍"값을 "username"에 연결해 웹 브라우저로 보낸다
return "greetings"; //greetings.mustache 파일 반환
}
}```
- 모델 추가하기
- 머스테치 문법을 사용해서 이름 대신 username이라는 변수를 사용하기
greetings.mustache에서 00님을 {{username}}이라고 수정
아직은 username이라는 변수를 찾을 수 없기때문에 에러가 남
-
모델을 사용하여 매개변수 추가하기
FirstController의 niceToMeetYou() 메서드에서 Model 타입의 model 매개변수를 추가한다.
-
addAttribute()메서드를 사용해 모델에 변수 등록하기
/hi 페이지의 실행 과정에서 모델, 뷰, 컨트롤러의 역할
2.3 /bye 페이지 생성
- @GetMapping("/bye") 어노테이션 추가
- /bye 요청을 처리할 seeYouNext() 메서드를 만들어줌, return "goodbye";
- templates 디렉터리에 goodbye.mustache 파일 생성
- {{nicknake}}님, 다음에 또 만나요 -> h1에 작성
- 컨트롤러에 모델 추가 model.addAttribute("nickname","아무개");
2.4 뷰 템플릿 페이지에 레이아웃 적용하기
- 부트스트랩을 이용하여 /hi 페이지에 헤더-푸터 레이아웃 적용하기
- 부트스트랩 홈페이지에 접속해서 v5.0.2를 선택해 사용
- 스타터 템플릿을 복사하여 greetings.mustache파일에 원래 내용을 싹 지우고 복사한 내용 붙여넣기
- hello, world 부분을 지우고 원래의 <\h1> {{username}}님~~~ 으로 수정
- 내비게이션 바를 추가하기위해 부트스트랩 검색창에 navbar 검색후 선택
- 내비 바 복사 후 greetings.mustache 파일로 와서 content 내용 시작되는 부분 위에 붙여넣기
- 마지막 부분 <\script arc= ~~ 어쩌구 부분 시작 전에 아래와 같은 site info를 작성
<div class="mb-5 container-fluid"> <hr> <p> CloudStudying | <a href="#">Privacy</a> | <a href="#">Terms</a></p> </div>
7.헤더 콘텐트 푸터 영역 간 간격을 좀 띄우기 위해 콘텐트 부분 코드를 수정
```java
<div class="bg-dark text-white p-5">
<h1>{{username}}님, 반갑습니다! </h1>
</div>
```- /bye 페이지에 헤더-푸터 레이아웃 적용하기
bye페이지에도 똑같이 레이아웃을 적용하기 위해 헤더, 푸터를 템플릿화 시키는 것이 좋겠다.
- 먼저 templates 디렉터리에 새로운 디렉터리인 layout 폴더를 생성하고 그 안에 header.mustache,footer.mustache 파일을 생성해준다.
2.기존 greeting.mustache의 상단 내비 바 부분을 발췌해 header.mustache로 만들어야함
1행부터 <\/nav> 코드 까지 잘라내어 header.mustache 파일에 붙여 넣는다.(greeting에서는 삭제)
-
greeting.mustache파일에서는 잘라냈으니 그 부분은 템플릿으로 대체해야한다.
아래와 같이 코드 작성
-
마찬가지로 푸터영영도 잘라낸 후 footer.mustache에 붙여 넣고 greetings엔 템플릿 코드를 추가해주자
- 이제 헤다,푸터 템플릿을 만들었으니 goodbye.mustache에도 적용을 해주면 됨
이때 콘텐트 영역은 따로 디자인을 똑같이 적용을 해주자
코드를 수정할때 다시 앱을 실행하면 시간이 오래걸리브로 빌드-프로젝트 다시 빌드(ctrl+f9)를 눌러 바로 웹 페이지에서 수정된 화면을 확인해보자
