⚡ 클로저(closure) 클로저(closure)라는 개념은 내부 함수가 외부함수의 스코프(범위)에 접근할 수 있는 것을 말한다. 📝 예제 function outer() { var a = 'A'; var b = 'B'; function inner() { var a = 'AA'; console.log(b); } return inner; } var outerFunc = outer(); outerFunc(); // B 해당 코드에서 inner() 함수의 스코프가 outer()함수의 스코프를 참조하고 있고 outer()의 실행이 끝나고 소멸된 이후에도 inner() 함수가 outer() 함수의 스코프에 접근할 수 있는 것을 클로저라고 한다
자바스크립트는 동적언어이다. 타입은 프로그램이 처리되는 과정에서자동으로 파악한다. ⚡ let, const 사용하는 이유 ES6 이후로 var 대신 되도록 const, let을 사용해야 한다. 그 이유는 var의 변수 호이스팅과 function-level-scope로 생기는 문제 때문이다. 1. 호이스팅(Hoisting) 이란? console.log(puppy); var puppy ="cute"; console.log(puppy) //결과 undefined cute puppy변수를 아직 선언하지 않은 상태에서 호출했는데 오류가 나지 않고 undefined라는 값을 반환한다. 이런 현상을 "호이스팅"이라고 한다. 변수 호이스팅(Hoisting)은 변수의 선언과 초기화가 동시에 이루어져, 아직 값이 없음에도 ..
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..
Javascript만을 활용한 스타일 변경 예제 예제 title 클릭 시 글씨 변경 이미지 클릭 시 다른 이미지로 변경 My Profile 이름 : 도레미 주소 : somewhere 연락처 : 1234-5678 const title = document.querySelector("#title"); const pfImg = document.querySelector("#profile img"); title.onclick = () => (title.innerHTML = "프로필"); pfImg.onclick = () => (pfImg.src = "images/pf2.png");
프로미스란 콜백을 사용했을 때의 복잡함을 피하기 위해, 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); //..
ajax Access-Control-Allow-Origin 문제 response.addHeader("Access-Control-Allow-Origin", "*"); 추가 해주니 정상 작동!!
| 컨트롤러에서 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
브라우저의 하단 창으로 파일다운로드(url 방식) IE에서와 그외 브라우저에서의 방법이 다르다. window.open(data.url, "_blank", "width=100, height=100"); 참고로 data.url 의 값은 window.open(data.url, "_blank", "width=100, height=100"); 이다. if (browserChecker.ie) { // IE일 경우 window.open(data.url, "_blank", "width=100, height=100"); }else{ // 그 외의 브라우저(ex. 크롬, firefox 등) // a태크 생성해서 해당 url을 넣고 클릭 이벤트 발생시켜준다. const link = document.createElement(..
체크박스에 checked된 객체들만 탐색해 가져오는 방법 var oidObj = $("input[name=oid]:checked"); // 체크된 obj를 가져온다. var selectedPartOid = oidObj.val(); // 체크된 value의 값을 가져온다. $.each(oidObj, function(idx) { // idx : 각 객체의 index라고 보면 된다. //console.log( $oid.eq(idx).val() + ' -- ' + $oid.eq(idx).prop("checked")); //let curOid = oidObj.eq(idx).val(); // 각 객체의 순회화며 value값을 가져온다 if($oid.eq(idx).prop("checked") == tr..
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'; ..