deepdive [모던 자바스크립트 Deep dive] Study - 10장 객체 리터럴(2)- 프로퍼티, 메서드, 접근,값갱신, 동적 생성, 삭제, 확장기능 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌값 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값 1. 프로퍼티 키 프로퍼티 값에 접근 할 수 있는 이름으로 식별자 역활을 한다. 네이밍 규칙을 준수하지 않으면 번거롭기 때문에 가급적 식별자 네이밍 규칙을 준수하는 프로퍼티 키를 사용하는 것을 권장한다. 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동... jsdeepdivedeepdive [모던 자바스크립트 Deep dive] Study - 9장 타입 변환과 단축 평가 1. 명시적 타입 변환 : 개발자가 의도적으로 값의 타입을 변화하는 것 2. 암묵적 타입 변환 : 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되며, 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다. 문자열 숫자 불리언과 같은 원시 타입 중 하나로 자동 반환한다. 9.2.1 문... jsdeepdivedeepdive [모던 자바스크립트 Deep dive] Study - 10장 객체 리터럴 자바스크립트는 프로토 타입의 객체 기반의 프로그래밍 그래서 자바를 구성하는 거의 "모든 것"이 객체이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모드 객체이다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) => 프로퍼티와 메서드를 통해 상태와 동작을 하나의 단위로 구조화 할 수 있... jsdeepdivedeepdive 모던 자바스크립트-Deep Dive 17,18 [생성자 함수에 의한 객체 생성,함수와 일급 객체] js는 Object 생성자 함수 이외에도 String,Number,Boolean,Function, Array, Date, RegExp, Promise등의 빌트인 생성자 함수를 지원한다. 생성자 함수에 의한 객체 생성 방식의 장점 함수 호출 방식 생성자 함수가 생성할 인스턴스 생성자 함수의 인스턴스 생성 과정 1. 인스턴스 생성과 this 바인딩 암묵적으로 빈 객체(생성자 함수가 생성한 인스턴... deepdive공부deepdive 모던 자바스크립트-Deep Dive 16 [프로퍼티 어트리뷰트] 내부 슬롯과 내부 메서드는 js 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. 이 둘은 ECMAScript 사양에 정의된 대로 구현되어 js 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 없도록 되어있다. 단, 일부 내부 슬롯과 내무 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. js 엔진은 프로퍼티를 생... deepdiveJavaScript심화공부JavaScript심화 모던 자바스크립트-Deep Dive 14,15 [전역 변수의 문제점,let const 키워드와 블록레벨 스코프] 전역 변수의 생명 주기는 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 해제된다. 지역 변수의 경우 함수 몸체의 마지막 문 또는 반환문이 실행될 때 해제된다. 표준 빌트인 객체와 환경에 따른 호스트 객체, var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다. 전역 변수는 생명 주기가 길다. 변수를 검색할 때 전역 변수가 가장 마지막에 검색된다는 것을 의미한다. js의 가장... deepdive공부deepdive 모던 자바스크립트-Deep Dive 20,21 [strict mode,빌트인 객체] 암묵적 전역 // x:10 표준 빌트인 객체 표준 빌트인 객체는 ECMAScript사양에 정의된 객체이므로 js 실행 환경과 관계없이 언제나 사용할 수 있다. 해당 객체는 전역 객체의 프로퍼티로서 제공된다. js 는 Object, String, Number 등 40여 개의 표준 빌트인 객체를 제공한다. Math, Reflect, JSON 을 제 외한 표준 빌트인 객체는 모두 인스턴스를 생성할... deepdive공부deepdive 모던 자바스크립트-Deep Dive 19 [프로토타입] 프로토타입 객체 : 어떤 객체의 상위 객체의 역활을 하는 객체이다. 해당 슬롯에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다. 객체 리터럴 Object.prototype 생성자 함수 생성자 함수의 prototype 프로퍼티에 바인딩된 객체 모든 객체는 proto 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다. 함수 객체... deepdive공부deepdive 모던 자바스크립트-Deep Dive 22,23 [this,실행 컨텍스트] 소스코드의 평가 과정 : 실행 컨텍스트를 생성하고 변수,함수등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다 전역 코드의 변수 선언문과 함수 선언문이 먼저 실행 되고, 그 결과 생성된 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록된다. 2. 전역 코드 실행 4. 함수 코드 실행 실행 컨... deepdive공부deepdive 모던 자바스크립트-Deep Dive 10,11 원시 값을 제외한 나머지(함수,배열,정규 표현식등)은 모두 객체다 원시 값 : 단 하나의 값만 나타내며 변하지 않는 값 객체 : 다양한 값을 하나의 단위로 구성한 복잡한 자료구조이며, 변경이 가능한 값이다. js는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다. 객체 리터럴 Object 생성자 함수 생성자 함수 원시 타입의 값, 즉 원시... deepdive공부deepdive [JS]04_변수 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름 변수는 쉼표로 구분해 하나의 문에서 여러 개를 한번에 선어할 수 있으나 가독성이 나빠짐으로 권장하지 않는다. 🚨 변수 이름은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야 한다. : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 > 값의 위치를 가리키는 상징적인 이름 ... 문법jsdeepdivedeepdive DEEP JS DIVER #18 함수와 일급 객체 함수의 반환값으로 사용할 수 있다. 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다 함수의 반환값으로 사용할 수 있다. 일반 객체는 호출할 수 없지만 함수 객체는 호출할 수 있다. 함수 객체의 데이터 프로퍼티는 arguments, caller, length, name, protype 가 있다. 이들 프로퍼티는 일반 객체에는 없는 함수 객체 고유의 프... deepdivedeepdive Devlog 7일차 입력 1초 기다리고 서버 요청 😤 이 날 이후로 손목보호를 위해서 왼손 마우스로 전향했다. 팀원들의 코드와 진행 상황을 봐주고 저녁부터는 이 부분을 중점적으로 진행했다. 특히 이 기능에 많은 시간을 썼다. 이 기능을 도입하면 불필요한 서버 중복 요청을 줄일 수 있다. 결론부터 이야기하면 useEffect 함수에 바로 async를 씌울 수 없다. 예를 들어 useEffect(async () => { 이런 코드는 안된다. 비동기... DevlogCODESTATESdeepdiveCODESTATES [JS]10_객체 리터럴 ☝🏻 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 프로퍼티를 나열할 때는 쉼표로 구분하며 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 상관없다. 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 -> 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름인 경우 따옴표를 생략할 수... 문법jsdeepdivedeepdive TIL 57일차 Cookie / Session 🍪 스프린트도 쉽지 않았다. Frontend와 Backend 도메인 주소가 다른 경우 Cookie 전달이 되지 않는다. 헤더에 withCredentials: true 옵션으로 보안 통신 중 다른 도메인(Cross) 사이의 쿠키 기능을 활성화한다. withCredentials를 true로 설정하여 얻은 타사 쿠키는 여전히 동일 출처 정책을 따르므로 document.cookie 또는 응답 헤더를 통... TILCODESTATESdeepdiveCODESTATES script - 스코프와 전역변수의 문제점, 그리고 let과 const 모든 식별자는 선언될 때 자신이 선언된 위치에 의해 참조할 수 있는 유효범위가 결정된다. 같은 이름을 가진 식별자라도 스코프에 따라 구별될 수 있다. 함수 내부에서 전역변수와 같은 이름의 지역변수를 선언한 후 그 변수를 참조하면 지역변수가 참조된다. 이유는 JS엔진이 스코프 체인을 통해 참조할 변수를 검색하고 같은 이름 임에도 지역변수가 먼저 참조되기 때문이다. 오직 함수블록 내에서만 선언된... deepdiveJavaScriptTILJavaScript TIL] Deep Dive-let, const 키워드와 블록 레벨 스코프 var 키워드로 선언한 변수는 중복 선언이 가능하다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. let 키워드로 선언한 변수는 모든 코드 블록(함수, if 문, for 문, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다. 따라서... deepdive변수TILTIL 모던 자바스크립트 Deep Dive - 05.표현식과 문 & 수업내용 추가 정리 값은 표현식이 평가되어 생성된 결과를 말한다 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다 표현식이 값이다 변수에는 항상 표현식만 할당될 수 있다 변수에 할당이 가능하다면 표현식 즉 표현식은 값이 될 수 있는 모든 것이다 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 탬플릿 리터럴 큰 차이점은 ${} 이라는 → 보간 표현식 안에 변수를 대입해서 값... deepdiveJavaScriptJavaScript
[모던 자바스크립트 Deep dive] Study - 10장 객체 리터럴(2)- 프로퍼티, 메서드, 접근,값갱신, 동적 생성, 삭제, 확장기능 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌값 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값 1. 프로퍼티 키 프로퍼티 값에 접근 할 수 있는 이름으로 식별자 역활을 한다. 네이밍 규칙을 준수하지 않으면 번거롭기 때문에 가급적 식별자 네이밍 규칙을 준수하는 프로퍼티 키를 사용하는 것을 권장한다. 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동... jsdeepdivedeepdive [모던 자바스크립트 Deep dive] Study - 9장 타입 변환과 단축 평가 1. 명시적 타입 변환 : 개발자가 의도적으로 값의 타입을 변화하는 것 2. 암묵적 타입 변환 : 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되며, 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다. 문자열 숫자 불리언과 같은 원시 타입 중 하나로 자동 반환한다. 9.2.1 문... jsdeepdivedeepdive [모던 자바스크립트 Deep dive] Study - 10장 객체 리터럴 자바스크립트는 프로토 타입의 객체 기반의 프로그래밍 그래서 자바를 구성하는 거의 "모든 것"이 객체이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모드 객체이다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) => 프로퍼티와 메서드를 통해 상태와 동작을 하나의 단위로 구조화 할 수 있... jsdeepdivedeepdive 모던 자바스크립트-Deep Dive 17,18 [생성자 함수에 의한 객체 생성,함수와 일급 객체] js는 Object 생성자 함수 이외에도 String,Number,Boolean,Function, Array, Date, RegExp, Promise등의 빌트인 생성자 함수를 지원한다. 생성자 함수에 의한 객체 생성 방식의 장점 함수 호출 방식 생성자 함수가 생성할 인스턴스 생성자 함수의 인스턴스 생성 과정 1. 인스턴스 생성과 this 바인딩 암묵적으로 빈 객체(생성자 함수가 생성한 인스턴... deepdive공부deepdive 모던 자바스크립트-Deep Dive 16 [프로퍼티 어트리뷰트] 내부 슬롯과 내부 메서드는 js 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. 이 둘은 ECMAScript 사양에 정의된 대로 구현되어 js 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 없도록 되어있다. 단, 일부 내부 슬롯과 내무 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. js 엔진은 프로퍼티를 생... deepdiveJavaScript심화공부JavaScript심화 모던 자바스크립트-Deep Dive 14,15 [전역 변수의 문제점,let const 키워드와 블록레벨 스코프] 전역 변수의 생명 주기는 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 해제된다. 지역 변수의 경우 함수 몸체의 마지막 문 또는 반환문이 실행될 때 해제된다. 표준 빌트인 객체와 환경에 따른 호스트 객체, var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다. 전역 변수는 생명 주기가 길다. 변수를 검색할 때 전역 변수가 가장 마지막에 검색된다는 것을 의미한다. js의 가장... deepdive공부deepdive 모던 자바스크립트-Deep Dive 20,21 [strict mode,빌트인 객체] 암묵적 전역 // x:10 표준 빌트인 객체 표준 빌트인 객체는 ECMAScript사양에 정의된 객체이므로 js 실행 환경과 관계없이 언제나 사용할 수 있다. 해당 객체는 전역 객체의 프로퍼티로서 제공된다. js 는 Object, String, Number 등 40여 개의 표준 빌트인 객체를 제공한다. Math, Reflect, JSON 을 제 외한 표준 빌트인 객체는 모두 인스턴스를 생성할... deepdive공부deepdive 모던 자바스크립트-Deep Dive 19 [프로토타입] 프로토타입 객체 : 어떤 객체의 상위 객체의 역활을 하는 객체이다. 해당 슬롯에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다. 객체 리터럴 Object.prototype 생성자 함수 생성자 함수의 prototype 프로퍼티에 바인딩된 객체 모든 객체는 proto 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다. 함수 객체... deepdive공부deepdive 모던 자바스크립트-Deep Dive 22,23 [this,실행 컨텍스트] 소스코드의 평가 과정 : 실행 컨텍스트를 생성하고 변수,함수등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다 전역 코드의 변수 선언문과 함수 선언문이 먼저 실행 되고, 그 결과 생성된 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록된다. 2. 전역 코드 실행 4. 함수 코드 실행 실행 컨... deepdive공부deepdive 모던 자바스크립트-Deep Dive 10,11 원시 값을 제외한 나머지(함수,배열,정규 표현식등)은 모두 객체다 원시 값 : 단 하나의 값만 나타내며 변하지 않는 값 객체 : 다양한 값을 하나의 단위로 구성한 복잡한 자료구조이며, 변경이 가능한 값이다. js는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다. 객체 리터럴 Object 생성자 함수 생성자 함수 원시 타입의 값, 즉 원시... deepdive공부deepdive [JS]04_변수 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름 변수는 쉼표로 구분해 하나의 문에서 여러 개를 한번에 선어할 수 있으나 가독성이 나빠짐으로 권장하지 않는다. 🚨 변수 이름은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야 한다. : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 > 값의 위치를 가리키는 상징적인 이름 ... 문법jsdeepdivedeepdive DEEP JS DIVER #18 함수와 일급 객체 함수의 반환값으로 사용할 수 있다. 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다 함수의 반환값으로 사용할 수 있다. 일반 객체는 호출할 수 없지만 함수 객체는 호출할 수 있다. 함수 객체의 데이터 프로퍼티는 arguments, caller, length, name, protype 가 있다. 이들 프로퍼티는 일반 객체에는 없는 함수 객체 고유의 프... deepdivedeepdive Devlog 7일차 입력 1초 기다리고 서버 요청 😤 이 날 이후로 손목보호를 위해서 왼손 마우스로 전향했다. 팀원들의 코드와 진행 상황을 봐주고 저녁부터는 이 부분을 중점적으로 진행했다. 특히 이 기능에 많은 시간을 썼다. 이 기능을 도입하면 불필요한 서버 중복 요청을 줄일 수 있다. 결론부터 이야기하면 useEffect 함수에 바로 async를 씌울 수 없다. 예를 들어 useEffect(async () => { 이런 코드는 안된다. 비동기... DevlogCODESTATESdeepdiveCODESTATES [JS]10_객체 리터럴 ☝🏻 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 프로퍼티를 나열할 때는 쉼표로 구분하며 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 상관없다. 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 -> 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름인 경우 따옴표를 생략할 수... 문법jsdeepdivedeepdive TIL 57일차 Cookie / Session 🍪 스프린트도 쉽지 않았다. Frontend와 Backend 도메인 주소가 다른 경우 Cookie 전달이 되지 않는다. 헤더에 withCredentials: true 옵션으로 보안 통신 중 다른 도메인(Cross) 사이의 쿠키 기능을 활성화한다. withCredentials를 true로 설정하여 얻은 타사 쿠키는 여전히 동일 출처 정책을 따르므로 document.cookie 또는 응답 헤더를 통... TILCODESTATESdeepdiveCODESTATES script - 스코프와 전역변수의 문제점, 그리고 let과 const 모든 식별자는 선언될 때 자신이 선언된 위치에 의해 참조할 수 있는 유효범위가 결정된다. 같은 이름을 가진 식별자라도 스코프에 따라 구별될 수 있다. 함수 내부에서 전역변수와 같은 이름의 지역변수를 선언한 후 그 변수를 참조하면 지역변수가 참조된다. 이유는 JS엔진이 스코프 체인을 통해 참조할 변수를 검색하고 같은 이름 임에도 지역변수가 먼저 참조되기 때문이다. 오직 함수블록 내에서만 선언된... deepdiveJavaScriptTILJavaScript TIL] Deep Dive-let, const 키워드와 블록 레벨 스코프 var 키워드로 선언한 변수는 중복 선언이 가능하다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. let 키워드로 선언한 변수는 모든 코드 블록(함수, if 문, for 문, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다. 따라서... deepdive변수TILTIL 모던 자바스크립트 Deep Dive - 05.표현식과 문 & 수업내용 추가 정리 값은 표현식이 평가되어 생성된 결과를 말한다 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다 표현식이 값이다 변수에는 항상 표현식만 할당될 수 있다 변수에 할당이 가능하다면 표현식 즉 표현식은 값이 될 수 있는 모든 것이다 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 탬플릿 리터럴 큰 차이점은 ${} 이라는 → 보간 표현식 안에 변수를 대입해서 값... deepdiveJavaScriptJavaScript