Steady and right

마크업 언어(Markup Language)란 마크업 언어는 태그 등을 이용하여 문서 혹은 데이터의 구조를 기록하는 언어로, 대부분 '기록'의 용도로 사용되기 때문에 프로그래밍 언어로 취급하지는 않는다고 한다. 조금 더 풀어서 살펴보기 위해 예를 들어보자면 클라이언트가 잡지를 읽는다고 가정해보자, 이때 1-10페이지 까지는 의류, 11-20 페이지 까지는 액세서리의 내용이 들어있다고 한다면, 이 페이지들은 하나하나 마크업으로 작성이 되어서 존재하는 것이다(인터넷에서는 웹페이지) 이것을 프로그래밍 언어로 각 페이지를 요청에 맞게 방문할 수 있게 하면 그것이 바로 서비스가 된다. 즉 클라이언트가 사용하는 웹서비스는 마크업언어를 기반으로 쌓아 올린 페이지들의 묶음인 것이다. 가장 대표적인 마크업의 사용 예는 아..

(참고: Spring Boot , IntelliJ를 기준으로 작성된 글입니다.) 타임리프는 스프링과 통합하기 위한 매뉴얼을 제공할 정도로 스프링을 사용할 때 편리한 기능들을 많이 제공한다 이번 글에서는 Form 작성 시 어떠한 편리기능을 제공하는지 살펴보고자 한다 Inputs : th:field & th:object 기존에 HTML의 Form을 작성할 때 태그의 경우 id와 name 그리고 value 등의 정보들을 일일이 적어주어야 했다 타임리프가 제공하는 th:field를 사용하면 이러한 속성들을 자동으로 생성해준다, 예시와 같이 살펴보겠다 보통 id 와 name을 같게 사용하는 경우가 대부분이라고 하는데, 타임리프의 th:field를 사용하게 되면 id , name 그리고 value까지 자동으로 생성..

Template Layout 이전 글에서 작은 개념인 Template Fragments(템플릿 조각)에 대하여 살펴보았다 이번 글에서는 이를 확장한 개념인 템플릿 레이아웃에 대하여 살펴보고자 한다 템플릿 레이아웃은 단순히 하나하나의 조각이 아니라 레이아웃을 적용시킬 html 파일을 살펴보자 메인 컨텐츠 위와 같이 레이아웃을 적용시키게 되면 아래와 같은 결과가 나온다 메인 컨텐츠 기존 레이아웃 틀에서 th:replace라고 작성했던 부분은 common_header(~{::title},~{::link})에 따라서 레이아웃이 적용되는 html에 있던 title과 links가 th:replace로 선언한 부분만 대체되지 않고 유지되었다 레이아웃 H1 레이아웃 컨텐츠 레이아웃 푸터 위의 레이아웃을 아래의 html..

템플릿을 만들다 보면 빈번하게 같은 파트를 작성해야 하는 경우가 있다 (footers , header , menus..) 이 파트들을 만약 하나하나 작성하였다면 공통적인 부분임에도 불구하고 수정사항이 있을 때마다 전부 수정해야 할 것이다 이때 타임리프의 템플릿 레이아웃 기능을 사용하면 매우 효율적으로 처리할 수 있다 템플릿 레이아웃을 알아보기 전에 그 안에 더 작은 개념인 템플릿 조각을 먼저 살펴보겠다 Thymeleaf Template Fragments 우선 공통적으로 들어갈 footer가 있다고 가정하고 footer의 내용을 아래와 같이 작성하였다 footer 내용 parameter 내용 본문이 될 main html에서 어떻게 사용하는지 살펴보자 (생략) 부분 포함 insert 부분 포함 replace..

타임리프는 자바스크립트를 더욱 편리하게 사용할 수 있도록 자바스크립트 인라인 기능을 제공한다 구체적으로 어떠한 기능들을 제공하는지 살펴보자 자바스크립트 인라인 기능을 사용하려면 아래와 같이 작성하면 된다 예시를 위하여 서버 쪽에서 아래와 같이 데이터를 보냈다고 가정해보자 public String javascriptInline(Model model) { model.addAttribute ("user", new UserDTO("userA", 10)); //(username, age) } Text Inlining (텍스트 렌더링) 자바스크립트에서 변수값을 타임리프 변수로 대입할 때 자주 나는 오류가 특히 문자열에서 따옴표를 사용하지 않아서이다 또한 이를 알고 있다고 하더라도 매번 따옴표를 더하기에는 너무 번거..

HTML의 태그가 아닌 오직 타임 리프만이 제공하는 유일한 자체 태그인 Block tag에 대해 살펴보고자 한다 Synthetic th:block 타임리프가 블록태그를 만든 이유는 주로 반복문에서 발생하는 문제점 때문인데 예를 들어 아래와 같이 두 개의 div 태그를 반복문으로 같이 돌리고 싶다면 매우 난감한 상황이 온다 username age username&age 이때 th:block 말 그대로 하나의 블록 처리를 하여 반복문을 돌리면 굉장히 간단하게 해결이 된다 username age username&age th:block은 렌더링 될 때 사라지며 웹브라우저에는 본래 의도하던 두 개의 태그의 반복문 결과만 남게 된다 더보기 개인 학습을 위해 작성되는 글입니다. 제가 잘못 알고 있는 점에 대한 지적 ..