"인프런 - 실전! 스프링 부트와 JPA 활용1 강의를 듣고 작성한 글 입니다."
www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-JPA-%ED%99%9C%EC%9A%A9-1#
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발 - 인프런
실무에 가까운 예제로, 스프링 부트와 JPA를 활용해서 웹 애플리케이션을 설계하고 개발합니다. 이 과정을 통해 스프링 부트와 JPA를 실무에서 어떻게 활용해야 하는지 이해할 수 있습니다. 초급
www.inflearn.com
그동안 JPA 강의를 통해 학습했던 내용들을 토대로 하여 스프링 부트를 이용해 상품 주문 홈페이지와 같은 예시 프로젝트를 진행해보자.
기본적인 프로젝트 생성 방법은 알고 있다고 가정하고 넘어가도록 하겠다.
프로젝트 기술 스택
- Spring Data JPA
- Thymeleaf
- H2 Database
프로젝트의 View 환경 설정?
이번 예시 프로젝트에서는 Thymeleaf 라는 뷰 템플릿 엔진을 사용한다.
우선 다음과 같은 클래스를 만들어준다.
- Hello.java
@Getter
@Setter // lombok 을 활용한 메소드 작성 간소화
public class Hello {
private String data;
}- HelloController.java
@Controller
public class HelloController {
@GetMapping("hello") // RESTful API 의 GET 메소드 구현
public String hello(Model model){
// Model : 스프링 ui 에 있는 Model 에 데이터를 실어서 뷰로 넘겨줄 수 있다.
model.addAttribute("data", "hello!!");
return "hello"; // 화면 이름
}
}
위와 같이 클래스들을 만들어 준 후 resources 폴더 아래의 templates 폴더에서 hello.html 파일을 만들어주자.
(컨트롤러에서 Model 클래스를 통해 뷰 측에 데이터를 넘겨받기 위한 html 페이지 생성)
- hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <!--Thymeleaf 를 사용하는 것을 알려주기 위한 태그-->
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}"> 안녕하세요 손님</p>
<!-- th:text -> thymeleaf 에서 텍스트 형태의 데이터를 뷰로 받기 위한 태그이다.-->
<!-- 자세한 사항은 thymeleaf 공식 문서 참조 -->
</body>
</html>
위와 같이 Thymeleaf 를 사용하는 파일을 생성 한 후 서버를 실행시킨 다음 localhost:8080/hello 링크를 타고 페이지에 접속하면 작성한 대로 페이지가 정상적으로 출력되는 것을 확인할 수 있다.
위의 파일을 보면 th:text 와 같은 Thymeleaf 에서 사용하는 텍스트 출력 태그를 볼 수 있다.
여기서 th:text = " '안녕하세요.' + ${data}" 와 같이 작성하면 '안녕하세요' 문자열 옆에 문자열 concatenation 으로 결합된 ${data} 에 HelloController 클래스에서 받아온 Model 클래스 객체의 hello!!! 라는 문자열 데이터가 담겨서 뷰 페이지로 넘어온 것을 알 수 있다.
이는 HelloController 에서 Model 클래스 객체 model 을 통해 뷰 페이지인 hello.html 파일에 데이터를 넘겨줄 때,
addAttribute 메소드에서 "data" "hello!!!" 와 같은 두 가지 파라미터를 넘겨줬는데
여기서 첫번째 파라미터인 "data" 가 바로 hello.html 파일의 Thymeleaf 를 활용하여 선언된 변수 ${data} 를 지칭하고 있으며, 해당 변수에 두번째 파라미터인 "hello!!!" 가 전달되었기 때문임을 알 수 있다.
만약 Thymeleaf 를 사용하지 않는 정적인 페이지를 만들고 싶다면 resources 폴더 아래의 static 폴더에서 서버의 메인 인덱스 페이지 파일을 생성하자.
- index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Hello</title>
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>
위와 같이 파일을 생성해두고 메인 페이지로 접근하면(localhost:8080) 아래와 같은 페이지를 확인할 수 있다.
여기서 hello 에 Thymeleaf 를 사용중인 페이지로 가능 링크를 걸어 두었으므로, 해당 링크를 클릭하면 앞서 생성했던 hello.html 페이지로 넘어가는 것을 볼 수 있다.
--------------------------------------------------------------
타임리프를 만지다 보면 이것저것 수정해야 하는 경우가 있다.
그때마다 일일히 재실행을 눌러주자니 좀 귀찮아 질 수 있다.
여기서 일일히 재실행을 누르지 않기 위한 꿀팁이 있다.
build.gradle 에 라이브러리를 하나 추가해주자.(의존성)
- build.gradle
implementation 'org.springframework.boot:spring-boot-devtools'위의 의존성은 캐시와 같은 것들을 다 없애주는 등 개발할 때 도움을 주는 기능이 많다.
즉, Thymeleaf 를 사용하는 중의 변경사항이 있을시 reloading 같은것을 자동으로 되게끔 만들어준다.
위의 라이브러리를 로드 해준 후 서버를 재실행 시키면 로그가 조금 달라지는 것을 볼 수 있다.
2020-12-01 21:58:51.274 INFO 29256 --- [ restartedMain] j.j.JpashopPracticeApplication-> restartedMain 가 로그에서 나타나면 devtools 가 로딩이 되었다는 뜻이다.
이렇게 세팅이 끝난 후 Thymeleaf 를 사용하는 중 변경사항 발생 시 일단은 변경사항을 적용한 후, 서버를 재실행 시키는 것이 아니라, IntelliJ 의 Build 메뉴에서 Recompile '현재파일을 클릭해주자.'(Ctrl + Shift + F9)
이후 페이지를 새로고침 해 보면, 서버를 재실행 시키지 않았음에도 불구하고 페이지의 변경사항이 제대로 적용된 것을 볼 수 있다.
'Spring boot' 카테고리의 다른 글
| 스프링 부트 - Entity 설계 시 주의할 점(2) (0) | 2020.12.28 |
|---|---|
| 스프링 부트 - Entity 설계 시 주의할 점(1) (0) | 2020.12.28 |
| 스프링 부트 - JPA 와 DB 설정 및 동작확인 - Tip (0) | 2020.12.20 |
| 스프링 부트 - JPA 와 DB 설정 및 동작확인 (0) | 2020.12.20 |
| spring-boot-starter-data-jpa 의존성 관련 오류 해결 (0) | 2020.08.26 |
