javascript43 [axios] axios ๋น๋๊ธฐ ํต์ ๋ชฉ์ฐจ์ํ ์ฝ๋function callAPI(e) { e.preventDefault(); const url = 'api.test.com'; axios.post(url, { param: //๋ฐ์ดํฐ ์์ผ๋ฉด.. ๋ฃ๊ธฐ }) // ์ ์์ธ ๊ฒฝ์ฐ .then((response) => { if (response.data.success) { location.href = "/"; } }) // ์์ธ ๋ฐ์ .catch((error) => { console.error('๋ฐ์ดํฐ ์ฒ๋ฆฌ .. IT/development 2025. 1. 19. [jQuery] ์ฒดํฌ ์ด๋ฒคํธ ๊ฐ์ ๋ฐ์ ์ํค๊ธฐ ๋ชฉ์ฐจํ๋ฉด์ ์ฒดํฌ๋ฐ์ค๊ฐ 2๊ฐ ์๊ณ , ์ฒดํฌ๋ฐ์ค์ change ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ์ฌ ๋ ์ฒดํฌ๋ฐ์ค๊ฐ ๋ชจ๋ ์ฒดํฌ๋์์ ๋๋ง ๋ฒํผ์ ํ์ฑํ์ํค๋ ๊ธฐ๋ฅ์ด ์๋ค.๊ทธ๋ฐ๋ฐ, ์ฌ์ฉ์๊ฐ ์ง์ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ฒดํฌํ์ ๋๋ ์ด๋ฒคํธ๊ฐ ์ ๊ฐ์ง๋์์ง๋ง, ํจ์ ํธ์ถ๋ก ๋์ ์ผ๋ก ์ฒดํฌ๋ฐ์ค๋ฅผ ์ฒดํฌํ ๊ฒฝ์ฐ๋ ๊ฐ์ง๋์ง ์๋ ๋ฌธ์ ๊ฐ ์์๋ค.์ด์ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฒดํฌ๋ฐ์ค๋ฅผ ๋์ ์ผ๋ก ์กฐ์ํ๋ฉด ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ง ์๊ธฐ ๋๋ฌธ์ ๊ทธ๋ ๋ค.๊ทธ๋์ trigger.('์ด๋ฒคํธ๋ช ')์ผ๋ก ์ด๋ฒคํธ๋ฅผ ๊ฐ์ ๋ก ๋ฐ์์์ผ ํด๊ฒฐ ํ๋ค.์์ ์ function check(checkId, target) { document.getElementById(target).classList.add('d-none'); $("#" + checkId).prop('checked', true); .. IT/development 2025. 1. 11. [javascript] javascript this javascript์์์ this์ ๋ํด ์์งํด๋ณด์๋ค.(ํจ์ ํธ์ถ ๋ฐฉ์์ ์ํด ๊ฒฐ์ ๋๋ this)refrerence: https://www.youtube.com/watch?v=tDZROpAdJ9w&t=754s IT/development 2024. 6. 1. [development] chrome development tool debugging 1 ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ ์กฐ๊ฑด ์ค๋จ์ ๊ฑธ๊ธฐ(ํน์ ์กฐ๊ฑด์ผ ๋๋ง ๋ธ๋ ์ดํฌ ํฌ์ธํธ ํ์ฑํ)๋ ์ด์ ๋ฃจํ๋ฌธ ๋ธ๋ ์ดํฌํฌ์ธํธ์์ i๋ฅผ ์๋์ผ๋ก ๊ณ์ ์ฆ๊ฐ ์ํค์ง ์์๋ ๋๋ค. IT/development 2024. 6. 1. [JavaScript] ๋ค์ค select ์์(feat. ์ง์ญ์ฝ๋) ๊ฐ๋ฐ์ปจ์ ์ ์๋์ ๊ฐ๋ค. ๊ฐ๋ฐ ์ปจ์ ์ ๋ ํธ๋ฐ์ค 2๊ฐ ์กด์ฌ - ๊ด์ญ์ง์์ฒด - ๊ธฐ์ด์ง์์ฒด ํ์ด์ง ๋ก๋ ํ์๋ ๊ด์ญ์ง์์ฒด ๋ฐ์ดํฐ๋ง ์๋ ์ํ๊ณ ๊ธฐ์ด์ง์์ฒด ๋ฐ์ดํฐ๋ ์๋ ์ํ ๊ด์ญ์ง์์ฒด ์ ํ ์ ํด๋น ์ฝ๋์ ํด๋น๋๋ ๊ธฐ์ด์ง์์ฒด ๋ฐ์ดํฐ๊ฐ ๊ธฐ์ด์ง์์ฒด selectbox์ ์ธํ ๋จ ๊ด์ญ์ง์์ฒด์์ ๋ค์ ์ ํ์ ๋๋ฅด๋ฉด ๊ธฐ์ด์ง์์ฒด๋ ๋ค์ ๋ฐ์ดํฐ ์ด๊ธฐํ๋จ ์ง์์ฒด ์ ํ ํ ๊ฒ์ ์ด๋ฒคํธ ๋ฐ์ ์ ์ ํํ ๊ด์ญ์ง์์ฒด, ๊ธฐ์ด์ง์์ฒด์ฝ๋๊ฐ selected๋จ script $(document).ready(function () { //๊ด์ญ์ง์์ฒด์ฝ๋ ์ธํ cf_L_inst_option('serachInstL'); //๊ฒ์ํ ๊ด์ญ ์ง์์ฒด์ฝ๋(jsp๋ผ์ jstl ๋ฌธ๋ฒ ์ฌ์ฉ) var serachUpperInstL = ''; if (serachUpper.. IT/development 2024. 3. 1. [Chart.js] ํต๊ณ ๋ฐ์ดํฐ ์ฐจํธ ์์ฑ (feat. ์์ด์จ) ๋ชฉ์ฐจ DB์์ ํต๊ณ ์ฟผ๋ฆฌ ์คํ ํ ๋ฐ์ดํฐ๋ฅผ ํ๋ฉด๋จ์์ ์ฐจํธ๋ก ํ์ํ๋ ๊ฐ๋จํ ์์ xml SELECT DATE_FORMAT(FRST_REG_DT, '%M') AS cond/*์กฐ๊ฑด*/ , COUNT(RVW_RSLT_CD) AS totalCnt /*์ ์ฒด*/ , COUNT(CASE WHEN RSLT_CD = '10' THEN 1 END) AS passedCnt /*์ฐฌ์ฑ*/ , COUNT(CASE WHEN RSLT_CD = '20' THEN 1 END) AS rejectedCnt/*๊ฑฐ์ */ FROM BOARD GROUP BY DATE_FORMAT(FRST_REG_DT, '%Y-%m') ORDER BY DATE_FORMAT(FRST_REG_DT, '%Y-%m') service public Map selectSta.. IT/development 2024. 3. 1. [jQuery] ๊ณตํต์ผ๋ก ์ ํ์ ์ฒ๋ฆฌ ๋ชฉ์ฐจ ๊ฑฐ์ฐฝํ ๊ฑด ์๊ณ ๋งค๊ฐ๋ณ์๋ก ๋๊ธด ๋ฌธ์์ด ์์ "#"๋ฅผ ๋ถ์ฌ์ ์์ด๋ ์ ํ์๋ก ๋ง๋ค์ด์ ์ฒ๋ฆฌํ๋ค. ์์ค๋ฅผ ๋ณด๋ฉด ๋ฐ๋ก ์ดํด๊ฐ ๋๋ค. html ์๋จ ํญ์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์คฌ๊ณ 2๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ๋๊ธด๋ค. ์ ์ฒด๋ฉ๋ด ์ธ๊ธฐ๋ฉ๋ด ํน๋ณ๋ฉ๋ด script ๊ตฌ๋ถ์๋ฅผ ๋ฐ์์ ์๋ฒ๋ก ๋๊ฒจ์ ๊ตฌ๋ถ์์ ํด๋น๋๋ ๋ฐ์ดํฐ๋ฅผ ์กฐํ, tartget id๋ช ์ ๋ฐ์์ "#"๋ฅผ ๋ถ์ฌ ์ ํ์๋ก ์ฒ๋ฆฌ, ์ด๋ฌ๋ฉด function ์ฌ๋ฌ๊ฐ ๋ง๋ค ํ์ ์์ด ์ function ํ๋๋ก ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค.(ํ๋ฉด์์ ํ๋์ ํ ์ด๋ธ๋ง ๋ฐ๋ผ๋ณด๊ณ ํ ์ด๋ธ์ ๊ตฌ๋ถ์ ์ปฌ๋ผ์ด ์์) ๋๊ตฌ๋ ์๊ณ ์์ ์ ์์ง๋ง ๊ทธ๋๋ ๋ฉ๋ชจํ๋ค. function getMenuList(gubun, target) { $.ajax({ url: '/info/selectMenuList.do', ty.. IT/development 2024. 1. 21. [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. ์ด์ 1 2 3 4 5 ๋ค์