Backend

[Thymeleaf]ajax 사용법 및 예제(SpringBoot) 안녕하세요! 오늘은 SpringBoot에서 Ajax를 사용하는 방법에 대하여 정리해보려고 합니다. 흔히 웹 개발을 진행할 때 비동기통신을 사용하여 진행하고싶을 때가 있습니다. 예를 들면 버튼을 눌렀을 때 화면 전체를 새로고침 하지 않고 뷰를 갱신한다던가 하는 일입니다. 이번 포스팅은 뷰 템플릿 엔진으로 Thymeleaf를 이용하였고 SpringBoot로 개발하였습니다. 참고해주세요! 1. 뷰 페이지 작성 먼저 뷰 페이지를 작성해야겠죠? 저는 간단하게 input 박스와 버튼을 넣어서 버튼을 클릭시 서버로 데이터를 보내고 받아온 데이터를 뷰에서 갱신하는 방식으로 진행하였습니다. 1. 데이터 전송 뷰 소스코드입니다. input에 데이터를 입력하..

안녕하세요, 오늘은 Layout기능을 이용하여 화면구성을 해보려고 합니다. 보통 프로젝트를 하다 보면 페이지별로 디자인을 모두 새로하지는 않으실 겁니다. 하지만 페이지별로 복붙을 통해 구현하기에는 추후에 관리가 너무 힘들어지죠.. 이럴때 쓰는게 공통양식을 만들어 놓고 불러오는 방식을 활용하게 됩니다. JSP에서는 include를 이용하면 되는데 Thymeleaf에서는 또 다르더라고요. 그래서 그 방법에 대해 정리해보려고 합니다. 1. 레이아웃을 위한 Dependency 추가 implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect') 저번에 타임리프를 위한 Dependency외에 위의 gradle을 추가해 줍니다. 2. 공통 양식 페이지 제작 만..

[Thymeleaf] Thymeleaf의 기본 문법 정리 Thymeleaf 문법의 기본적인 특징은 html태그 안에 th문법을 추가하는 형태이다. 표현식: (태그는 div가 아니여도 html에서 지원하는 태그면 상관없다.) 그중 대표적인 몇 개만 정리해보았다. 1. th: text 태그 안의 텍스트를 서버에서 전달 받은 값에 따라 표현하고자 할 때 사용된다. 1.1 사용예시 message (이 경우 서버에서 hello라는 변수가 있을 경우 message의 자리를 변수값으로 대체하게 된다.) 2. th:utext 변수에서 받은 값에서 html태그가 있다면 태그값을 반영해서 표시해준다/ (th:text와의 차이는 사용 예시 참고) 2.1사용 예시 서버에서 받은 hello값이 Hello World!일 때 th..

[Thymeleaf] SpringBoot에 Thymeleaf 적용하기 기존에 JSP환경에서 뷰를 제작하다가 한계를 느껴 다른 템플릿을 적용해보기로 마음을 먹었다. 스프링이 지원해주는 템플릿 엔진을 알아보던 중 FreeMarker Groovy Thymeleaf Mustache 이렇게 4개가 있다는 것을 알게되었는데 그 중에 스프링이 지원해준다는 Thymeleaf(타임리프)를 적용해 보기로 하였다. (사실 처음엔 가장 성능 좋다는 Freemarker를 선택했는데 SpringSecurity프레임 워크를 적용하던 중 막혀서 결국 Thymeleaf를 선택하게 되었다. Freemarker로 SpringSecurity를 적용하려면 JSTL을 별도로 또 사용해야 한다는 의견이 있어서 SpringSecurity까지 사용..