분류 전체보기 108

[JavaScript/DeepDive]24.클로저(1)

[24.1] 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않는다. 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 이것이 바로 렉시컬 스코프다. [24.2] 함수 객체의 내부 슬롯 [[Environment]] 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다. 함수 정의가 평가되어 함수 객체를 생성할 때 자신이 정의된 환경(위치)에 ..

[JavaScript/Deepdive]23.실행 컨텍스트(2)

[23.6] 실행 컨텍스트의 생성과 식별자 검색 과정 전역 객체 생성 전역 객체는 전역 코드가 평가되기 이전에 생성된다. 이때 전역 객체에는 빌트인 전역 프로퍼티와 빌트인 전역 함수, 그리고 표준 빌트인 객체가 추가되며 동작 환경(클라이언트 사이드 또는 서버 사이드)에 따라 클라이언트 사이드 Web API 또는 특정 환경을 위한 호스트 객체를 포함한다. 전역 코드 평가 소스코드가 로드되면 자바스크립트 엔진은 전역 코드를 평가한다. 1. 전역 실행 컨텍스트 생성 먼저 비어있는 전역 실행 컨텍스트를 생성하여 실행 컨텍스트 스택에 푸시한다. 2. 전역 렉시컬 환경 생성 전역 렉시컬 환경을 생성하고 전역 실행 컨텍스트에 바인딩한다. 2.1. 전역 환경 레코드 생성 기존의 var 키워드로 선언한 전역 변수와 ES..

[JavaScript/DeepDive]23.실행 컨텍스트(1)

[23.1] 소스코드의 타입 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다. eval 코드 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다. 모듈 코드 모듈 내부에 존재하는 소스코드를 말한다. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다. [23.2] 소스코드의 평가와 실행 모든..

[JavaScript/DeepDive]22.this

[22.1] this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. // 객체 리터럴 const circle = { radius: 5, ge..

[JavaScript/Node]HTTP 요청 메서드

HTTP 요청 메서드 GET 서버 자원을 가져오고자 할 때 사용합니다. 요청의 본문에 데이터를 넣지 않습니다. 데이터를 서버로 보내야 한다면 쿼리스트링을 사용합니다. POST 서버의 자원을 요청에 들어 있는 자원으로 치환하고자 할 때 사용합니다. 요청의 본문에 치환할 데이터를 넣어 보냅니다. PATCH 서버 자원의 일부만 수정하고자 할 때 사용합니다. 요청의 본문에 일부 수정할 데이터를 넣어 보냅니다. DELETE 서버의 자원을 삭제하고자 할 때 사용합니다. 요청의 본문에 일부 수정할 데이터를 넣어 보냅니다. OPTIONS 요청을 하기전에 통신 옵션을 설명하기 위해 사용합니다. 출처: Node.js 교과서 개정2판

[JavaScript/Node]HTTP 상태 코드

HTTP 상태 코드 2XX 성공을 알리는 상태 코드입니다. 대표적으로 200(성공), 201(작성됨)이 많이 사용됩니다. 3XX 리다이렉션(다른 페이지로 이동)을 알리는 상태 코드입니다. 어떤 주소를 입력했는데 다른 주소의 페이지로 넘어갈 때 이 코드가 사용됩니다. 대표적으로 301(영구 이동), 302(임시 이동)가 있습니다. 304(수정되지 않음)는 요청의 응답으로 캐시를 사용했다는 뜻입니다. 4XX 요청 오류를 나타냅니다. 요청 자체에 오류가 있을 때 표시됩니다. 대표적으로 400(잘못된 요청), 401(권한 없음), 403(금지됨), 404(찾을 수 없음)가 있습니다. 5XX 서버 오류를 나타냅니다. 요청은 제대로 왔지만 서버에 오류가 생겼을 때 발생합니다. 이 오류가 뜨지 않게 주의해서 프로그래..

[JavaScript/DeepDive]21.빌트인 객체

[21.1] 자바스크립트 객체의 분류 표준 빌트인 객체 호스트 객체 사용자 정의 객체 [21.2] 표준 빌트인 객체 자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여 개의 표준 빌트인 객체를 생성한다. Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다. 생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공하고 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공한다. 생성자 함수인..

[JavaScript/Deepdive]20.strict mode

[20.1] strict mode란? strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. [20.2] strict mode의 적용 strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다. 전역의 선두에 추가하면 스크립트 전체에 strict mode가 적용된다. 함수 몸체의 선두에 추가하면 해당 함수와 중첩 함수에 strict mode가 적용된다. 코드의 선두에 'use strict';를 위치시키지 않으면 strict mode가 제대로 동작하지 않는다. [20.3] 전역에 strict mode를 적용하는 ..

[JavaScript/DeepDive]19.프로토타입(3)

[19.9] 프로토타입의 교체 프로토타입은 임의의 다른 객체로 변경할 수 있다. 부모 객체인 프로토타입을 동적으로 변경할 수 있다는 것을 의미한다. 이러한 특징을 활용하여 객체 간의 상속 관계를 동적으로 변경할 수 있다. 프로토타입은 생성자 함수 또는 인스턴스에 의해 교체할 수 있다. 생성자 함수에 의한 프로토타입의 교체 프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다. 프로토타입으로 교체한 객체 리터럴에 constructor 프로퍼티를 추가하여 프로토타입의 constructor 프로퍼티를 되살린다. 인스턴스에 의한 프로토타입의 교체 프로토타입은 생성자 함수의 prototype 프로퍼티뿐만 아니라 인스턴스의 __proto__ 접근자 프로퍼티(또는 Object.get..

[JavaScript/DeepDive]19.프로토타입(2)

[19.4] 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입 생성자 함수에 의해 생성된 인스턴스는 프로토타입의 constructor 프로퍼티에 의해 생성자 함수와 연결된다. 이때 constructor 프로퍼티가 가리키는 생성자 함수는 인스턴스를 생성한 생성자 함수다. // obj 객체를 생성한 생성자 함수는 Object다. const obj = new Object( ); console.log(obj.constructor === Object) // true // add 함수 객체를 생성한 생성자 함수는 Function이다. const add =new Function('a', 'b', 'return a + b'); console.log(add.constructor === Function); //..