당니의 개발자 스토리
View 환경 설정 본문
View 환경 설정
이번 시간에는 View 환경을 한번 설정해 보겠습니다.
저희는 thymeleaf 라는 템플릿 엔진을 쓸 거구요. 이 공식 사이트에 한번 들어가보겠습니다.
사이트에 들어가시면 thymeleaf의 여러가지 장단점이 있는데 요즘에는 가급적이면은 jsp를 쓰는 것보다는 여러분이 선택을 할 수가 있어요.
start.spring.io 여기 가보시면,
카테고리가 있거든요. web의 Template Engines을 보시면 타임리프, 프리마커, 머스타치, 그루비 템플릿 같은 게 있어요.
주로 이것들이 많이 권장되는 것들이라고 보시면 돼요. 사실 스프링은 thymeleaf를 좀 밀어요.
thymeleaf도 스프링과 관련된 굉장히 많은 기능들을 지원하고요. thymeleaf가 좀 장단점이 있는데 얘가 미는 장점은 뭐냐면,
Natural templates 라고 이게 뭐냐면 html을 마크업한 것 안에
이런 식으로 안에 뭘 넣어 가지고 문제를 해결하는 거거든요.
무슨 말이냐면, 보통 같은 경우에 <tr> 다음에 if 나오잖아요. 다른 템플릿 엔진은 #if가 나오거나 하는데, 얘는 이 마크업을 깨지 않고 그대로 쓰는 거예요. 그러니까 이런 거에 되게 장점이 있는 거죠.
보통 프리마커나 jsp 이런 것들은 웹 브라우저에서 딱 열면 안 열리거든요. 근데 thymeleaf는 웹 브라우저에서 열려요. 그게 장점이죠.
그래서 내추럴 템플릿이라고 하는데, 이것도 단점이 있습니다.
이게 2버전 때는 좀 불편한게 많아요. 3 버전 때 많이 좋아졌는데 2점때의 아주 극단적인 단점이 뭐냐면,
마크업을 하는데 <BR> 같은 거 그냥 쓰기도 하잖아요.
그런데 얘는 무조건 이런식으로 완전히 태그를 다 닫아주는 스타일로 딱 정확하게 매칭을 안하면 에러가 나요. 그래서 에러가 안나게 하는 방법도 있었는데, 아무튼 그 문제가 되게 많아서 힘들어했어요. 근데 3.0에서는 꼭 안 닫아줘도 됩니다.
그리고 이제 성능 이슈도 좀 있었는데 3.0 되면서 많이 개선이 됐다고 그러더라구요. 개인적으로는 스프링이랑 인티그레이션 됐다는 거에서 아주 만족합니다. 그런데 아직 약간의 단점은 메뉴얼을 좀 봐야 됩니다.
요즘에는 여담이지만 View 템플릿 엔진 보다는, 그러니까 서버 사이드에서 렌더링 하기보다는 아예 react나 view.js 이런것들이 많아서 요즘에 admin 같은거 만들 때 그쪽을 많이 쓰긴 하더라구요.
그러면 View 환경 설정을 어떻게 하면 좋을까요? 에 대해서, 참고로 스프링 공부하실 때 가이드라고 있거든요.
spring.io에 들어가셔서
만약 내가 워낙 API를 잘 모른다고 하면, Gudies에 들어가서 검색하는 겁니다.
그 다음 restful을 잘 모르겠어. 라고 하면,
뭐 이런 것들을 참고해서 하시면은 좋습니다. 너무 감이 안 올 때는 막 이론적인 책 같은 거를 보는 거 보다는 일단 이렇게 한번 돌려보고 그 다음에 공부하면 좋거든요.
serving-web-content를 찾아보면,
이거 눌러서,
이거 보시고 쭉 한번 따라해보시면 돼요. 스프링 공식 튜토리얼입니다.
근데 저는 간략한 버전으로 한번 쭉 해볼게요.
그리고 thymeleaf나 템플릿 엔진에 관해서 스프링 부트 매뉴얼을 링크 걸어놨습니다. 버전이 1.6 이네요. 1.7로 바꿔치면 링크가 이렇습니다.
여기 들어가셔서, 템플릿 엔진에 대한 설명이 있고, error handling을 어떻게 한다는 등등 보실 수가 있습니다.
이렇게 해서 기본적으로 여러분이 필요한 것들을 찾을 수 있는 것을 걸어 놨습니다.
자 그럼 한번 해봅시다.
세팅할 게 없나요? 세팅할 게 따로 없습니다. 스프링 부트가 진짜 대단하죠.
이 spring-boot-starter-thymeleaf만 있으면 이미 세팅이 다 되어있어서 개발만 하시면 됩니다.
먼저, jpashop에다가 HelloController를 만듭니다.
그 다음, 스프링에서는 @Controller 라는 어노테이션을 달아주는 것 정도는 알고 들어오셔야 됩니다.
그 다음에 Hello 라는 메서드 껍데기를 만들고 @GetMapping("hello")를 하면, hello 라는 url로 오면 이 컨트롤러가 호출되겠죠.
그 다음 model 에다가 아무 값을 담겠습니다.
그리고 이 model 이라는 데에다가 addAttribute로 Key가 "data"이고, value가 "hello!!!"로 해서 넘기는 거죠. 그런 다음 "hello"를 반환해줍니다.
자 이제 이 model이라는 게 뭐냐면, Spring UI에 있는 model에다가 어떤 data를 실어서 컨트롤러에서 view로 넘길 수 있어요.
자 그래서 저는 name이 "data"라는 key의 값(value)을 "hello!!!" 라는 걸 넘길 거구요.
그 다음에 return "hello"는 뭐냐면, 화면 이름입니다. 여기 resources를 보시면,
스프링 initializer가 친절하게 만들어 놨네요.
보시면, 여기 resources에 templates 라고 되어있죠? 템플릿 엔진이니까 templates인가 보다. 라고 생각하시면 되구요. 그 다음에 이 templates에다가
view name을 반환했던 이름인 hello.html로 해주시면 됩니다.
이 return 하는 hello에다가 .html이 붙는 게 관례입니다.
그래서 이렇게 하면, return 한 결과가 화면을 렌더링 할 때 여기 hello.html로 이동이 됩니다.
그럼 이제 화면을 만들어야 되는데요. 여러분 화면은 복붙을 하겠습니다.
보시면은 기본적인 마크업처럼 하는데 약간 차이가 있는 게 있습니다.
html에 namespace를 갖다가 thymeleaf로 주시구요.
그 다음에 뭘 하냐면 여기 th:text 라는 게 있죠. '아 뭔가 여기를 타면 얘가 "안녕하세요 " 다음에
방금 제가 model로 넘겨준 data 라는 key의 value인 hello!!!가 들어가겠구나' 알 수 있죠.
그럼 여기는 뭐죠? 이거는 제가 그냥 순수하게 HTML 렌더링을 하면,
이렇게 렌더링이 됩니다. 그게 아니고 서버사이드 렌더링을 타면, data 렌더링 된 게
여기에 들어가게 됩니다. 정확한 이해를 위해서 한번 순수하게 열어볼게요.
이거를 shift + cmd + c 로 복붙해서 순수하게 html을 열어보겠습니다.
하고나서 페이지 소스보기 누르면,
그대로 나와있는 걸 알 수 있습니다. 이처럼 HTML을 그대로 쓰고, 그 파일을 서버 없이 바로 열어봐도 껍데기를 볼 수 있다는 것이 thymeleaf의 장점입니다.
다른 템플릿 엔진은 if 어쩌구 저쩌구 난리가 나겠죠.
이제 이거를 만들었으니까 서버 사이드 렌더링을 해볼게요.
이걸 돌려서 실행하면, 이 main 메서드를 실행하면 스프링 부트가 내장 톰캣을 가지고 딱 돌려주죠.
자 그러면 localhost:8080/hello을 하면,
이렇고, 페이지 소스 보기를 하면
서버 사이드 렌더링이 돼서 이렇게 나오게 되죠.
그 다음에 그냥 8080에 들어가면 아무것도 없으니까 이번에는 딱 정적인 페이지를 어떻게 하는지 한번 보여드릴게요.
서버 사이드 렌더링과 전혀 관계없이 정적인 페이지를 만들겠습니다.
그런데 그 전에 그게 궁금하실 수 있을 것 같아요.
'어 아니 "hello" 라고 이름만 적었는데 어떻게 얘가 리소스의 템플릿에 hello.html을 찾아요??' 라고 궁금해 하실 수 있는데요. 이게 Spring Boot가 해주는 겁니다.
Spring Boot의 Thymeleaf가 기본적으로 설정을 딱 걸면서,
Thymeleaf에 대한 이렇게 설정값을 다 넣어놓고 매핑을 합니다. 설정값을 바꾸고 싶으면, 부트에 들어가서 메뉴를 보시면 Prefix랑 Suffix에 대해서 바꾸실 수 있습니다. 참고로 말씀드렸고요. 그냥 웬만하면 관례로 하는게 낫겠죠.
그 다음에 이제 완전 정적인 페이지, '렌더링 안하고 난 그냥 순수한 html을 뿌리고 싶어!!' 그럴 수 있죠.
'렌더링을 안하고 그냥 완전 순수한 html을 뿌리고 싶어'라고 하면, resources의 static에다가 index.html을 만듭니다.
이렇게 해주고 다시 돌리면 됩니다. 여러분 얘가 resources 폴더에 있기 때문에, 개발하실 때도 기본적으로 항상 서버를 다시 띄우셔야 됩니다. refresh 하면,
자 이렇게 떴죠. hello를 누르면,
여기로 가게 세팅을 해놨습니다.
여기 보시면, href 태그로 걸어놨습니다.
자 이렇게 해서 정적 컨텐츠는 static에 넣어놓고, 템플릿 엔진을 가지고 뭔가 렌더링 해야되는 것은 templates에 넣어 두신다고 보시면 됩니다.
그런데 이제 참고로 예를 들어서 템플릿 엔진을 만지면 바꿀 일이 되게 많거든요. 손을 댈 때가 진짜 많아요. 근데 문제는 얘를 계속 서버 restart를 하면 짜증난단 말이에요. 화면 몇 개를 막 고쳐야 되는데, 그때마다 restart하면 짜증나죠.
예를 들어서 한번 바꿔볼게요.
안녕하세요를 안녕! 으로 바꿔볼게요. 그러면,
새로고침을 해도 여전히 안바뀐단 말이에요. 그럼 짜증이 나죠.
얘를 일단 기본적으로 recompile 해도
여전히 안 바뀐단 말이에요.
자 그럼 이제 어떻게 하냐면 방법이 있습니다. 꿀팁을 하나 알려드리겠습니다.
build.gradle에다가 라이브러리 하나를 넣으시면 됩니다.
spring-boot-devtools 라는 라이브러리가 있습니다. 이걸 하나 넣어주시고 gradle import를 하시면 얘가 이제 개발할 때 되게 도와주는 기능을 엄청 넣어놨어요.
그래서 얘를 쓰면 캐시 이런 것도 다 없애고, 뭔가 리로딩 같은 걸 다 되게 만들어줘요.
자 얘를 일단 넣고요. 서버를 한번 띄워볼게요.
자 띄우면 로그가 변합니다. restartedMain 이라고 뜹니다. 이렇게 하면 여러분 DevTools 세팅이 되신 거에요.
지금은 현재, 다시 서버를 띄웠으니까
이렇게 뜨죠. 이걸 다시 '안녕하세요. '로 바꿔보겠습니다.
이렇게 해두고 저장만 하면, 다시 새로고침해도 페이지는 여전히 안 바껴요.
대신, 이 DevTools 라는 라이브러리를 넣고 나면 Build의 Recompile을 해주면,
서버를 재시작 하지 않아도,
새로고침을 하면 변경되는 것을 볼 수 있습니다.
자 그래서 이 DevTools를 쓰시면 좀 빠르게 바꿀 수가 있습니다.
그 다음 시간에는 H2 데이터베이스를 설치하는 방법을 알려드리겠습니다.
'스프링 > 실전! 스프링 부트와 JPA 활용1' 카테고리의 다른 글
| JPA와 DB 설정, 동작확인 (0) | 2024.04.13 |
|---|---|
| H2 데이터베이스 설치 (0) | 2024.04.02 |
| 라이브러리 살펴보기 (0) | 2024.03.31 |
| 프로젝트 생성 (0) | 2024.03.31 |
| 강좌 소개 (0) | 2024.03.26 |
