뮁이의 개발새발

Chapter 5. 클로저클로저란?어떤 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성화된 시점에 B의 outerEnvironmentReference가 참조하는 대상인 A의 LexicalEnvironment에 접근이 가능하게 됨.이때 A에서는 B에서 선언한 변수에 접근할 수 없지만 B에서는 A에서 선언한 변수에 접근이 가능함내부함수 B가 A의 LexicalEnvironment를 언제나 사용하는것은 아님.내부함수에서 외부 변수를 참조하는 경우에 한해서만 combination이 됨.⇒ 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상// 외부 함수의 변수를 참조하는 내부 함수(1)var outer = function() { var a = 1; var inner = functio..

Chapter 4. 콜백함수콜백함수란?다른 코드의 인자로 넘겨주는 함수ex) 알람을 설정하는 함수(시계의 제어권 X) / 수시로 시간을 확인하는 함수 (시계의 제어권 O)즉 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수제어권var count = 0;var cbFunc = function() { console.log(count); if (++count > 4) clearInterval(timer);};var timer = setInterval(cbFunc, 300);// -- 실행 결과 --// 0 (0.3초)// 1 (0.6초)// 2 (0.9초)// 3 (1.2초)// 4 (1.5초)여기서 setInterval의 구조는 var intervalID = ..

Chapter 3. this this란? 자기 자신이 속한 객체를 가리키는 식별자를 참조할 수 있는 키워드 메서드의 주인이라고 생각하면 편함 JS에서는 함수와 객체의 구분이 느슨하기 때문에, 이 둘을 구분하는 거의 유일한 기능임. 상황에 따라 달라지는 this this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정됨 실행 컨텍스트는 함수를 호출할 때 생성됨 this는 함수가 호출될 때 결정됨 전역 공간에서의 this 전역 객체를 가르킴 브라우저 - window / Node.js - global 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당함 var a = 1; console.log(a); // 1 console.log(window.a) // 1 console.log(this..

Chapter 2. 실행 컨텍스트 1. 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보를 모아놓은 객체 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 위부터 차례대로 실행하게 됨. 실행 컨텍스트를 구성할 수 있는 방법 : 전역공간, eval()함수, 함수 전역 컨텍스트가 콜스택에 담김 자바 스크립트 파일이 열리는 순간 전역 컨텍스트가 활성화됨 순차적으로 수행 outer를 호출하면, outer에 대한 환경 정보를 수집. 실행 컨텍스트 생성하여 콜스택에 넣음 outer과 관련된 내부의 코드를 순차적으로 수행 이후 스택에 쌓인 차례대로 수행 ⇒ 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시..

Chapter 1. 데이터 타입 데이터 타입의 종류 기본형 vs 참조형 기본형 값이 담긴 주솟값을 바로 복제 불변성을 가짐 참조형 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제함. 데이터 타입에 관한 배경지식 메모리의 낭비를 최소화하기 위해, bit와 byte라는 데이터의 단위를 생성함. 그러나, 메모리 용량이 커진 현상황에서 자바스크립트가 등장. 이에 대한 결과로, 숫자는 정수/부동소수형의 구분 없이 8바이트를 확보하게 됨. 형변환 불필요 식별자란? 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명 변수 선언 변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다. 결국, 변수는 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇 변수를 선언하는 순간, 해당 변수의 집주소(식..

[AJAX] - 구현하는 방식 - 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법 - javascript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회. - 동적으로 DOM을 구성해야 하므로 구현이 복잡하다. *일반 요청에 대한 응답 - data를 입력 후 event (보통 submit) 발생 - logic 처리에 대한 결과에 따라 응답 page(html) 생성 => client에 전송 (화면 전환 일어남) *Ajax 요청에 대한 응답 - data를 입력 후 event 발생 - 서버에서 요청을 처리한 후 text, xml 또는 Json으로 응답. - client에서는 이 응답 data를 이용하여 화면 전환없이 동적으로 화면을 재구성 [Javasc..

[반응형 웹 장단점] - 모든 스마트 기기 접속 가능 - 가로모드에 맞추어 레이아웃 변경 가능 - 사이트 유지, 관이 용이 [Bootstrap] - 반응형 디자인을 쉽게 만들 수 있음 *장점 - 사용하기 쉬움 - 반응 형 기능 - 모바일 우선 접근 방식 - 브라우저 호환성 : 모든 최신 브라우저와 호환 가능

[bind()] - 선택된 DOM 객체의 이벤트에 지정한 핸들러를 연결하는 함수 - 동적으로 생성한 DOM 객체에는 적용 X [unbind()] - 객체 이벤트에서 지정한 핸들러를 지운다. [on()] - bind()와 마찬가지로 DOM 객체에 이벤트 핸들러 연결 - 동적으로 생성한 DOM 객체에도 적용 가능 - 이벤트 연결에 가장 기본이 되는 함수로 권장 [off()] - DOM 객체의 이벤트 제거 [one()] - on()->이벤트 실행->off() [keyboard event] - keydown: 키보드 누를 때 발생 - keypress : 글자가 입력될 때 발생 (ex 아이디 중복검사) - keyup : 키보드를 뗄 때 발생 [Window Event] - ready : DOM 객체가 준비되면 발생..