fetch 활용 수강생 명단 student-2.json [ { "name" : "도레미", "major" : "컴퓨터 공학", "grade" : 2 }, { "name" : "백두산", "major" : "철학과", "grade" : 1 }, { "name" : "홍길동", "major" : "국문학과", "grade" : 3 } ] JS fetch('student-2.json') .then(response => response.json()) .then(json => { let output= ""; json.forEach(student => { output += ` ${student.name} 전공: ${student.major} 학년: ${student.grade} `; }); document.quer..
프로미스란 콜백을 사용했을 때의 복잡함을 피하기 위해, ES6부터 "프로미스(promise)" 등장 프로미스는 객체를 생성(제작)하는 부분과소비하는 부분으로 나뉜다. 프로미스 제작 코드에서 '성공'과 '실패'를 확인한 후 소비 코드로 알려준다 프로미스 체이닝 then()을 사용해 여러 개의 프로미스를 연결하는 것을 '프로미스 체이닝' 이라고 한다. 프로미스는 resolve와 reject를 사용해서 성공과 실패에 대한 동작을 명확하게 구별할 수 있고, 함수에 계속해서 함수를 포함시키지 않기 때문에 콜백 지옥을 벗어날 수 있는 좋은 방법이다. 예) A,B,C 각 실행 시간이 다르지만 A작업이 끝날 때까지 기다렸다가 B작업을 하고, 다시 B작업이 끝날 때 까지 기다렸다가 C작업을 해아 한다면? 프로미스 체이닝..
Date 함수 활용 let now = new Date(); let year = now.getFullYear(); let month = now.getMonth() + 1; let day = now.getDate(); console.log('now =', now); // Date Sun Mar 12 2023 20:59:40 GMT+0900 (대한민국 표준시) console.log(year); // 2023 console.log(month); // 3 console.log(day); // 12 예제) 'yyyy-mm-dd' 형태로 출력 let nowDate = year + '-' + month.toString().padStart(2,0) + '-' + day.toString().padStart(2,0); //..
💻 MDN Web DOC https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match String.prototype.match() - JavaScript | MDN The match() method retrieves the result of matching a string against a regular expression. developer.mozilla.org 💻 특정 문자 포함여부 체크 var telValue = $('#tel').val(); if ( telValue.match("-")) { alert('-을 제거해주세요.'); return false; }
| 체크박스에 체크된 obj들 조회하여 value 가져오기 // 체크된 obj들 조회하여 value 가져오기 $("input[name=partChk]:checked").each(function() { console.log($(this).val()); }) | 체크박스 전체 선택/해제 $("input[name=partChk]").prop("checked", false); //전체 해제 $("input[name=partChk]").prop("checked", true); // 전체 선택 | 체크박스 중복값 있는지 체크 var duplicatedList = new Array(); //이미 추가된 모든 checkbox 조회하여 순회 $(opener.document).find("input[name=partChk]..
| 컨트롤러에서 HashMap으로 받은 내용을 Javascript에서 key, value로 출력하는 방법 //checkedList는 Controller에서 HashMap으로 전달받은 데이터이다. var checkedList = data.checkedList; Object.keys(checkedList).forEach(key => { var mKey = key; // key var mValue = checkedList[key]; // value console.log('key -- ' , key); // 7210000591-4010017668-MSG console.log('value -- ', checkedList[key]); //var mKey = key + "-MSG"; //var mValue = che..
📝 async , defer 이란 async HTML parsing과 병렬적으로 로드가 되는데, 스크랩트를 실행할 때는 파싱이 중단된다. defer HTML parsing과 병렬적으로 로드가 되지만, parsing이 다 끝나고나서 스크립트를 로드한다. 기본적으로 head안에 defer 옵션을 써서 사용하는게 효율적이고 안전하다. | head에 script 포함한 경우 | body 끝부분에 넣을 경우 | head + async | head + defer 참고 URL : https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
목표 : TABLE의 특정 컬럼 클릭 시 해당객체 > 상위객체 > 하위의 7번째 TD컬럼 값 가져오기 $(".partNumber2, .partNumber3").click(function() { console.log(' -- partNumber2 -- '); var selectedObj = $(this); // 해당객체 console.log(selectedObj); var parentObj = selectedObj.parent(); //상위객체 console.log(parentObj); var p = parentObj.find("td:eq(7)").text(); // 하위객체의 td의 7번째 요소 값 가져오기 console.log('p === ' , p); var subObj = document.getEl..
1. JSON.stringify() Object to JSON 클라이언트에서 정보를 처리할 때는 객체를 사용한다. 객체를 JSON 형식으로 저장하거나, JSON형식을 요구하는 서버로 넘기려면 -> 객체를 JSON 형식으로 변환해야 하는데 이것을 직렬화(stringify)라 한다. JavaScript 값이나 객체를 JSON 문자열로 변환 replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다. Object를 JSON으로 변환 const arr = new Array(); arr.push('11'); arr.push('22'); arr.push('33');` const obj = new Object(); obj.name = 'kyhslam'; ..
// $("#테이블명").on("click", "tr", function(){ $("#tempList tbody").on("click", "tr", function(){ alert( $(this).find("td:eq(0)").text() ); alert( $(this).find("td:eq(1)").text() ); }); td:eq(0) -> 선택(클릭)한 row의 첫번째 데이터 -> 컬럼0 td:eq(1) -> 선택(클릭)한 row의 두번째 데이터 -> 컬럼1
Promise : 비동기 처리 방식으로 실행된 결과의 성공과 실패를 관리한는 객체 Promise는 비동기 작업을 여러 개 수행할 때 더욱 진가가 나타난다. 그 이유는 비동기 작업이 순서대로 수행되어야 할 때가 많기 때문이다. 장점 - 콜백 지옥의 문제점 해결 : 비동기 처리를 순서대로 처리할 때 콜백함수처럼 중첩할 필요가 없다. 즉, 소스를 간결하고 직관적으로 작성할 수 있다. - 비동기 처리를 완료한 후 반환값 관리가 쉬움 : 비동기 처리를 종료한 후 반환값을 성공과 실패 모두 then()과 catch()에 전달된 함수를 통해 관리할 수 있다. const promise = new Promise((resolve, reject) => { console.log('doing something...'); set..
JSON (JavaScript Object Notation) 사용법 stringify : Javascript 객체를 텍스트로 변환할 때 사용 parse : 텍스트를 객체로 바꾸는 작업 1. Object to JSON (stringify) let json = JSON.stringify(true); console.log(json); // true // 배열 -> json json = JSON.stringify(['apple', 'banana']); console.log(json); // ["apple","banana"] //객체 선언 const rabbit = { name : 'tori', color : 'white', size : null, birthDate : new Date(), symbol : Sym..