Front37 [Thymeleaf] ajax 이용해 비동기식 화면 수정(더보기, 댓글 구현) 1. Thymeleaf와 ajax 이용해서 화면 깜빡임 없이 데이터를 추가하기 댓글 작성이나, 더보기 버튼을 구현할 때 유용한 방법이다. 이 방법을 사용하지 않았다면 append 쓰면서 더럽게 html 코드를 짜야했을 수도,, 2. 구축 환경 IntelliJ 2021.3 (community 버전) Thymeleaf SpringBoot 2.1.3.RELEASE 3. 코드 1. controller 부분 작성하기 @Controller public class AjaxTestController { @GetMapping("/get/member") public String getMembers(Model model) throws Exception { Map memberList = new HashMap(); // 으로 .. 2022. 2. 11. [Thymeleaf] map 데이터 꺼내기 1. Map 형식 controller 부분 @Controller public class SampleController { @GetMapping("/ex01") public String ex01(Model model) { Map map = new HashMap(); map.put("key1", 100); map.put("key2", 200); map.put("key3", 300); model.addAttribute("mapList", map); return "ex01"; } } ** 자바에서 Map은 순서를 보장하지 않기 때문에 순서를 보장받으려면 LinkedHashMap을 사용하면 된다. html 부분 Thymeleaf 예제 이름 가격 2. Map 형식 controller 부분 map.put("key1".. 2022. 2. 11. [JavaScript] window.print() 지정 영역, 원하는 영역 출력하기 자바스크립트에서는 프린터로 출력하는 함수 window.print()를 제공한다. 단, 이 함수는 웹페이지 전체 영역이 출력되는 함수이기때문에 필요한 영역만 지정해야할 필요가 있다. 원하는 영역 프린트를 제어하기 위한 이벤트 핸들러는 두 종류가 있다. window.onbeforeprint 와 window.onafterprint 영역을 지정하여 출력하기 이벤트 핸들러를 추가하여 영역을 지정해보자. window.onbeforeprint 와 window.onafterprint에 콜백함수를 지정한다. window.onbeforeprint 프린트 출력 이전 이벤트 발생 미리보기 시에 콜백함수 실행 window.onafterprint 프린트 출력 이후 이벤트 발생 미리보기 취소 또는 프린트 완료 후에 실행 아래는 간.. 2022. 1. 25. [JavaScript] 버튼 클릭하여 주소 복사하기 서울특별시 --구 --로 00빌딩 주소복사 2022. 1. 18. [JavaScript] <li> 드래그 앤 드롭, 위 아래로 이동시키기 형태의 요소들을 드래그 앤 드롭으로 위치를 변경하고자 한다. 참고로 태그 외에 다른 것들도 가능하다. 가장 간단한 방법은 제이쿼리 라이브러리 sortable 를 추가해서 쓰는 것이다. 위 방법으로 아주 손쉽게 구현이 가능하다. 하지만 이번에는 자바스크립트를 이용해서 구현하는 연습을 하려고 한다. HTML5 가 제공해주는 드래그 앤 드롭(drag and drop) API를 이용해보자. 0. 드래그 앤 드롭 이벤트 아래 표 내용과 같이 다양한 이벤트가 있는데, dragstart, dragover, dragend를 사용할 예정. dragstart 사용자가 객체(object)를 드래그하려고 시작할 때 발생함. dragenter 마우스가 대상 객체의 위로 처음 진입할 때 발생함. dragover 드래그하면서 마우.. 2021. 12. 21. [JavaScript] 정규표현식으로 html 태그 제거하는 방법, 태그 제거 정규식 문제상황 글자 수를 체크해야 되는 상황인데, CKEditor로 넘기다보니 글자 수 안에 HTML태그들도 함께 들어가게 되었다. 그래서 글자+공백수보다 더 초과해서 글자수로 매겨지는 문제상황이 생겼다. 정규표현식을 이용해서 태그를 제거한 후에 글자수를 체크하여 문제 해결! 아래 정규표현식은 html 태그를 제거하기 위한 식으로 모든 태그를 제거한다. const extractTextPattern = /(]+)>)/gi; 이걸 활용하여 아래와 같이 적용해보았다. //html tag 제거 정규식 var extractTxt = $("#txt-contents").val().replace(/(]+)>)/gi, ''); //글자수 체크 if( extractTxt.length > 500 ) { alert("내용 길이가 .. 2021. 12. 16. 이전 1 2 3 4 5 6 7 다음
