2일차

~2.4 뷰 템플릿 페이지에 레이아웃 적용하기 (종이책 p.57~94)

2장 MVC 패턴 이해와 실습

2.1 뷰 템플릿과 MVC 패턴

뷰 템플릿이란 화면을 담당하는 기술로, 웹 페이지(view)를 하나의 틀(Template)로 만들고 여기에 변수를 삽입해 서로 다른 페이지를 보여준다.

이 책에서는 Mustache라는 도구를 활용하여 뷰 템플릿을 만든다.

뷰 템플릿은 간단히 ‘뷰’라고도 한다. 클라이언트의 요청에 따라 서버에서 이를 처리하는 역할을 하는 컨트롤러(Controller)와 데이터를 관리하는 모델(Model)과 함께 작동하는데, 이렇게 역할을 나누는 기법을 MVC 패턴(Model-View-Controller Pattern)이라고 한다.

2.2 MVC 패턴을 활용해 뷰 템플릿 페이지 만들기

뷰 템플릿

뷰 템플릿은 src/main/resources/templates 디렉터리에 만든다.

이 디렉터리에 mustache 파일을 만들면 스프링 부트에서 자동으로 로딩한다.

*mustache 확장자는 뷰 템플릿을 만드는 도구, 즉 뷰 템플릿 엔진을 의미한다.

1. template 디렉터리에 greeting.mustsache라는 new file 생성
2. Handlebars/Mustache plugin 설치
3. HTML 코드를 작성하고 본문에 <h1>동한님, 반갑습니다!</h1>을 추가한다.
   • 제일 윗줄에 doc을 입력한 다음 Tab키를 누르면 기본 HTML 코드가 자동으로 작성된다.

컨트롤러

뷰 템플릿 페이지와 같이 컨트롤러 역시 만들어야 할 위치가 있다.

src/main/java 디렉터리에 존재하는 기본 패키지인 com.example.firstproject안에 하나의 패키지로 만든다.

1. 기본 패키지 안에 com.example.firstproject.controller로 controller 패키지를 만든다.
2. controller 패키지에 FirstController라는 클래스 만들기
   • 일반적으로 컨트롤러 이름은 ‘***Controller’라고 짓는다.
3. @Controller 어노테이션을 작성하고, 공백 문자열(””)을 반환하는 niceToMeetYou() 메서드를 선언
   • 자동으로 org.springframework.stereotype.Controller 패키지가 임포트된다.
4. greetings.mustache 페이지를 반환하기 위해 파일 이름인 greetings를 반환값으로 적어준다.
   • return “greetings”; 와 같이 적어주면 서버가 알아서 templates디렉터리에서 greetings.mustache 파일을 찾아 웹 브라우저로 전송해준다.
5. 서버를 실행하고 웹 브라우저에서 localhost:8080/greetings.mustache 페이지로 접속
   • 404 Not Found 에러 발생한다.
6. 페이지(greetings.mustache)를 반환해 달라는 URL 요청을 접수하는 부분이 빠졌으므로
   1. niceToMeetYou()메서드 앞에 @GetMapping()을 추가해준다.
      • 자동으로 org.springframework.web.bind.annotation.GetMapping 패키지가 임포트된다.
   2. @GetMapping의 괄호 안에 URL 주소인 “/hi”를 넣는다.
      • 웹 브라우저에서 localhost:8080/hi로 접속하면 greetings.mustache 파일을 찾아 반환하라는 뜻
7. 다시 서버를 실행하고 웹 브라우저에서 localhost:8080/hi로 접속

• 한글 깨짐 현상(????)이 발생하여 src/main/resources/application.properties 파일에 다음 코드를 추가해주었다.

server.servlet.encoding.force=true

모델 추가하기

‘동한’대신 다른 이름으로 바꾸기 위해서 username이라는 변수를 사용한다.

다음과 같은 mustache 문법을 사용하여 뷰 템플릿 페이지에 변수를 삽입한다.

{{변수명}}

1. greetings.mustache에서 동한님을 {{username}}님 이라고 수정한다.
   • 이렇게 실행하면 username이라는 변수를 찾을 수 없기 때문에 에러가 발생한다.
   • 모델을 활용하여 에러를 해결한다.
2. FirstController로 가서 niceToMeetYou() 메서드에 Model 타입의 model 매개변수를 추가한다.
   • 모델은 컨트롤러의 메서드에서 매개변수로 받아 온다.
   • 자동으로 Model 패키지가 임포트 되지만 같은 이름의 패키지가 2개 있기 때문에 org.springframework.ui.Model을 선택해줘야 한다.
3. Model 패키지가 임포트됐다면 모델을 통해 변수를 등록할 수 있다. niceToMeetYou() 메서드 내부에 model.addAttribute(”username”, “동한”); 코드를 추가해준다.
   • 모델에서 변수를 등록할 때는 addAttribute() 메서드를 사용한다.

model.addAttribute(”변수명”, 변숫값) // 변숫값을 “변수명”이라는 이름으로 추가

4. 서버를 재시작하고 웹 브라우저에서 localhost:8080/hi로 접속하면 원하는 결과가 잘 출력된다.

2.3 MVC의 역할과 실행 흐름 이해하기

localhost:8080/bye로 요청받았을 때 “xx님, 다음에 또 만나요!” 출력하기

1. 사용했던 FirstController 그대로 사용
2. @GetMapping(”/bye”) 어노테이션 추가
3. /bye 요청을 처리할 seeYouNext() 메서드 만들기
4. 아직 뷰 템플릿 페이지 만들지 않았으므로 임의로 return “goodbye”; 라고 적기
5. templates 디렉터리에 goodbye.mustache 파일 만들기
6. 기본 HTML 코드 입력하고 본문에 <h1>{{nickname}}님, 다음에 또 만나요!</h1> 추가
7. seeYouNext() 메서드의 매개변수로 model 객체를 받아오고, model.addAttribute()를 통해서 모델 변수 등록
8. 서버를 시작하고 localhost:8080/bye에 접속

2.4 뷰 템플릿 페이지에 레이아웃 적용하기

레이아웃(layout)이란 화면에 요소를 배치하는 일을 말한다.

헤더-푸터 레이아웃(header-footer layout)은 가장 기본이 되는 레이아웃이다.

상단의 헤더(header)영역에는 사이트 안내를 위한 내비게이션을 넣고, 하단의 푸터(footer)영역에는 사이트 정보를 넣는다. 그리고 그 사이에 사용자가 볼 핵심 내용인 콘텐트(content)를 배치한다.

/hi 페이지에 헤더-푸터 레이아웃 적용하기

greetings.mustache 페이지를 쉽고 빠르게 꾸미기 위해 부트스트랩을 사용한다.

부트스트랩(Bootstrap)이란 웹 페이지를 쉽게 만들 수 있도록 작성해 놓은 코드 모음으로, 각종 레이아웃, 버튼, 입력창 등 디자인을 미리 구현해 놓은 것이다. 사용하는 이 코드를 가져와 사용하기만 하면 되므로 편리하게 웹 페이지를 만들 수 있다.

1. 부트스트랩 홈페이지(https://getbootstrap.com)에 접속
2. 버전 v5.0.2 선택 (책의 내용과 같이 실습하기 위해서)
3. 스타터 템플릿(Starter template) 코드를 복사해서 greetings.mustache 에 붙여넣기
4. greetings.mustache의 본문 영역을 3개의 레이아웃으로 나누기
   • <!— —> 주석 표기를 이용해 기존에 코드가 있던 부분은 content, 그 위는 navigation, 그 아래는 site info의 3단 구조로 잡는다.
   • content는 Hello, world!를 지우고 {{username}}님, 반갑습니다!로 수정한다.
5. 헤더 영역에 내비게이션 바 추가
   • 부트스트랩 홈페이지에서 검색창에 ‘navbar’를 입력한 후 내비게이션 바 코드를 복사
   • greetings.mustache 파일의 <!— navigation —> 주석 아래에 붙여넣기
6. 푸터 영역에 사이트 정보 추가
   • <!— site info —> 주석 아래에 다음과 같은 코드 작성

<div class=”mb-5 container-fluid”>
	<hr>
	<p>ⓒ CloudStudying | <a href=”#”>Privacy</a> | <a href=”#”>Terms</a></p>
</div>

※ 도구 바의 망치 아이콘을 이용하면 프로젝트를 빌드해 수정된 HTML 코드를 좀 더 빠르게 서버에 반영할 수 있다.

7. 콘텐트 영역이 비좁으므로 보기 좋게 간격 넓히기

   • 컨텐트 부분을 <div></div> 태그로 감싸고 부트스트랩에서 제공하는 class 속성을 추가한다.
   • 배경 색상은 어둡게(bg-dark), 텍스트 색상은 하얗게(text-white), 상하좌우 여백은 5배만큼(p-5) 준다.

   <div class=”bg-dark text-white p-5”>
   	<h1>{{username}}님, 반갑습니다!</h1>
   </div>

/bye 페이지에 헤더-푸터 레이아웃 적용하기

/bye 페이지에도 똑같은 레이아웃을 적용할거지만 /hi 페이지를 템플릿화해서 사용해본다.

※ 템플릿화한다는 말은 코드를 하나의 틀로 만들어 변수화한다는 말

1. templates 디렉터리에 layouts라는 새 디렉터리를 만든다.
2. layouts 디렉터리에 header.mustache 파일과 footer.mustache 파일을 만든다.
3. greetings.mustache 코드의 상단 내비게이션 바 부분(<!doctype html> ~ </nav>)을 잘라내고 header.mustache 파일에 붙여 넣는다.
4. 잘라낸 부분은 다음과 같이 템플릿으로 대체한다. {{>파일명}}

{{>layouts/header}}

5. 마찬가지로 푸터 영역(<!— site info —> ~ </html>)도 잘라낸 후 footer.mustache 파일에 붙여 넣는다.
6. 잘라낸 부분은 {{>layouts/footer}}로 대체해 템플릿화한 footer.mustache 파일을 변수로 가져온다.
7. goodbye.mustache 파일 역시 같은 방법으로 완성한다.