24.1 렉시컬 스코프 > 함수 정의 위치에 의해 상위 스코프가 정적으로 결정되는 것 24.2 함수 객체의 내부 슬롯 [[Environment]] 함수 정의가 평가되어 함수 객체가 생성될 때, 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경(상위 스코프의 참조)을 저장함 이때 해당 참조는 현재 실행 중인 실행 컨텍스트의 렉시...

22.1 this 키워드 > 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 JS 엔진에 의해 암묵적으로 생성되며, 어디서든 참조 가능함 함수 호출 방식에 의해 동적으로 결정됨 22.2 함수 호출 방식과 this 바인딩 22.2.1 일반 함수 호출 strict mode 해제 시 전역 객체, 적용 시 undefined가 바인...

16.1 내부 슬롯과 내부 메서드 > JS 엔진의 내부 로직을 위해 ECMAScript 사양에 정의된 pseudo property와 pseudo method JS를 통해 내부 슬롯/메소드에 직접적으로 접근할 수는 없지만, 간접적으로 일부에 접근할 수 있음 e.g. [[Prototype]] 내부 슬롯에 proto를 통해 접근함 16.2 프로퍼티 어트리...

Firebase 소셜 로그인 기능을 구현하고 있는데, 그의 원리가 되는 OAuth가 궁금했다. 벨로그에서 구글 로그인을 하려는 상황을 가정하고 관련 내용을 정리해 보겠다. OAuth > 사용자가 비밀번호를 노출하지 않아도 자신의 정보가 서비스들 간에 공유될 수 있도

15.1 var 키워드로 선언한 변수의 문제점 15.1.1 변수 중복 선언 허용 같은 이름을 가진 변수가 이미 선언되어 있다는 사실을 모르고 중복 선언을 한다면, 기존 변수 값이 의도치 않게 변경될 수 있음 cf) 초기화문이 있는 변수 선언문은 var 키워드가 없는 것처럼 동작하고, 초기화문이 없는 변수 선언문은 무시됨 15.1.2 함수 레벨 스코프...

14.1 변수의 생명 주기 14.1.1 지역변수의 생명 주기 > 지역변수는 함수 호출 시 생성되고 일반적으로 함수 종료 시 소멸됨 -> 지역변수의 생명 주기 === 함수의 생명 주기 cf) 누군가 스코프를 참조하고 있다면 함수가 종료돼도 스코프가 소멸되지 않음 -> 지역변수가 함수보다 오래 생존할 수도 있음 14.1.2. 전역변수의 생명 주기 va...

13.1 스코프란? > 식별자가 유효한 범위 모든 식별자는 자신이 선언된 위치에 따라 스코프가 결정됨 식별자는 스코프 내에서 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자가 존재할 수 있음 -> 스코프는 네임스페이스임 cf) 네임스페이스: 모든 식별자가 고유하도록 보장하는 코드 영역 13.2 스코프의 종류 13.2.1 전역과 전역 스코프 ...

12.1 함수란? > 코드 블록으로 감싸져 있는, 문으로 이루어진 하나의 실행 단위 매개변수(parameter): 함수 내부로 입력을 전달받는 변수 - 아래 예시의 x,y 인수(argument): 함수 호출 시 입력값 - 아래 예시의 2,5 반환값(return value): 함수의 출력값 - 아래 예시의 x+y 12.2 함수를 사용하는 이유 동일한 ...

11.1 원시 값 11.1.1 변경 불가능한 값 오직 재할당을 통해, 불변성을 갖는 원시 값이 할당된 변수의 값을 바꿀 수 있음 11.1.2 문자열과 불변성 문자열은 유사 배열 객체로, 인덱스를 통해 각 문자에 접근할 수 있고 length 프로퍼티를 가짐 하지만 문자열은 원시 값이므로 변경될 수 없음. 이때 변경을 시도해도 에러가 발생하지 않음...

10.1 객체란? > - 프로퍼티와 메소드로 구성된 집합체 변경 가능한 값 프로퍼티: 객체의 상태를 나타내는 값 메소드: 프로퍼티를 참조하고 조작할 수 있는 동작 프로퍼티 값이 함수일 경우, 메소드라고 부름 10.2 객체 리터럴에 의한 객체 생성 객체 생성 방법 객체 리터럴 Object 생성자 함수 생성자 함수 Object.create 메소드 ...

9.1 타입 변환이란? 명시적 타입 변환(explicit coercion): 개발자가 의도적으로 값의 타입을 변환하는 것 암묵적 타입 변환(implicit coercion/type coercion): 코드 문맥에 부합하도록 JS 엔진이 값의 타입을 자동 변환하는 것 9.2 암묵적 타입 변환 9.2.1 문자열 타입으로 변환 문자열 연결 연산자(+)의...

조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용 -> 코드의 실행 흐름을 제어 가능함 8.1 블록문 {} JS는 블록문을 하나의 실행 단위로 취급함 8.2 조건문 8.2.1 if ... else문 조건문의 평가 결과에 따라 실행할 코드 블록을 결정함 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환됨 8.2.2 switch문 표...

7.1 산술 연산자 수학적 계산을 통해 새로운 숫자 값을 생성함 산술 연산이 불가능한 경우 NaN을 반환 7.1.1 이항 산술 연산자 2개의 피연산자를 산술 연산함 e.g. +, -, *, /, % 7.1.2 단항 산술 연산자 1개의 피연산자를 산술 연산함 e.g. ++, --, +, - 숫자 타입이 아닌 피연산자에 +, - 연산자를 사용하면...

데이터 타입은 값의 종류로, 원시 타입/객체 타입으로 나누어짐 > 원시 타입: 변경 불가능한 값 > 객체 타입: 원시 타입 이외의 값 6.1 숫자 타입 모든 수를 실수로 처리함 Infinity, -Infinity, NaN 포함 6.2 문자열 타입 작은따옴표('')/큰따옴표("")/백틱(``) 사용 6.3 템플릿 리터럴 멀티라인 문자열, 표현...

5.1 값 > 표현식의 평가 결과 cf) 평가: 식을 해석하여 값을 생성하거나 참조하는 것 모든 값은 데이터 타입을 가지며, 메모리 공간에 2진수로 저장됨 5.2 리터럴 > 값을 생성할 수 있는, 사람이 이해할 수 있는 문자 or 기호 리터럴을 통해 다양한 타입의 값을 생성할 수 있음 JS 엔진은 런타임에 정수 리터럴 3을 평가하여 숫자 값 3을...

create-react-app은 트랜스파일러/모듈 번들러 등 필요한 도구들을 자동으로 셋업해주기 때문에 편리하다. 하지만 사용하지 않는 도구들도 많이 내장되어 있고, 이러한 환경을 커스터마이징하기 어렵다는 단점이 있다. 그동안 무지성으로 CRA를 써왔기 때문에, 오늘은 CRA 없이 초간단한 react 앱을 만들어 보면서 react 앱이 필요로 하는 도구들에...

4.1 변수란 무엇인가? 왜 필요한가? 표현식 평가 시, 메모리에서 데이터(피연산자)를 기억(저장)하고 CPU에서 연산을 수행함 -> 데이터 관리(저장/참조)를 위해 변수가 활용됨 변수 > - 값이 저장된 메모리 공간에 붙여진 이름(식별자) 하나의 값을 저장하기 위한 메커니즘 -> 메모리 주소 대신 변수를 통해 값에 안전하게 접근 가능함 cf) 코드 ...

3.1 자바스크립트 실행 환경 브라우저: 웹 페이지를 브라우저 화면에 렌더링하는 것이 목적 Node.js: 브라우저 외부에서 JS를 실행하는 것이 목적 -> 각 환경에서 ECMAScript 외에 제공하는 기능은 서로 호환되지 않음 e.g. 브라우저의 DOM API, Node.js의 파일 시스템 3.2 웹 브라우저 3.2.1. 개발자 도구 Eleme...

2.1 자바스크립트의 탄생 1990년대 Netscape Communications의 웹 브라우저에 탑재하기 위해 개발된 언어 -> 현재 모든 브라우저에서 사용되는 프로그래밍 언어 2.2 자바스크립트의 표준화 Netscape Communications VS Microsoft의 경쟁으로 인한 크로스 브라우징 이슈 발생 -> 모든 브라우저에서 정상적으로 동작하...

1.1 프로그래밍이란 > - 해결해야 할 문제를 컴퓨터에게 정확하고 상세히 설명하는 작업 적절한 자료구조/함수를 이용하고 흐름을 제어하는 코드를 통해 문제를 해결하는 방법 1.2 프로그래밍 언어 컴퓨터가 전달 받은 명령을 실행할 수 있도록 하기 위해, 프로그래밍 언어로 작성된 프로그램을 compiler or interpreter를 통해 기계어로 변환하는 ...