전체 글
[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) 코드 내 특정 영역에만 활동 및 접근이 ..
[DeepDive] 11장(원시값과 객체의 비교), 12장(함수) 필요 내용 정리
원시 타입 데이터 immutable한 특징을 갖고 있다. 한번 생성된 원시값은 읽기 전용으로서, 변경이 불가능하다.(변수에 할당되는 값이 기준이 아닌, 메모리에 저장되는 값의 변동 유무가 기준이다.) 특정 변수에 값을 재할당할 경우, 메모리 공간에 저장되어 있는 데이터를 변경하는 것이 아니라 새로운 메모리 공간을 확보한 후에 변경하고자 하는 새로운 데이터를 저장한다. 새로운 데이터가 저장된 메모리를 가리키는 새로운 참조값이 변수에 할당된다. 원시 데이터가 할당된 변수는, 재할당 이외 변수 값을 변경할 방법이 없다. (재할당이 가능할 경우, 상태 변경 추적이 어렵기 때문에 예기치 못한 변경으로부터 자유롭지 못하고 데이터의 신뢰성을 보장하지 못하게 된다.) 객체 타입 데이터(참조형) mutable한 특징을 ..