본문 바로가기
10. [Reflect 6~7챕터] 자바스크립트 완전 끝내기: ES6+ 심화 6. getPrototypeof(), setPrototypeof(), ownKeys(), getOwnPropertyDescriptor() Reflect.getPrototypeOf() 정적 메서드는 주어진 객체의 프로토타입을 반환합니다. Object.getPrototypeOf()와 거의 동일합니다. 참고로 Object.getPrototypeOf() 메서드는 지정된 객체의 프로토타입(가령 내부 [[Prototype]] 속성값)을 반환합니다. __proto__ 는 프로토타입을 설정할 수 있다.실제로 Object.getPrototypeOf()를 통해 확인한 프로토타입이 parent와 동일한 것을 보면 알 수 있다. Reflect.setPrototypeOf() 정적 메서드는 주어진 객체의 프로토타입(내부 [[Pr.. 2024. 9. 15.
9. [Reflect 4~5챕터] 자바스크립트 완전 끝내기: ES6+ 심화 4. has(), deleteProperty()Set 객체의 has() 메서드는 이 Set 객체에 주어진 요소가 존재하는지 여부를 판별해 반환합니다. 또한 결국 has는 true 혹은 false을 반환하는 함수라고 결론을 지을 수 있습니다.handler.deleteProperty() 메서드는 delete 연산자에 대한 트랩입니다. Reflect.deleteProperty() 정적 메서드는 속성을 제거할 수 있습니다. delete 연산자의 함수판이라고 할 수 있습니다. 5. defineProperty(), preventExtensions(), isExtensible() Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체.. 2024. 9. 14.
8. [Reflect 2~3챕터] 자바스크립트 완전 끝내기: ES6+ 심화 2. get(): this 참조 오브젝트, Proxy 핸들러의 get() 트랩객체의 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다. 일반적으로 선언 또는 할당으로 지정되는 property는 데이터 프로퍼티이다.let myObj = {str: 'a', num: 1}접근자 프로퍼티는 획득자 함수 get(){}, 설정자 함수set(){} 인데, 객체 외부에서 property를 호출했을 때에는 함수가 아닌 일반 property처럼 보인다. get(){}getter(획득자) 라고도 불린다.property를 읽으려고 할 때 함수를 호출(실행)하여 값을 리턴한다.즉 함수에서 리턴하는 값이 property 값이 된다.let myFriend ={ get name(){ return 'Jin Woo'; }}.. 2024. 9. 13.
7. [Reflect 1챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. Reflect 특징: Reflect 오브젝트, Proxy 사용이번에 배운 것은 Reflect 오브젝트이다.(코드는 다음과 같다.)Reflect 는 중간에서 가로챌 수 있는 JavaScript 작업에 대한 메서드를 제공하는 내장 객체입니다. 메서드의 종류는 프록시 처리기와 동일합니다. Reflect는 함수 객체가 아니므로 생성자로 사용할 수 없습니다. 다른 대부분의 전역 객체와 다르게, Reflect는 생성자가 아닙니다. 따라서 함수처럼 호출하거나 new 연산자로 인스턴스를 만들 수 없습니다. Math 객체처럼, Reflect의 모든 속성과 메서드는 정적입니다.Reflect 객체의 정적 메서드 이름은 프록시 처리기 메서드의 이름과 같습니다. 또한 Reflect는 proxy를 사용할 수 있다.이때 pr.. 2024. 9. 12.
6. [Proxy Trap 5~7챕터] 자바스크립트 완전 끝내기: ES6+ 심화 5. defineProperty(), preventExtensions() , isExtensible() 트랩 Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환합니다. Object.preventExtensions() 메서드는 새로운 속성이 이제까지 객체에 추가되는 것을 방지합니다 (즉 객체의 장래 확장을 막습니다). Object.isExtensible() 메서드는 객체가 확장 가능한지(객체에 새 속성을 추가할 수 있는지 여부)를 결정합니다. 6. getPrototypeof(), setPrototypeof() 트랩 Object.getPrototypeOf() 메서드는 지정된 객체의 프로토타입(가령 내부 [[Pr.. 2024. 9. 11.
5. [Proxy Trap 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. set() 트랩-1: set(), set() 트랩 호출, set() 트랩 준수사항 세트(Set)는 자바스크립트에서 고유한 값들의 집합을 다루는 자료구조이다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있다.세트(set)는 한마디로 순서가 없는 중복되지 않은 데이터의 집합이다. 배열(array)과 차이점을 이해하는 것이 무엇보다 중요하다.배열은 데이터를 순서 있게 저장한다. 그래서 인덱스(index)를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능하다. 그리고 배열에는 동일한 값을 여러 번 저장할 수 있다. 값이 동일하더라도 인덱스가 틀리기 때문에 데이터의 중복이 문제 되지 않는다.반면에 세트는 얼핏 보기에는 배열과 비슷해보일 수 있지만 사실 결이 아주 다른 자.. 2024. 9. 8.
4. [Proxy 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. 기본 오퍼레이션: Proxy란, 기본 오퍼레이션 논리이번에는 proxy를 배워보았다. (오퍼레이션은 연산자를 뜻함.) Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다.let proxy = new Proxy(target, handler)target – 감싸게 될 객체로, 함수를 포함한 모든 객체가 가능하다.handler – 동작을 가로채는 메서드인 '트랩(trap)'이 담긴 객체로, 여기서 프락시를 설정한다.(예시: get 트랩은 target의 프로퍼티를 읽을 때, set 트랩은 target의 프로퍼티를 쓸 때 활성화됨).2. Proxy 논리.. 2024. 9. 7.
3. [Class 6~9챕터] 자바스크립트 완전 끝내기: ES6+ 심화 6. 상속, extends 키워드, 상속 구조, 메소드 오버라이딩이번에는 상속을 배웠다. 자바스크립트에서 상속을 어떻게 하는 것인지 배운 셈이다. 키워드는 extends를 이용해 준다.또한 상속에서는 클래스라는 개념을 사용할 수밖에 없다. 클래스를 명명해 주고 extends 키워드를 이용해서 상속을 구현해 주면 된다.(참고로 oop라는 건 객체 지향 프로그램의 줄임말이다.)이를 기반으로 메소드 오버라이딩을 구현할 수 있다.  오버라이딩(overriding)이란 상속 관계에 있는 부모 클래스에서 이미 정의된 메소드를 자식 클래스에서 같은 시그니쳐를 갖는 메소드로 다시 정의하는 것이다.조건은 다음과 같다.1. 오버라이딩이란 메소드의 동작만을 재정의하는 것이므로, 메소드의 선언부는 기존 메소드와 완전히 같아야.. 2024. 9. 6.
2. [Class 4~5챕터] 자바스크립트 완전 끝내기: ES6+ 심화 4. constructor, constructor 반환constructor가 무엇인지 배웠다. constructor란 "생성자"를 뜻한다.생성자는 인스턴스를 생성하고 초기화하게 만들 수 있다.또한 생성자는 반환도 가능하다.반환을 하고 싶으면 return을 안 작성하면 된다.5. getter, setter, static 메소드, 호이스팅 getter, setter, static 메소드, 호이스팅에 대해 배웠다.객체의 프로퍼티는 두 종류로 나뉜다.첫 번째 종류는 데이터 프로퍼티(data property) 이다. 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다. 데두 번째는 접근자 프로퍼티(accessor property)라 불리는 새로운 종류의 프로퍼티이다. 접근자 프로퍼티의 본질은 함수인데, 이 함수는.. 2024. 9. 5.
1. [Class 1~3챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. 객체 지향 프로그래밍: 객체 구성 요소, 객체의 구체화, 자바스크립트로 OOP 구현첫 챕터에서는 객체의 구성 요소, 객체의 구체화, 자바스크립트로 OOP를 구현하는 것에 대해 알아보았다.기본적으로 자바스크립트는 객체 지향 프로그램이다.2. Class 선언, Class 구조: Class 선언문, Class 표현식두 번째 챕터에서는 클래스의 선언, 구조, 어떻게 선언하는지, 그리고 표현식은 어떻게 되는지 배웠다.참고로 상수와 변수도 배웠다. 상수일 때에는 const, 변수일 때에는 let으로 선언해 주면 된다.그리고, 전체적으로 클래스라는 건 결국 객체를 잘 다루기 위함이라는 것을 기억해야 한다.3. Class 작성 기준, computed name세 번째 챕터에서는 클래스의 작성 기준 그리고 compu.. 2024. 9. 4.
0. 자바스크립트 완전 끝내기: ES6+ 심화 [강좌 소개, 범위] 리액트가 끝나서, 자바스크립트에 대한 심화과정의 강좌를 더 듣게 되었다. 베이스는 리액트라서, 조금은 가벼운 마음으로 듣고자 한다. (그러나 내용은 가볍지 않다...)1. 강좌 소개, 범위: 바이블 강좌, 강좌의 상위 레벨 키워드, 비동기 11단계앞으로 강좌는 어떻게 진행이 될 것인지, 비동기가 무엇인지, 어떤 식으로 단계가 이루어지는지 알려준 강좌였다.2. 강좌 접근, ES6+ 위치, 저서 강좌를 접근할 때 어떤 식으로 접근을 할 건지를 알려주었다.또한 API에 대한 이야기를 많이 할 것이며, API를 가져오고 또 서버에 전송하는 "통신"에 대한 이야기도 한다.결론자바스크립트의 심화버전이며, API에 대한 이야기를 많이 할 것이다. 2024. 9. 2.

티스토리툴바