이번 포스트에서는 표준 표현식을 이용해서 값을 출력하는 방법에 대해 알아보자.  표준 표현식 th:textth:text는 메시지를 출력하기 위해 사용되는 속성이다.표현식설명th:text="'some text'"주어진 some text로 대체th:text="#{property}"message source에 설정된 property를 활용하며 일반적으로 국제화(i18N)을 지원하기 위해 사용th:text="${attribute}"request scope에 저장된 attribute를 출력th:text와 유사하게 th:utext (utext: unescaped text)도 사용할 수 있다. text는 html 태그가 escape 처리되서 그냥 단순 문자열로 처리된다. 반면 utext는 html 태그가 escap..

이번 포스트에서는 src/assets에 저장한 이미지를 가져오는 방법에 대해 살펴보자. assets 이미지 가져오기 정적 로딩 assets 아래의 이미지를 정적으로 가져오려면 그냥 js를 참조하듯이 경로를 작성해주면 된다. 또는 파일을 import 해서 사용하는 방법도 제시한다. import staticImg from '@/assets/images/123.png' 개별 파일 동적 로딩 반면에 동적으로 로딩하기 위해서는 좀 복잡한 절차를 거쳐야 한다. 기존의 Vue 2.x는 WebPack을 사용해서 require 함수를 이용해서 로딩했었는데 Vue 3.x에서는 Vite로 변경되면서 URL 객체를 사용하는 방식으로 변경되었다. https://ko.vitejs.dev/guide/assets.html#new-u..

이번 포스트에서는 URL을 통해 get 방식으로 전달된 파라미터를 Javascript 영역에서 추출해서 사용하는 방법을 알아보자. queryString 추출 queryString이란 url 뒤에 ? 부분 부터로 파라미터들로 구성된 부분이다. 이 값을 뽑아내기 위해서는 location 객체가 가진 search 속성을 사용할 수 있다. let url = location.href; console.log(url); //http://127.0.0.1:5501/12_parameterfromurl.html?name=hong&age=30 let queryString = location.search; console.log(queryString); // ?name=hong&age=30 queryString은 통 문장으로 ..

자바스크립트에서는 location 객체가 url을 담당한다. 다음 페이지에서 location 객체가 갖는 속성에 대해 살펴볼 수 있다. https://www.w3schools.com/jsref/obj_location.asp Location Object The Location Object Location Object The location object contains information about the current URL. The location object is part of the window object and is accessed through the window.location property. Note: There is no public standard that applies to the ..