전체 글
[DeepDive] - 23장(실행 컨텍스트) 필요 내용 정리
실행 컨텍스트 소스 코드의 4가지 타입 소스 코드를 4가지로 구분하는 이유: 소스 코드 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리가 다르기 때문이다. 전역 코드: 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X, 전역 실행 컨텍스트 생성 함수 코드: 함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등의 내부 코드 포함 X, 함수 실행 컨텍스트 생성 eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드, eval 실행 컨텍스트 생성 모듈 코드: 모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등의 내부 코드는 포함 X, 모듈 실행 컨텍스트 생성 소스 코드의 평가, 실행 JS 엔진은 평가와 실행 단계를 거쳐..
[DeepDive] - 20장(strict mode), 21장(빌트인 객체) 필요 내용 정리
strict mode ES5부터 도입된 기능으로, JS 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 JS 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 에러를 발생시킨다. 암묵적 전역: 선언하지 않은 변수를 참조할시, ReferenceError 발생 변수, 함수, 매개변수의 삭제: delete 연산자로 변수, 함수, 매개변수 삭제시 SyntaxError 발생 매개변수 이름 중복: 중복된 매개변수 이름 사용시 SyntaxError 발생 with 문의 사용: 전달된 객체를 스코프체인에 추가하지만, 성능과 가독성이 나쁘므로 사용하지 않는것을 권장 strict mode를 적용하기 위해서, 전역의 선두 혹은 함수 몸체의 선두에 use strict; text를 추가한다. // t..
TIL | React + twin.macro(with styled-component) 세팅
Twin? tailwind와 css-in-js를 혼용을 가능케 하는 css 라이브러리 Setting Install npm install twin.macro tailwindcss styled-components # or yarn add twin.macro tailwindcss styled-components # 추가적으로 @emotion/styled @emotion/react도 설치가 필요하다. yarn add @emotion/styled @emotion/react GlobalStyles 설정 import { createGlobalStyle } from "styled-components"; import tw, { GlobalStyles as BaseStyles } from "twin.macro"; cons..
[DeepDive] - 17장(생성자 함수에 의한 객체 생성) 필요 내용 정리
생성자 함수 생성자 함수: new 연산자와 함께 호출하여 객체를 생성하는 함수 인스턴스: 생성자 함수를 통해 생성된 객체 생성자 함수에 의핸 객체 생성은 프로퍼티 구조가 동일한 객체 어려개를 간편하게 생성할 수 있다. 자바스크립트는 Object, String, Number, Boolean, Function, Array, Date 등의 빌트인 생성자 함수들을 제공하고 있다. // 생성자 함수 선언 const Person = function(name,gender){ this.name = name; this.gender = gender; } // 생성자 함수를 통한 객체(인스턴스) 생성 const person1 = new Person("wayne","male") // Person { // name: 'wayn..
[DeepDive] - 15장(let, const 키워드와 블록 레벨 스코프), 16장(프로퍼티 어튜리뷰트) 필요 내용 정리
var / let / const var 함수 레벨 스코프(블록 X) 변수 선언시, 런타임 이전 변수의 선언과 초기화(undefined) 동시 발생 및 호이스팅에 의해 스코프의 선두로 끌어 올려진 것처럼 동작(참조 오류 발생 X) => 선언 이전에 호출하여도 에러 X 중복 선언 및 재할당 가능 let(ES6~) 블록 레벨 스코프 중복 선언 불가, 재할당 가능 변수 호이스팅이 발생하지만, 변수의 선언과 초기화단계가 분리(선언 단계는 런타임 이전, 초기화 단계는 런타임에 발생)됨으로써 선언 이전 호출하였을때 참조 에러 발생(스코프 시작점부터 변수의 초기화 시작 지점까지의 변수 참조가 불가능한 TDZ에 빠지게 된다.) const(ES6~) 블록 레벨 스코프 변수의 선언, 초기화, 할당이 동시에 필요하다. 중복 ..
[DeepDive] 13장(스코프), 14장(전역 변수의 문제점) 필요 내용 정리
스코프 스코프란, 식별자(변수명)에 접근할 수 있는 유효한 범위를 말한다. 다른 스코프 영역에서 같은 이름의 변수가 존재할 때, 자바스크립트 엔진은 어떤 변수를 참조해야 할 것인지를 결정하게 되는데, 이를 식별자 결정이라고 한다. var x = "global"; function foo() { var x = "local"; console.log(x); // local } foo(); console.log(x); // global 스코프의 종류 전역 스코프(global scope) 함수나 특정 블록({})에 속하지 않고 어디든 접근이 가능하며 이때 지정된 변수를 전역변수라 한다. (함수 외부에서 선언된 변수는 무조건 전역변수이다.) 지역 스코프(local scope) 코드 내 특정 영역에만 활동 및 접근이 ..