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. ์ด์ 1 2 3 4 ๋ค์