document.addEventListener("DOMContentLoaded", (e) => { ... ... }) Javascript를 처음 배울 때 HTML 내 body의 특정 요소를 조작하기 위해 "DOMContentLoaded" 이벤트 핸들러를 추가하고 그 안에 콜백함수로 원하는 코드를 넣는 식으로 배움. 하지만 body 내에 조작할 요소가 많아지고 코드가 길어지면 "DOMContentLoaded" 이벤트 핸들러가 길어져서 보기가 안 좋음. 이러한 문제를 해결하기 위한 방법으로... 1. 로 작성된 코드가 아닌 defer 속성은 HTML에서 나중에 입력된 스크립트가 항상 먼저 입력된 스크립트를 기다리고, 이전 스크립트가 실행되고 나서 실행됨. ② async 스크립트가 여러 개 있을 때 async..
setTimeout(), setInterval() 함수에서 콜백함수에 매개변수를 전달하는 가장 간단한 방법은 let i = 0; setTimeout(function(j) { console.log(j); }, 1000, i); setTimeout( callback, timeout, arg1, arg2, ... ) 형태로 함수를 작성하는 것이 있음. let i = 0; setTimeout(function(i) { // argument로 i를 지정했으므로 함수 내부에서 i는 지역변수 console.log(i); // 지역변수 i를 참조 }, 1000); 변수 i는 전역변수이기 때문에 arg1, arg2, ...를 입력하지 않고, 콜백함수의 매개변수로 전역변수 i를 지정하면 정상적으로 작동할 것 같음... 하지..
2022.03.29 - [Javascript] - Call Stack, Queue, Event Loop javascript는 기본적으로 동기적으로 코드를 실행하기 때문에 코드 한 줄의 실행이 끝나야 다음 줄로 넘어가는 방식으로 작동함. 하지만 서버에서 대용량의 데이터를 받아오는 코드가 있을 경우, 해당 코드가 끝나기 전에는 프로그램 사용이 불가한 문제가 있으므로 하나의 일을 하면서 동시에 다른 일도 할 수 있도록 비동기적으로 코드를 실행할 필요가 생김. javascript에서 비동기적으로 작동하는 대표적인 함수에는 setTimeout(), setInterval()이 있음. 서버에서 데이터를 받아오는 fetch()나 타이머 API setTimeout(), setInterval() 등의 함수는 기본적으로 비..
1. JavaScript Engine 웹페이지에 JavaScript 파일을 로드하고 각각의 코드를 파싱해 실행하는 프로그램(인터프리터)으로, 크롬의 V8, 파이어폭스의 라이노, 사파리의 웹킷이 대표적인 자바스크립트 엔진. A. Call Stack 실행 중인 함수, 해당 함수의 지역 변수와 arguments 등 정적 데이터를 담고 있는 메모리 공간으로 가장 나중에 들어온 작업이 가장 처음에 나가는 방식(Last in, Fisrt out)으로 작동함. function foo(b) { let a = 10; return a + b + 11; } function bar(x) { let y = 3; return foo(x * y); } const baz = bar(7); bar() 함수가 실행되면 함수 bar()..
localStorage SessionStorage 특징 데이터를 브라우저 상에 저장해 새로고침을 해도 데이터가 보존됨 데이터 유지 조건 동일한 PC, 브라우저, 프로토콜 하나의 탭 key, value 저장 형태 문자열(DOMString) 문자열(DOMString) window.localStorage https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage localStorage.setItem('key', 'value'); // key - value 쌍 저장 방법 주의할 점 localStorage, sessionStorage 모두 key, value 쌍을 문자열로 저장하므로 객체를 저장하면 객체의 프로토타입이 모두 손실됨 const arr = [..
2022.03.24 - [Javascript] - (2022. 3. 24.) 유사 배열(Array-like) const divs = document.querySelectorAll('div'); let arr = [] Array.prototype.forEach.call(divs, (element, index) => { arr.push(element.innerText) }) console.log(arr) // ["내용1", "내용2", "내용3", ... ] Function.prototype.call() 메서드를 이용해서 유사 배열에서 배열의 메서드를 사용할 수 있음. 하지만 Array.prototype.forEach() 메서드에도 this를 매개변수(thisArg)로 넣을 수 있는데 두 방법의 차이에 대해..
1. This Javascript는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체를 동적으로 결정함. 동일한 함수라 하더라도 함수를 호출할 때마다 달라질 수 있음. this 비고 전역에서 선언된 변수 window 함수 window 내부함수 지정되지 않음 외부함수가 일반, 메서드, 콜백이든 상관없이 객체 메서드 해당 객체 new를 이용한 생성자 함수 호출 생성자 함수로 생성된 객체 화살표 함수 상위 스코프의 this A. 일반 함수, 객체 메서드 var age = 100; let ken = { age: 35, foo: function bar() { console.log(this.age); } }; let wan = { age: 31, foo: ken.foo } let foo ..
① 배열은 아니지만: 배열의 메서드를 사용할 수 없음 ② 배열의 특성을 갖는 객체 - 숫자로 인덱싱이 되어 있고(0, 1, 2, ...) - length 프로퍼티를 가지고 있음: length 프로퍼티가 없다면 유사 배열로 인식하지 않음 const arrLike = { // 유사배열의 예 0: "내용1" 1: "내용2" 2: "내용3" 3: "내용4" length: 4 } document.querySelectorAll 메서드를 이용해 결과로 얻은 객체는 [[Prototype]]이 Array가 아닌 것에서 알 수 있듯이 유사 배열이므로 Array의 매서드를 사용할 수 없음. ES6부터 NodeList에 forEach 메서드가 추가되었기 때문에 forEach 사용이 가능하지만 IE에서는 NodeList.pro..
2022.03.07 - [HTML, CSS] - (2022. 3. 7.) document.addEventListener() 위 글에서 document.addEventListener는 document 내부에 있는 모든 요소에 대해 반응함을 알 수 있음. document 이벤트가 내부의 요소와 요소의 이벤트에 반응했던 이유는 이벤트 위임(Event Delegation) 때문. 1. 이벤트의 발생 단계 1. 캡처링 단계(Capture Phase): 이벤트가 DOM tree 하위 노드로 전파되는 단계 ※ addEventListener의 capture 옵션 기본값이 false이므로 캡처링 단계에서는 이벤트 발생되지 않음 2. 타겟 단계(Target Phase): 이벤트가 실제 타겟 노드에 전달되는 단계 * 타겟 ..
1. 클로저(Closure) 선언된 당시의 환경(lexical environment)을 기억하여 그 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수들의 조합. 즉, 1. 어떠한 함수에 내부 함수가 존재하면서, (외부함수에 의해 return된 함수일 필요는 없음) 2. 그 내부함수가 호출된 위치가 아닌, 자신이 선언된 위치에서의 scope를 참조하는 함수가 존재 (자신의 scope + 외부함수의 scope를 가짐) 2022.03.09 - [Javascript] - 변수의 선언(const, let, var)과 Scope // 1. 클로저의 예시 function outer1() { let x = 1; return function (y) { return y + x }; } // 2. 클로저가 아님! fu..
JavaScript 2022. 4. 15. 21:10
document.addEventListener("DOMContentLoaded", (e) => { ... ... }) Javascript를 처음 배울 때 HTML 내 body의 특정 요소를 조작하기 위해 "DOMContentLoaded" 이벤트 핸들러를 추가하고 그 안에 콜백함수로 원하는 코드를 넣는 식으로 배움. 하지만 body 내에 조작할 요소가 많아지고 코드가 길어지면 "DOMContentLoaded" 이벤트 핸들러가 길어져서 보기가 안 좋음. 이러한 문제를 해결하기 위한 방법으로... 1. 로 작성된 코드가 아닌 defer 속성은 HTML에서 나중에 입력된 스크립트가 항상 먼저 입력된 스크립트를 기다리고, 이전 스크립트가 실행되고 나서 실행됨. ② async 스크립트가 여러 개 있을 때 async..
JavaScript 2022. 3. 30. 16:31
setTimeout(), setInterval() 함수에서 콜백함수에 매개변수를 전달하는 가장 간단한 방법은 let i = 0; setTimeout(function(j) { console.log(j); }, 1000, i); setTimeout( callback, timeout, arg1, arg2, ... ) 형태로 함수를 작성하는 것이 있음. let i = 0; setTimeout(function(i) { // argument로 i를 지정했으므로 함수 내부에서 i는 지역변수 console.log(i); // 지역변수 i를 참조 }, 1000); 변수 i는 전역변수이기 때문에 arg1, arg2, ...를 입력하지 않고, 콜백함수의 매개변수로 전역변수 i를 지정하면 정상적으로 작동할 것 같음... 하지..
JavaScript 2022. 3. 29. 22:10
2022.03.29 - [Javascript] - Call Stack, Queue, Event Loop javascript는 기본적으로 동기적으로 코드를 실행하기 때문에 코드 한 줄의 실행이 끝나야 다음 줄로 넘어가는 방식으로 작동함. 하지만 서버에서 대용량의 데이터를 받아오는 코드가 있을 경우, 해당 코드가 끝나기 전에는 프로그램 사용이 불가한 문제가 있으므로 하나의 일을 하면서 동시에 다른 일도 할 수 있도록 비동기적으로 코드를 실행할 필요가 생김. javascript에서 비동기적으로 작동하는 대표적인 함수에는 setTimeout(), setInterval()이 있음. 서버에서 데이터를 받아오는 fetch()나 타이머 API setTimeout(), setInterval() 등의 함수는 기본적으로 비..
JavaScript 2022. 3. 29. 22:08
1. JavaScript Engine 웹페이지에 JavaScript 파일을 로드하고 각각의 코드를 파싱해 실행하는 프로그램(인터프리터)으로, 크롬의 V8, 파이어폭스의 라이노, 사파리의 웹킷이 대표적인 자바스크립트 엔진. A. Call Stack 실행 중인 함수, 해당 함수의 지역 변수와 arguments 등 정적 데이터를 담고 있는 메모리 공간으로 가장 나중에 들어온 작업이 가장 처음에 나가는 방식(Last in, Fisrt out)으로 작동함. function foo(b) { let a = 10; return a + b + 11; } function bar(x) { let y = 3; return foo(x * y); } const baz = bar(7); bar() 함수가 실행되면 함수 bar()..
JavaScript 2022. 3. 28. 16:26
localStorage SessionStorage 특징 데이터를 브라우저 상에 저장해 새로고침을 해도 데이터가 보존됨 데이터 유지 조건 동일한 PC, 브라우저, 프로토콜 하나의 탭 key, value 저장 형태 문자열(DOMString) 문자열(DOMString) window.localStorage https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage localStorage.setItem('key', 'value'); // key - value 쌍 저장 방법 주의할 점 localStorage, sessionStorage 모두 key, value 쌍을 문자열로 저장하므로 객체를 저장하면 객체의 프로토타입이 모두 손실됨 const arr = [..
JavaScript 2022. 3. 26. 18:14
2022.03.24 - [Javascript] - (2022. 3. 24.) 유사 배열(Array-like) const divs = document.querySelectorAll('div'); let arr = [] Array.prototype.forEach.call(divs, (element, index) => { arr.push(element.innerText) }) console.log(arr) // ["내용1", "내용2", "내용3", ... ] Function.prototype.call() 메서드를 이용해서 유사 배열에서 배열의 메서드를 사용할 수 있음. 하지만 Array.prototype.forEach() 메서드에도 this를 매개변수(thisArg)로 넣을 수 있는데 두 방법의 차이에 대해..
JavaScript 2022. 3. 24. 21:43
1. This Javascript는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체를 동적으로 결정함. 동일한 함수라 하더라도 함수를 호출할 때마다 달라질 수 있음. this 비고 전역에서 선언된 변수 window 함수 window 내부함수 지정되지 않음 외부함수가 일반, 메서드, 콜백이든 상관없이 객체 메서드 해당 객체 new를 이용한 생성자 함수 호출 생성자 함수로 생성된 객체 화살표 함수 상위 스코프의 this A. 일반 함수, 객체 메서드 var age = 100; let ken = { age: 35, foo: function bar() { console.log(this.age); } }; let wan = { age: 31, foo: ken.foo } let foo ..
JavaScript 2022. 3. 24. 21:18
① 배열은 아니지만: 배열의 메서드를 사용할 수 없음 ② 배열의 특성을 갖는 객체 - 숫자로 인덱싱이 되어 있고(0, 1, 2, ...) - length 프로퍼티를 가지고 있음: length 프로퍼티가 없다면 유사 배열로 인식하지 않음 const arrLike = { // 유사배열의 예 0: "내용1" 1: "내용2" 2: "내용3" 3: "내용4" length: 4 } document.querySelectorAll 메서드를 이용해 결과로 얻은 객체는 [[Prototype]]이 Array가 아닌 것에서 알 수 있듯이 유사 배열이므로 Array의 매서드를 사용할 수 없음. ES6부터 NodeList에 forEach 메서드가 추가되었기 때문에 forEach 사용이 가능하지만 IE에서는 NodeList.pro..
JavaScript 2022. 3. 16. 21:28
2022.03.07 - [HTML, CSS] - (2022. 3. 7.) document.addEventListener() 위 글에서 document.addEventListener는 document 내부에 있는 모든 요소에 대해 반응함을 알 수 있음. document 이벤트가 내부의 요소와 요소의 이벤트에 반응했던 이유는 이벤트 위임(Event Delegation) 때문. 1. 이벤트의 발생 단계 1. 캡처링 단계(Capture Phase): 이벤트가 DOM tree 하위 노드로 전파되는 단계 ※ addEventListener의 capture 옵션 기본값이 false이므로 캡처링 단계에서는 이벤트 발생되지 않음 2. 타겟 단계(Target Phase): 이벤트가 실제 타겟 노드에 전달되는 단계 * 타겟 ..
JavaScript 2022. 3. 12. 15:45
1. 클로저(Closure) 선언된 당시의 환경(lexical environment)을 기억하여 그 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수들의 조합. 즉, 1. 어떠한 함수에 내부 함수가 존재하면서, (외부함수에 의해 return된 함수일 필요는 없음) 2. 그 내부함수가 호출된 위치가 아닌, 자신이 선언된 위치에서의 scope를 참조하는 함수가 존재 (자신의 scope + 외부함수의 scope를 가짐) 2022.03.09 - [Javascript] - 변수의 선언(const, let, var)과 Scope // 1. 클로저의 예시 function outer1() { let x = 1; return function (y) { return y + x }; } // 2. 클로저가 아님! fu..