개발새발 블로그
[스프링부트3 자바 백엔드 개발 입문] 1-2장 본문
김영한 강사님의 스프링 입문강의를 마치고, 스프링부트3 자바 백엔드 개발 입문 책을 시작한다.
새로운 마음으로 스프링부트 설치도 새롭게 했는데,
내 java 버전은 15이고, 현재 다운받은 버전은 17이라 맞지 않아서 Module JDK is not defined 라는 오류가 떴다.
그래서 jdk17을 새롭게 다운받아주고, 환경변수 설정도 새롭게 다시하였다!
근데 김영한 강사님과 다르게 템플릿 엔진을 thymeleaf를 사용하지 않고 mustache를 사용한다.
templates 밑에 greetings.mustache 라는 새로운 파일을 하나 생성하면
이렇게 머스테치 파일을 지원하는 플러그인을 발견했다고 뜬다.
오른쪽의 install mustache를 클릭해 설치한 후,
그 머스테치 파일에 뷰 템플릿 페이지 하나를 작성했다.
doc 를 치고 tab키를 누르면 자동으로 기본 틀이 생성된다.
컨트롤러 파일을 하나 만들어서, @Controller 애노테이션을 붙여주고,
return "greetings"; 을 반환값으로 적어서 서버가 알아서 templates 디렉터리에서 greetings.mustache 파일을 찾아 웹브라우저에 전송한다.
그런데 localhost:8080/hi 에 들어가면 위와 같이 한글이 깨져서 나오는 현상이 발생했다.
src>main>resources>application.properties 파일을 열어서
server.servlet.encoding.force=true
를 추가한 후에 서버를 재실행해주었다.
이제 Model를 가지고 변수를 넘겨줄 것이다.
@Controller
public class FirstController {
@GetMapping("/hi")
public String niceToMeetYou(Model model){
model.addAttribute("username", "보키");
return "greetings";
}
}
model.addAttribute("username", "보키");
로 변수를 템플릿으로 넘겨주고,
<div>{{username}}님, 반갑습니다!</div>타임리프랑 다르게 {{변수명}} 넣어주면 된다!
쉽구나
.java 컨트롤러의 동작 방식이다.
1. 이 파일이 컨트롤러임을 선언
2. 클라이언트로부터 "/hi" 라는 요청 받아 접수
3. "/hi"라는 요청을 받음과 동시에 niceToMeetYou() 메서드 수행
4. 뷰 템플릿 페이지에서 사용할 변수를 위해 모델객체 불러와 변수 등록
5. 메서드를 수행한 결과로 greetings.mustache 파일 반환
<뷰 파일 작성하기>
부트스트랩을 사용해서 /hi페이지를 꾸며주겠다.
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
부트스트랩의 스타터 템플릿을 복사해서 greetings.mustache 파일에 새로 붙였다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!--navigation-->
<!--content-->
<h1>{{username}}님, 반갑습니다!</h1>
<!--footer-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>이렇게 기본틀을 잡아놓고, 부트스트랩에 가서 navbar라고 서치한 후 붙여넣고, 추가로 footer 정보까지 넣어주었다.
그런데 코드가 상당히 길다.
그리고, 모든 화면에서 header와 footer 은 계속 동일한 코드가 들어갈 것이다. 그래서 템플릿화 시켜준다.
layout이라는 새로운 파일을 만들고, 안에 header.mustache 파일과 footer.mustache 파일을 각각 만들어준다.
header.mustache 파일에
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!--navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...(중략)
</nav>
이렇게 navigator 부분까지만 저장하고,
footer.mustache 파일에
<!--footer-->
<div class="mb-5 container-fluid">
<hr>
<p> CloudStudying | <a href="#">Privacy</a> | <a href="#">Terms</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>끝부분만 저장한다.
그런다음 greetings.mustache 파일로 돌아가서, 만들어놓은 템플릿을 사용한다.
변수명을 불러오는게 아니라 뷰 템플릿 파일을 불러오는 것으로, {{>파일명}}으로 작성한다.
{{>layout/header}}
<div>{{username}}님, 반갑습니다!</div>
{{>layout/footer}}
이렇게 페이지를 간추려서 작성할 수 있다. 한눈에 확 정리된다.
'백 > spring' 카테고리의 다른 글
| [스프링부트3 자바 백엔드 개발 입문] 4장 - 롬복과 리팩터링 (0) | 2024.01.17 |
|---|---|
| [스프링부트3 자바 백엔드 개발 입문] 3장 - 게시판 CRUD 만들기 (1) | 2024.01.09 |
| 김영한T 스프링 입문강의 - [섹션6] 스프링 DB 접근 기술 (JPA, 스프링 데이터 JPA) (0) | 2023.11.24 |
| 김영한T 스프링 입문강의 - [섹션6] 스프링 DB 접근 기술 (JDBC, Jdbc Template) (0) | 2023.11.19 |
| 김영한T 스프링 입문강의 - [섹션5] 회원관리 예제(웹 MVC 개발) (0) | 2023.11.07 |
