javascript4

• 

  [thymeleaf/javascript]thymeleaf값을 javascript에서 사용 미래의 내가 보기 위해 javascript에서 thymeleaf값을 사용하는 방법을 기록한다. 코드로 대체한다. javascript(thymeleaf안의 script) // script에 th:inline 붙여야 함 controller @GetMapping("/list") public String list(Model model) { List list = userService.selectUserList(); model.addAttribute("list", list); return "view 페이지"; } reference: https://stackoverflow.com/questions/25687816/setting-up-a-javascript-variable-from-spring-model-by-usin.. IT/development 2022. 12. 8.

• 

  [bootstrap] bootstrap modal창 띄우기 목차 bootstrap modal 😄 역시 미래의 내가 보기 위해 부트스트랩을 이용해서 모달창을 띄우는 방법을 기록한다. html 코드와 js로 modal을 띄우는 방법이 존재하는데 여기서는 간단하게 html만으로 띄운다. js로 하는 방법은 아래처럼 코드를 수정하면 된다. button에 id값 주고 해당 버튼 클릭 시 $("#모달아이디").modal("show"); 이렇게 이벤트를 준다. 수정 테스트 환경: 부트스트랩 5.2.3버전 수정 버튼을 누르면 id가 "userModal"인 모달창을 띄우는 예제이다. bootstrap.min.css, bootstrap.bundle.min.css 2개의 파일이 필요하니 직접 다운로드 하거나 CDN으로 불러오거나 하면 된다. 아래 링크에서 다운로드 or CDN Do.. IT/development 2022. 12. 8.

• 

  [JavaScript] javascript 동적 엘리먼트에 feather 아이콘 추가 목차 오늘도 역시 미래의 내가 보기 위해 기록을 남긴다. 동적 엘리먼트에 feather 아이콘 추가 😃 feather 아이콘은 처음 사용해봐서 삽질할게 전혀 아니었는데.. 삽질을 좀 했다. 우선 아래처럼 feather.js를 불러온 다음 만든 엘리먼트에 data-feather를 부여 후 script에서 feather.replace()를 호출하면 아이콘이 이쁘게 생긴다. 물론 아이콘은 data-feather에 포함된 것만 된다. home 동적 엘리먼트에 feather를 추가할 경우엔 아래처럼 하면 된다. 내 경우는 아래처럼 해서 아이콘으로 변환되지 않았었다. 당연히 엘리먼트를 그려주는 스크립트 범위안에서 feather.replace()를 해야 한다. reference: https://github.com/f.. IT/development 2022. 12. 2.

• 

  [JavaScript] javascript에서 jstl 사용하기 목차 javascript에서 jstl 사용하기 개발을 하다보면 java에서 받아온 값을 javascript에서 사용해야 될 경우가 종종 있다. 이 때 서버가 동작하는 순서를 이해하고 있는게 중요함 JAVA -> JSTL -> HTML -> javascript 순서로 동작함 그러므로 javascript에서는 jstl의 값을 쓸 순 있지만 jstl에서는 javascript값은 사용할 수 없다. 예를 들어서 java의 List타입의 변수에 담긴 데이터를 jstl을 이용해서 javascript에서 사용하려면 아래처럼 사용하면 됨 참조 : https://lee1535.tistory.com/29 [Javascript/JSTL] javascript안에 JSTL 사용 javascript에서 JSTL LIST 받아오기 .. IT/development 2022. 11. 24.