javascript36

• 

  [JavaScript] selectbox 동적 표시 상위 선택값에 따라 하위 선택값이 다르게 표시되어야 되는 경우가 있다. 예를 들면 아래와 같은 상황이다. 광역지자체에 따라 그 하위 지자체 목록이 표시 1번 selectbox 선택 데이터를 조건으로 서버에서 데이터를 조회 후 2번 selectbox를 동적으로 그려야 한다. 상위 selectbox에 onchagne() 이벤트를 걸어서 데이터 변경이 감지될 때마다 서버에서 데이터를 가져와서 하위 selectbox의 option값을 그린다. 관리 광역지자체 관리 기초지자체 전체 function fn_get_LocalGovInstCode(){ //광역지자체코드 var selectedValue = $("#mngWideAreaLocgovCd").val(); $.ajax({ url: '/locgov/selectLoc.. IT/development 2024. 1. 21.

• [jQuery] 전체 체크박스 체크 테이블의 th의 체크박스 선택 시 tbody의 td의 checkbox를 전체 체크하는 간단한 예제다. 번호 성명 아이디 function fn_chkAll(obj){ if($(obj).is(':checked')){ $('#targetBody').find('input:checkbox[id^=checkbox]').prop('checked', true); }else{ $('#targetBody').find('input:checkbox[id^=checkbox]').prop('checked', false); } } IT/development 2024. 1. 21.

• 

  [JavaScript] 객체 해체 할당(Object Destructuring Assignment)(feat. ES6) ES6부터 지원하는 기능 중 하나인 객체 해체 할당 객체에서 바로 변수에 값을 한번에 할당할 때 사용(코드의 가독성 및 객체의 속성을 더 쉽게 추출) //객체의 구조가 복잡하거나 여러개의 속성을 한번에 추출할 때 유용하게 사용됨 const person = { name: '어흥', age: 50 }; //객체해체할당을 통해 객체의 속성값을 바로 변수에 할당 const { name, age } = person; //변수명 변경도 가능(아래는 person객체의 name값을 uname이라는 변수에 할당하는 예시) //const { name: uname } = person; console.log(name); // '어흥' console.log(age); // 50 //객체 해체 할당 미사용 const person.. IT/development 2023. 10. 4.

• [Vue.js] checkbox 일괄 체크 전체선택 {{ item.name }} checkbox element를 v-model로 data의 items의 isChecked속성과 양방향 바인딩 시킨 후 전체선택 버튼 클릭 시 items를 순회하며 isChecked를 현재 상태와 반대로 설정 IT/development 2023. 9. 24.

• 

  [JavaScript] htmlToPdf convert(feat. html2pdf) 목차 javascript/jQuery 기반 Hello, PDF! This is an example of converting HTML to PDF using html2pdf.js javascript/Vue.js 기반 Hello, PDF! This is an example of converting HTML to PDF using html2pdf.js convert 숨김 항목 PDF 변환 예시 숨김 항목을 버튼 클릭 시 잠시 보이게 해서 PDF 변환 후 다운로드 후 다시 숨김처리 하는 예제 Hello, PDF! This is an example of converting HTML to PDF using html2pdf.js convert 결과 위코드 에디터에 붙여 넣고 실행하면 pdf 다운로드 창 표시됨 ref.. IT/development 2023. 8. 26.

• 

  [JavaScript] 템플릿 문자열 사용법(feat. '(백틱)) javascript에서 템플릿 문자열을 사용해서 더 가독성 높은 코드를 작성 할 수 있다. 위 두 코드는 동일한 기능을 수행한다. 하지만 왼쪽 템플릿 문자열을 사용한 경우 가 더 가독성이 좋다. 변수와 문자열 구분이 잘 된다. 템플릿 문자열은 백틱(`)안에 코드를 작성해야 한다. 백틱은 키보드 1 좌측에 있다. IT/development 2023. 8. 13.

• [JavaScript] 자식 팝업창에서 부모창의 함수 호출(javascript 위주) 부모창에서 자식창을 아래처럼 팝업으로 열었음(html 코드는 생략) parent.html //버튼 클릭 시 child라는 팝업 호출 $("#btn").on("click", function() { //팝업 호출(openPopUp()이라는 공통함수에서는 팝업 호출한다고 가정) const popup = openPopUp("/child", 1100, 700, "child"); }); //자식 팝업에서 호출하는 함수(자식창에서 넘어온 사업자번호, 고객명을 부모의 필드에 적용) function chooseClient(clientBizNo, clientNm) { $("#clientBizNo").val(clientBizNo); $("#projClientNm").val(clientNm); } child.html /** .. IT/development 2023. 8. 13.

• [Vue.js] 기존 thymeleaf에 Vue.js 적용하는 방법 2가지 방법 존재 node.js 환경으로 구동(node.js 런타임 환경 필요, 서비스 구동 시 서버와 port 다르게 구성) 기존 thyemeleaf파일에 script만 추가(thyemelaf 렌더링 이후 조작하는 방식이라 node.js 불필요) 여기선 2번 째 방법 채택 기존 html의 body 태그안에 Vue.js 관련 script import(실제 배포 시엔 js파일 직접 import 권장) vue.js를 입힐 div root id 설정(예시) 주소록 사원명 검색 초기화 사원 목록 사원승인 신청 순번 사원명 직급 직책 전화번호 이메일 {{ item.no }} {{ item.empNm }} {{ item.positionCd }} {{ item.roleCd }} {{ item.empHp }} {{ i.. IT/development 2023. 8. 10.

• 

  [Vue.js] 콜백 함수에서 this 사용 시 유의점 ※ 일반적으로 javascript에서 this는 사용하는 상황에 따라 다른 객체를 가리킴 ex)뷰 인스턴스의 methods 객체의 함수 내 콜백함수에서 인스턴스의 data 객체 값을 세팅하는 로직 Vue 인스턴스 new Vue({ //element id el: '#project-client-req', //vue에서 관리할 데이터 data: { client: { clientBizNo: '', //사업자등록번호 clientNm: '', //상호 clientZipNo: '', //우편번호(주소검색 API로 세팅) clientBasAddr: '', //기본주소(주소검색 API로 세팅) clientDtlAddr: '' //상세주소 } }, methods: { //주소 검색 searchAddr() { let add.. IT/development 2023. 8. 10.

• 

  [Vue.js] modal창 데이터 바인딩 안될 때 문제: modal 표시 시 ajax로 데이터는 가져오지만 바인딩이 되지 않음 환경: thyemelaf 파일에 vue.js를 적용(별도 node.js 환경 X) thymeleaf파일에 vue.js를 적용한 경우에 modal창에 아래처럼 바인딩이 안된 경우가 있었다. 원인은 간단했다. 기존 thyemelaf파일에서는 아래처럼 전체를 나타내는 div 영역 밖에 모달창 div가 있었음 기존에는 javascript/jQuery로 페이지 로드 후 DOM에 직접 접근해서 작업해서 문제가 안되었음 하지만 vue.js에서는 root element안에 모달영역이 포함되어 있어야 vue.js의 인스턴스와 연결되어 vue.js의 바인딩 기능 사용 가능(vue.js에서는 DOM에 직접 접근하는 일이 거의 없음) 위 코드처럼 m.. IT/development 2023. 8. 6.