제이쿼리 비동기 문제 해결

타임리프와 제이쿼리를 함께 사용할 때 발생하는 문제 중 하나는 제이쿼리 코드가 비동기로 추가되어 DOM이 완전히 로드되기 전에 실행될 수 있다는 것입니다. 이는 제이쿼리 코드가 실행되는 시점에 해당하는 HTML 요소가 아직 DOM에 없을 수 있기 때문에 이벤트 핸들러 등이 연결되지 않아 발생할 수 있습니다. 이를 해결하기 위해 몇 가지 접근 방법을 고려할 수 있습니다: 문서 로드 후 실행: 제이쿼리 코드를 HTML 문서가 완전히 로드된 후에 실행하도록 보장해야 합니다. 이를 위해 $(document).ready()나 $(function() {...})와 같은 방법을 사용할 수 있습니다. $(document).ready(function() { // 여기에 제이쿼리 코드 작성 }); 비동기 처리 이후에 실행..

• format_list_bulleted Front-End/JavaScript
• · 2024. 2. 21.
• textsms

[Vue.JS] SpringBoot + Gradle 프로젝트 연동

개인 프로젝트를 진행하기에 앞서 프로젝트 설정 작업 및 언어 선택 등 다양한 선택지와 버전 등 매 순간 선택의 연속이었습니다. 스프링부트 프로젝트를 기반으로 Gradle과 JPA를 활용해서 백엔드(API)를 만들고, 프런트엔드 프레임워크는 Vue 또는 React를 사용하려고 합니다. 백엔드는 Java, SpringBoot로 선택하고 프론트쪽을 Vue로 선택은 했지만 서버에 올릴 때는 각자의 서버 구동 방식이 아닌 하나의 프로젝트에서 SpringBoot의 내장 톰캣의 포트만 사용하고 싶었습니다. 이러한 방식이 가능한지 가능하다면 설정은 어떻게 하는지 원리는 무엇인지 궁금증이 생겨서 이참에 한번 찾아보고 프로젝트 세팅을 해보겠습니다. (하겠다는 건 방법이 있다는 거겠죠? 😘) #1. SPA ? SSR ?! ..

• format_list_bulleted Front-End/Vue
• · 2023. 2. 6.
• textsms

[jQuery] 전체선택/선택해제 구현

전체선택 및 선택해제에 대한 코드를 작성해보도록 하겠습니다. 하나라도 체크해제되면 전체선택 체크도 해제되는 것까지 작성되었습니다. function allCheckFunc( obj ) { $("[name=checkOne]").prop("checked", $(obj).prop("checked") ); } /* 체크박스 체크시 전체선택 체크 여부 */ function oneCheckFunc( obj ) { var allObj = $("[name=checkAll]"); var objName = $(obj).attr("name"); if( $(obj).prop("checked") ) { checkBoxLength = $("[name="+ objName +"]").length; checkedLength = $("[..

• format_list_bulleted Front-End/JavaScript
• · 2023. 2. 4.
• textsms