[프로그래머스] 프론트엔드 기초: React + TypeScript(2)

Lina Hongbi Ko·2024년 10월 22일

프로그래머스

Programmers_BootCamp

목록 보기

39/76

2024년 10월 22일

1. flow control의 이해

사용자는 컴퓨터에게 명령하고, 컴퓨터는 수행한다.
이렇게 흐름을 제어하는 것을 flow control이라 함
Flow control : 제어흐름, 흐름제어
- 명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서
- 5가지 제어 흐름의 종류
  1. goto : 다른 구문에서 시작 (개벌 설계의 오류를 발생시킬 수 있으므로 권장하지 않음)
  2. choice : 일부 조건이 충족되는 경우에만 일련의 명령문 실행
    if-else, switch
  3. loop : 어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행
    collection loop, general loop
  4. continue : 현재 실행 구문에서 떨어진 한 구문의 집합을 실행
    loop continuation
  5. break : 프로그램 실행을 중단
    loop early exit, 함수 실행 정지

2. 표현식과 문의 이해

어느 부분이 표현식이고, 어느 부분이 문일까?
표현식 (expression) : 어떤 값으로 이행되는 임의의 유효한 코드 단위
- 표현식이 평가되면, 새로운 값을 생성하거나 기존 값을 참조
- 값으로 평가될 수 있는 문은 모두 표현식
  ex) 리터럴 표현식, 함수 표현식, ...
문 (statement) : 프로그램을 구성하는 기본 단위, 최소 실행 단위
== 명령문

ex) 선언문, 할당문, 제어문, 반복문, 블럭문 ...
블럭문(block statement)
- 명령문들을 그룹으로 묶을 수 있는 블럭문
- 한쌍의 중괄호로 묶어서 표현
제어문(control flow statement)
- choice : if ... else, switch
- loop (iterations) : loop early exit - break, loop continuation - continue
- subroutine exit : return
- non-local control flow : try ... catch, throw, generator, async
반복문(iteration statement)
- condtional loop : while, do ...while
- general loop : for
- collection loop: for ... in ,for ... of

3. choice - 조건문

일부 조건이 충족되는 경우에만 일련의 명령문 실행
ex) if ... else문,
if ... else문 : 논리조건의 참/거짓에 따라 명령문을 실행해야 할 경우 사용
- if문의 논리조건에는 true, false로 평가할 수 있는 표현식을 대입가능
- 논리조건이 참인 경우, if 블럭문 실행 / 논리조건이 거짓인 경우, else 블럭문 실행
- 해당 값은 false로 평가(Falsy)
  - false, undefined, null, 0, NaN, ""(empty string)
- else if절을 사용해 다수의 조건을 순차적으로 검사할 수 있음
- 실제 로직을 구현할 때, 중첩 if문을 사용할 수도 있음
- 마틴 파울러의 리팩토링 자료
  - nested conditional 지양
  - Guard Clauses 형태 권장
switch문 : switch에 명시된 표현식을 평가한 후, 평가된 값과 case 라벨 값을 비교해 일치하는 case의 명령문을 실행
- default 작성
  - 평가된 값에 해당하는 case문이 없을 경우 default의 명령문이 실행되도록 함
- switch와 표현식을 작성, 라벨(표현식의 결과값)이 포함된 case 절 작성
```
switch ( 표현식 ) {
	case 라벨:
    	... 명령문 ...
    default:
    	... 명령문 ...
}
```
- default문은 라벨 없이 작성
- return 또는 breake 꼭 작성해야함

4. conditional loop

조건부 loop
- 대부분의 프로그래밍 언어에는 일부 조건이 변경될 때까지 루프를 반복하는 구조가 있다.
  - 시작할 때 조건을 평가하는 타입
  - 마지막에 조건을 평가하는 타입
- 시작할때 조건을 평가하는 타입 : 본문 생략 가능
  - while문
```
while(표현식) {
	... 명령문 ...
}
```
- 마지막에 조건을 평가하는 타입 : 본문은 항상 한번 이상 실행
  - do ... while문
```
do {
	... 명령문 ...
} while(표현식);
```
- 주의 사항
  - 종료될 수 있는 조건이 아닌 경우, 무한 루프에 빠질 수 있음
  - 조건문 작성 시 이를 유의해서 작성해야함

5. for loop

특정 부분의 코드가 반복적으로 수행될수 있도록 함
언어별로 지원하는 형식이 있음(자바스크립트 기준)
- [초기화-조건식-증감문]의 형식
- 집합 loop 형식(Foreach loop)
[초기화-조건식-증감문]의 형식
- c언어에서 유래한 문법
- while문과 다르게 해당 루프와 관련된 loop 변수 존재
  - loop 변수의 비교 및 증감을 위한 별도 문법 명시 필요
  - == loop 변수를 활용해 명시적으로 카운트 관리 필수
- for([초기문]; [조건문]; [증감문]) { ... }
  - 세미콜론으로 구분
  - 초기문 : loop 내에서 사용할 loop변수를 초기화
    - 조건문 : loop 내 코드 실행 전, 조건을 평가해 loop를 지속할지 판단
    - 증감문 : loop 내 코드 실행 후, 실행되는 문장(루프변수 증감 용도)
Collection loop (Foreach 루프)
- 컬렉션 안의 항목들을 횡단하는 제어흐름문
- For문과 다르게, 명시적으로 카운터(루프변수)를 관리 하지 않는다.
- 잠재적인 순환 횟수 오류를 예방(off-by-one error)
  - 코드를 더 단순하게 읽힐 수 있게 해줌
- 자바스크립트 collection loop
  - for ... of
    - 반복 가능한 객체(iterator)를 통해 반복하는 루프를 만듦
    - 형태 : for([변수] of [object]) { ... }
      - 변수는 반복 가능한 객체의 값을 반환
      - 반복 가능한 객체 : Array, Set, String ...
  - for ... in
    - 객체의 열거속성(enumerable)을 통해 지정된 변수를 반복한다.
    - 형태 : for([변수] in [obejct]) { ... }
      - 변수는 객체의 key값을 반환

6. break, continue문

break
- 제어흐름의 종류 중 프로그램 실행 중단 종류
- 반복문, switch문을 종료시킬 때 사용
- 가장 가까운 while, do-while, for, switch문을 종료하고, 다음 명령어로 넘어간다.

continue
- 제어흐름의 종류 중 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 종류에 속한다.
  -while, do ... while, for문을 다시 시작하기 위해 사용
- 가장 안쪽의 whle, do-whle, for문을 둘러싼 반복을 종료하고, 다음 loop를 실행한다.
- 주의 : 전체 루프 실행을 종료하지 않는다.
  - while : 조건문으로 이동
  - for : 증감문으로 이동

7. 예외상황의 종류

예외 상항 (Exception)
- 런타임 때 발생할 수 있는 의도치 않은 상황을 뜻함
- 흐름 제어 시 발생할 수 있는 예외 상황이므로, 이를 이해하여 코드 레벨에서 대응해야 한다.
  - handling: 대응한다의 의미
  - control : 예상하고 직접 조작한다는 의미
- 예외 상황을 핸들링 하지 않는다면, 기능이 동작하지 않거나, 어플리케이션이 shout down 될 수 있다.
예외의 원인
: 언어 레벨 ~ 외부 요인에 의한 예외 상황까지 다양
- 코드 레벨에서 문제
- 하드웨어, 디바이스 문제
- 라이브러리 손상
- 사용자의 입력 실수
  ...
예외의 종류 (코드 레벨에서 문제)
- ECMAScript Error : 자바스크립트 언어에서 발생하는 ErrorType
- DOMException : Web API 레벨에서 발생하는 ErrorType
- 그 외 예외
ECMAScript Error (자바스크립트 에러객체를 상속받음)
- RangeError : 값이 집합에 없거나, 허용범위가 아닐때
- ReferenceError : 존재하지 않는 변수 참조 시
- SyntaxError : 문법을 지키지 않았을 때
- TypeError : 값이 기대한 자료형이 아니여서 연산이 불가능할 때
  ...
DOMException (WebAPI레벨에서 발생하는 에러 타입)
- NetworkError : 네트워크 에러 발생 시
- AbortError : 작업이 중단 되었을 때
- TimeoutError : 작업 시간이 초과되었을 때(요청했으나 응답이 오래 되었을때)
  ...
그 외
- 개발자도 예상치 못한 예외 상황
- 개발자가 직접 예외 상황을 예상하여 핸들링 할 수 있음
- 자바스크립트의 Error 객체를 사용해 직접 에러를 정의내리고 핸들링 할 수 있음

8. throw와 Error 객체

thorw
- 예외를 발생시킬 때 사용
  - catch블럭에서 에러 객체 핸들링
- 예외가 발생하면,
  1. 현재 함수의 실행 중지
  2. 에러객체와 함께 에러가 throw
  3. 제어 흐름은
    - 호출자 사이에 catch 블록이 있으면, catch 블록으로 전달
    - 호출자 사이에 catch 블록이 없으면, 프로그램 종료
- 예외를 발생시키기 위하여 throw문을 사용
  - throw 표현식
- throw문 이후의 명령문은 실행되지 않음
Error 객체
- 사용자가 직접 Error 객체를 정의하여 사용할 수 있다.
  - new Error('에러 메시지')
  - Error.message
  - Error.name
- ECMAScript 표준 내장 오류 유형 있음

9. try ... catch문

예외가 발생하면
1. 현재 함수의 실행 중지
2. 에러객체와 함께 에러가 throw
3. 제어 흐름은
  - 호출자 사이에 catch 블록이 있으면, catch 블록으로 전달
  - 호출자 사이에 catch 블록이 없으면, 프로그램 종료
- 에러를 catch 하여 프로그램이 종료되지 않도록 해야 한다.
- 예외 처리를 담당하는 핸들러를 찾기 위해, 순서대로 콜 스택(call stack)을 거슬러 올라가 올바른 핸들러를 찾아내어 그곳에서 처리되도록 한다.
콜스택(call stack)
- 스택 자료구조
  - 출입구가 하나인 데이터 구조(FirstInLastOut)
- Call stack
  - 자바스크립트 코드가 실행되며 생성되는 실행컨텍스트를 저장하는 자료구조
  - 함수를 호출할 떄마다 스택에 쌓이고, 함수의 실행이 종료되면, 콜스택에서 스택을 제거하는 원리
- 에러 throw 되면
  - 콜 스택을 확인하여, 핸들링 하고 있는 catch문이 있는 스택에서 처리
try ... catch 문
- try ... catch 문은 블록문 내에서 예외가 발생할 경우, 예외 처리를 맡을 하나 이상의 반응 명령문을 지정한다.
  - try 블록의 명령문 중 하나가 실패하면, catch로 제어권이 넘어감
  - try 블록의 명령문 중 하나가 성공하면, catch로 제어권이 넘어가지 않는다.
  - catch 블럭에서 인자로 throw된 catchID를 참조할 수 있다.
    try{ ... }
    catch(catchID) { ... }
- 콜스택 중 하나에서 catch문에서 예외가 처리된다면, 더 상위의 콜스택에서는 더이상 예외가 타고 올라오지 않는다.
- finally블록은 try 블록에서 예외 상황이 발생하지 않더라도, 실행됨
  - 예외 상황이 발생되면 : try -> catch -> finally
  - 예외 상황이 발생되지 않으면 : try -> finally
- 외부에 의존되어서 구현된 로직에서 사용 (예기치 못한 상황 대응)
  - network 에러 발생 시
  - 에러를 감지해야 하는 비즈니스 로직
    - 비즈니스 데이터가 유효하지 않는 경우
  - 유저가 잘못된 데이터를 입력한 경우
    ...

10. 객체란?

객체 (Object) : 속성을 가진 독립적인 개체 (entity)
- 객체는 속성(property)으로 구성된 집합
자바스크립트는 객체기반의 프로그래밍 언어
- 자바스크립트를 구성하는 대부분이 객체(원시값 이외의 값)
```
const 객체명 = {
    "속성" : 값,
    "속성" : 값
}
```
객체 - 속성 property
- 속성을 키와 값 사이의 연결 관계이다. key-value
- 객체의 속성은 JavaScript의 변수와 유사한데, 객체에 속해 있따.
- 속성 접근 방법
  - 마침표 표기법 : objectName.propertyName
  - 대괄호 표기법 : objectName["propertyName"]
- 속성에는 값 뿐만 아니라 함수도 할당 가능하다.
  - method: 객체에 속해 있는 함수를 method라고 함
객체 - 속성 method
- 메서드는 다른 함수와 동일하게 정의하지만, 객체 속성에 할당되어 있음
- ECMAScript2015에서는 축약표현으로 작성 가능
객체 - 생성방법
1. 리터럴 표기
2. 생성자 함수
3. Object.create
생성방법 1 - 리터럴 표기
- const foo = { name : 'apple' };
  - 변수명: 새로운 객체의 이름
  - 콜론 앞 속성 이름(name) : 식별자
  - 콜론 뒤 값('apple') : 속성에 할당할 표현식

생성 방법 2 - 생성자 함수
- 속성만 같고, 값만 다른 객체를 여러개를 생성해야 할 때, 번거로움이 있다.
- 생성자 함수를 사용하면, 템플릿처럼 사용하여 속성이 동일한 객체를 여러개 생성할 수 있다
  - 생성자 함수란 ? new 키워드와 함께 객체를 생성하고 초기화하는 함수
- 생성자 함수를 정의한 후, 생성자 함수를 활용해 객체 인스턴스를 생성한다.
  (인스턴스 : new 키워드로 생성된 객체)
  - 생성자 함수는 대문자로 시작 (일반 함수와 구분)
  - this 키워드로 속성을 정의, 생성될 인스턴스를 가리킴
  - new 연산자를 활용해 인스턴스 생성
생성 방법 3 - Object.create
- 생성자 함수처럼 동일한 속성값을 갖는 객체를 생성할 수 있다.
- Object.create(객체)
Object 빌트인 객체
- 생성자 : new Object()
- 정적 method (Object 호출 없이 바로 사용한 메서드)
  - 객체 자체와 관련된 method, 객체 속성과 관련된 method, 객체 속상 값과 관련된 method
- 인스턴스
  - Method (인스턴스 생성 후 사용 가능)
    - hasOwnProperty()
    - isPrototypeOf(), propertyIsEnumerable()
    - toLocaleString(), toString(), valueOf()
Object 객체 - 정적 method
- 객체 자체
  - 객체 복사 : assign
  - 객체 신규 생성 : create
  - 객체 고정 : freeze, preventExtensions, seal
  - 객체 상태 확인 : isExtensible, isFrozen, isSealed
  - 객체를 배열로 반환 : entries, fromEntries
  - 객체 prototype: getOwnPropertyOf, setOwnPropertyOf
- 객체 속성
  - 객체 속성 추가 : defineProperty, defineProperties
  - 객체 속성 서술자 : getOwnPropertyDescriptor, getOwnPropertyDescriptors
  - 객체 속성 열거 : getOwnPropertyNames, keys, getOwnPropertySymbols
- 객체 속성의 값
  - 객체 값 비교 : is
  - 객체 값 열거 : values

11. 객체 속성 control

객체는 원시 타입과 다르게 변경 가능한 값(mutable)
객체는 전달하는 과정에 참조 형태로 전달된다(pass-by-reference)
- 이는 객체의 변경이 일어날때 참조된 객체들도 같이 변경되는 문제점을 야기
- 때문에 의도한 동작이 되기 위해서는 아래와 같은 조작을 적절히 사용해야함
  1. 객체의 속성 동적 생성
  2. 객체의 속성들 나열하기
  3. 객체의 속성 삭제하기
객체 속성 조작하기 - 동적 생성
- 객체에 존재하지 않는 속성을 참조하고 할당문을 통해 값을 할당하면 속성이 동적으로 생성되고 추가됨
객체 속성 조작하기 - 나열하기
- for ... in : 모든 열거 가능한 속성을 순회한다(객체의 프로토타입 체인의 속성까지)
- Object.keys(객체) : 객체 자신의 열거 가능한 속성 이름을 배열로 반환
- Object.getOwnPropertyNames(객체) : 객체 자신만의 모든 속성을 배열로 반환

객체 속성 조작하기 - 삭제하기
- delete 연산자로 속성 삭제
- delete 속성 이름
- 반환값: true

12. 객체간 비교와 복사

객체는 참조 타입 Reference type : 모든 연산이 참조값(메모리 주소)으로 처리됨
객체 비교
- 객체를 서로 비교하면
  - 객체 속성과 값이 같은 객체여도, 참조값이 다르므로 서로 다름
  - 자기 자신과의 비교에만 true
동일한 객체를 생성해야할 때
- 정의된 객체를 다른 변수에 그대로 할당할 경우, 동일한 메모리 주소(address)만 할당됨
- 둘 중 하나의 객체를 수정한다면, 동일한 메모리 주소이기 때문에 두 변수가 참조하고 있는 객체가 수정되어 결과적으로 2가지 객체 모두 변경사항에 영향을 받는다.
- 객체 복사의 2가지 방법
  - 얕은 복사
  - 깊은 복사

얕은 복사

복사된 객체의 속성 중 하나라도 같은 참조를 하고 있게 되면, 얕은 복사되었다고 한다.
객체의 속성 중 참조타입이 없는 경우에만 얕은 복사 방법 권장

방법

Object.assign({}, 복사할 객체)
spread 연산자 -> {...복사할 객체}

 const person = {
 	name: '???',
     address: {
     	country: 'Korea',
         city: 'Seoul'
     },
 };
 
 const joy = Object.assign({}, person);
 const kei = { ...person };
 
 joy.name = 'Joy Kim';
 keiname = 'Kei Ko';
 
 console.log('joy:', joy);
 /*
 'joy:' {
 	name: 'Joy Kim',
     address { country: 'Korea', city: 'Seoul' }
 }
 */
 console.log('kei:', kei);
 /*
 'key:' {
 	name: 'Kei Ko',
     address { country: 'Korea', city: 'Seoul' }
 }
 */
 
 console.log(joy === kei); // false
 console.log(joy.address == kei.address); //true
 
 joy.address.country = 'Japan';
 console.log('joy:', joy);
 /*
 'joy:' {
 	name: 'Joy Kim',
     address { country: 'Japan', city: 'Seoul' }
 }
 */
 console.log('key:', kei);
  /*
 'key:' {
 	name: 'Kei Ko',
     address { country: 'Japna', city: 'Seoul' }
 }
 */

깊은 복사

복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면, 깊은 복사로 복사되었다고 한다.

deep copy의 방법은 2가지

재귀함수를 이용한 복사 (라이브러리: lodash - cloneDeep)

JSON.stringify -> JSON.parse : 객체 -> 문자열로 변환(참조가 끊어짐) -> 객체로 변환

import cloneDeep from 'lodash.cloneDeep';

 const person = {
   name: '???',
   address: {
   	country: 'Korea',
       city: 'Seoul'
   },
 };
 
 const joy = cloneDeep(person);
 const personStr = JSON.stringify(person);
 const kei = JSON.parse(personStr);
 
 console.log(person.address === joy.address); // false
 console.log(person.address === kei.address); // false
 
 joy.address.country = 'Japan';
 console.log('joy:' joy);
 /*
 'joy:' {
     name: '???',
     address { country: 'Japan', city: 'Seoul' }
 }
*/
 console.log('key:' kei);
 /*
 'key:' {
     name: '???,
     address { country: 'Korea', city: 'Seoul' }
 }
*/

13. 객체의 종류

크게 2가지 종류임
- 표준 빌트인 객체 ECMAScript
  - 기초 객체 : Object, Function, Boolean, Symbol
    - 오류 객체 : Error
    - 숫자 및 날짜 : Number, BigInt, Math, Date
    - 텍스트 처리: Regex(정규표현식), String(문자열)
    - Collection
      - Index based collection: Array(배열)
      - Key based collection: Map, Set ...
  - 구조화된 데이터 : JSON
  - 제어 추상화 객체 : Promise, Generatoer, AsyncFunction, ...
- 호스트 객체 (브라우저 기준): DOM API
표준 빌트인 객체 ECMAScript
- 빌트인 객체 형태 (생성자 함수로써 사용 가능)
  - 정적 static: 속성, method
  - 인스턴스 instance: 속성, method
    - {{객체.prototype.인스턴스method}}
      ex) Number.prototype.toFiexed()
    - 기본적으로 Object 객체의 속성을 상속 받음
      -> 프로토타입 메서드들을 모두 상속 toString(), toLocaleString(), valueOf()
    - 함수로써 바로 호출 사용

14. Number, Math

Number 객체
- 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 Built-in 객체
- 함수로 바로 사용 가능
  - Number('1.2') : Number로 타입 전환
- Static 속성과 메서드
  - 속성 : MAX_VALUE, MAX_SAFE_INTEGER, NaN, ...
  - 메소드
    - 확인하는 용도: isNaN, isFinite, isInteger, ...
    - 파싱하는 용도: parseInt, parseFloat
- 생성자 함수
  - Number.prototype
  - 인스턴스 메서드: toFixed(소수점의 자릿수 조정), toLocalString(나라별로 숫자를 표현하는 포맷을 문자열로 반환), ...
- 변수 또는 객체의 속성이 숫자를 갖고 있으면, Number 객체 인스턴스 생성 없이 Number의 인스턴스 속성과 메서드 사용가능

Math 객체
수학적인 상수와 함수를 위한 속성과 메서드를 가진 Built-in 객체 (숫자 데이터 타입만 지원)
Math는 생성자가 아님. 정적 속성과 메서드만 지원
Static 속성과 메서드
- 속성: PI, E, ...
- 메소드
  - abs(x), pow(x), sqrt(x),
    - ceil(x), floor(x), round(x)
    - max(x, y, ...), min(x, y, ...),
    - random()
      ...

15. Date

UTC
- UTC ? 1970년 1월 1일은 어떤거지?
- UTC(Universal Time Coordinated) : 국제 표준 시간의 협정 세계시
  - 국제적인 표준 시간의 기준으로 쓰이는 시각
  - 1970년도에 UTC 채택, 1972년 구현
  - UTC는 그리니치(영국의 그리니치 천문대를 기준) 평균시(GMT)에 기반한다. GMT라고도 불림
  - 인터넷, WWW, 항공, 등등에 사용됨
  - 한국은 UTC 기준으로 9시간이 더해짐
    - getTimezoneOffset() // UTC - 현지 시간대 (분단위 반환)
    - 한국은 -540분 == 9시간

날짜 표기와 ISO 8601
- 시간을 표현하는 방법은 다양하나, 표준화 없이 사용할 경우 커뮤니케이션 비용 상승
  - 미국에서 -> 한국으로 YYMM으로 보낼 경우 ex) 0302
- ISO : 국제 표준화 기구(International Organization for Standardization)
  - 이를 해소하기 위해 국제표준화 기구에서 날짜를 표현하는 방식을 표준화
- ISO 8601
  - YYYY-MM-SSThh:mm:ssZ (많이 사용되는 형태)
  - 혼합된 일시를 표현할때는 T라는 구분자를 사용(상호협의간 T는 생략 가능)
  - UTC 날짜라는 의미는 Z로 표현

Date 객체
- 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 Built-in 객체
- 특정 시간대(현재시간을 포함)를 가져올 수도, 다시 셋팅할 수 있는 method를 제공
- 함수로 호출
  - Date() -> Sat Oct 22 2022 18:43:12 GMT+0900 (한국표준시)
- 생성자 함수
  - Date.prototype
- Static 속성과 메서드
  - 속성 : 없음
  - 메서드: now(), parse(), UTC()
Date 인스턴스 메서드
- new Date()
- new Date(시간문자열)
- 시간을 get 하는 메서드
- 시간을 set 하는 메서드
인스턴스 메서드 - 시간 갖고오기
- 기본 - 현지시간 기준
  - 연, 월, 일, 요일 갖고 오기 : getFullYear(), getMonth(), getDate(), getDay()
  - 시, 분, 초, 밀리초 갖고오기 : getHours(), getMinutes(), getSeconds(), getMilliseconds()
- -UTC- : UTC 기준
  - 한국시간은 9시간 차이나므로, getHours와 getUTCHours만 차이나고 나머지는 동일한 값을 반환
- UTC로부터 ~ 걸린 시간 갖고오기 (밀리초 기준) : getTime()
- UTC와 ~ 현지 시간대 차이 갖고오기(분 기준) : getTimezoneOffset()
인스턴스 메서드 - 시간 갖고 오기
- getMonth() : 1월이 0부터 시작
  - 0은 1월, 9는 10월
- getDay() : 일요일이 0부터 시작
  - 일요일 0,월요일 1, 화요일 2, ...
- toLocalDateString()활용시 현지에 맞는 요일 문자열 얻을 수 있다.
인스턴스 메서드 시간 set 하기
- 기본 - 현지시간 기준
  - 연, 월, 일, 요일 갖고오기: setFullYear(), setMonth(), setDate(), setDay()
  - 시, 분, 초, 밀리초 갖고오기: setHours(), setMinutes(), setSeconds(), setMilliseconds()
- -UTC- : UTC 기준
  - 한국시간은 9시간 차이가 나므로, setUTCHours 사용시 유의
  - UTC로부터 ~ 걸린 시간 셋팅하기 (밀리초 기준) : setTime()
- Date 객체 - Object 메서드 오버라이딩
- 최상위 객체가 갖고 있는 메서드 중 상속받는 메서드가 있다.
- valueOf()
  - UTC와 기준 시점 사이의 밀리세컨즈 차이값
  - getTime()과 동일한 값
- toString()
  - {{ 요일 }}{{ 월 }}{{ 일 }}{{ 연도 }}{{ 시 }}:{{ 분 }}:{{ 초 }} GMT{{ +/- }}{{ 시간 차이값 }}({{ 구성한 시간대 이름 }})
  - Sat Oct 22 2022 18:43:12 GMT+0900 (한국 표준시)
  - Date()와 동일한 값

16. 문자열

문자열 리터럴로 표현되며, 쌍따옴표(""), 따옴표('')을 사용하여 표현
- ECMAScript2015 이상에서는 템플릿 리터럴(백틱`) 사용 가능
String 객체 사용 ex) new String("자바스크립트")

문자열 특징
- 문자열 내에 이스케이프 문자 사용가능(\n)
- 줄바꿈 문장 표현가능
  - 이스케이프 문자 활용 (\n)
  - 템플릿 리터럴 활용 (백틱 `)
- 데이터 보관시 문자열 형태로 저장 유용
  - 텍스트 형태로 저장
  - 객체 형태 -> JSON.stringify로 변환하여 저장 ex) const data = '{"javascript" : "good"}' (JSON.parse로 다시 json으로 바꿔 사용)
문자열 조작
- 문자열 요소 접근
  - charAt
  - 유사배열이라 배열처럼 접근 (대괄호[]사용)
- 문자열 비교
  - 비교연산자를 통해 비교할때, 알파벳순을 비교하여 순서가 뒤에 올수록 크다고 판단
    ex) 'apple' < 'banana' // true
- 변수 또는 객체의 속성이 문자열을 갖고 있으면, String 객체 인스턴스 생성 없이 String의 인스턴스 속성과 메서드 사용 가능
String 객체
- 문자열을 다룰때 사용하는 원시 래퍼 Built-in 객체
- 함수로 바로 사용 가능
- String(...) : 문자열로 타입 전환
- 정적 메서드 : fromCharCode, fromCodePoint, raw
- 생성자 함수 : String.prototype
- 인스턴스 속성 : length
- 인스턴스 method:
  - 문자열 체크(get) : 접근, 찾기, 포함 여부, 비교
  - 문자열 변경(set) : 추가하기, 합치기, 분리하기, 변경하기
인스턴스 메서드 - 문자열 체크
- 문자열에 접근
- 문자열 내에 target 문자열이 어디있는지 찾기, 포함되어 있는지, 비교하기
- 접근 : at(), charAt(), charCodeAt(), codePointAt()
- 찾기 : indexOf(), lastIndexOf(), search()
- 포함 여부 : includes(), startsWith(), endsWith(), match(정규표현식), metchAll(정규표현식)
- 비교 : localeCompare()
인스턴스 메서드 - 문자열 변경
- 변경하기 :
  - toLocaleLowerCase(), toLocaleUpperCase(), toString()
  - replace(), replaceAll()
    ...
인스턴스 메서드 - 문자열 변경
- 추가하기 : padEnd(), padStart(), repeat()
- 합치기 : concat(), 산술연산자
인스턴스 메서드 - 문자열 변경
- 분리하기 :
  - slice(), substring(), split()
  - trim(), trimStart(), trimEnd()

17. 정규표현식

정규표현식 - 문법
- 문자열에서 특정 문자 조합을 찾기 위한 패턴 (== 정규식)
  /pattern/flags
  (예시 /\w+\s/g)
- 패턴 작성하는 방법
  - 단순 패턴 사용
  - 특수 문자 사용 : 어서션, 문자클래스, 그룹과 범위, 수량자, 유니코드 속성 이스케이프
- flag를 활용하여 탐색(특성 지정): d, g, I, m, s, u, y
정규표현식 - 생성 방법
- 리터럴 표기법
  - 평가할 때 정규표현식을 컴파일한다.
  - 정규식이 변하지 않으면, 리터럴 표기법 사용
  - /pattern/flag
- RegExp 객체
  - 런타임 때 컴파일된다.
  - 패턴이 변할 가능성은 있거나, 알수 없는 데이터에서 가져오는 정규식의 경우 생성자 함수 사용
  - new RegExp(/pattern/, flag)
RegExp 객체
- 정적 속성 : lastIndex (정적 메서드 존재X)
- 생성자 함수 : RegExp.prototype
- 인스턴스
  - 속성 :
    - 적용된 flag 반환: flags
    - 적용된 flag 여부 반환:
      - dotAll, global, ignoreCase, multiline, source, sticky, unicode
    - Method :
      - compile(), exe(), text(), toString(), ...
RegExp 객체 와 String 객체가 함께 사용 되는 경우
- 문자열 인스턴스 method 중 "찾는" 과정이 있는 method에서 활용한다.
- 찾아서, 일치하는지 확인 :
  - match(정규표현식), matchAll(정규표현식)
- 찾는 :
  - search(정규표현식)
- 찾아서 교체하는 :
  - replace(정규표현식), replaceAll(정규표현식)
- 찾아서 분리하는 :
  - split(정규표현식)

18. Collection 개요

Collection 이란?
- 비용을 절감하기 위하여, 상황마다 효율적인 데이터 형태로 처리해야 한다.
- 컬렉션은 데이터 항목들의 그룹을 의미한다.
  - 컬렉션에는 list, set, tree, graph 등이 포함되어 있다.
- 자바스크립트에서는 2가지 타입의 collection이 있다.
  - Indexed collections
  - Keyed collections
Indexed collections
- Index 값을 기준으로 정렬되어 있는 데이터 집합
  - Array, TypedArray 포함
- index로 배열 내의 값을 참조할 수 있다.
  - const foo = [1, 2, 3];
    foo[1]
Keyed collections
- Key 값을 기준으로 정렬되어있는 데이터 집합
  - Map, Set 포함
- 키와 값을 매핑하여 저장한다
  - 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다.
  - const foo = new Map();
    foo.set(key, value)

19. index collection - 배열

Array
- 이름과 인덱스로 참조되어 정렬된 값들의 집합 (인덱스: "색인과 같은 의미")
- 다른 언어와 다르게, 자바스크립트는 명시적인 배열 데이터 타입을 갖고 않음
  - 배열 객체를 사용할 수 있다.
  - List와 비슷한 객체이며, 순회와 변형작업을 수행하는 method를 갖는다.
- 0개 이상의 표현식(배열 요소)이 포함된 목록
- 배열을 만들때,
  - 각 요소로 지정된 값으로 초기화
  - 배열의 길이(length)는 지정된 요소의 갯수로 결정
    - 길이가 고종되어있지 않다
    - 각 요소의 data type도 고정되어 있지 않다.
- 모든 요소는 필수값이 아님 (undefined로 지정해도됨)
  - ['apple', undefined, 'banana']
생성 방법
- 배열 리터럴 : 대괄호로 묶인다 []
- Array 객체 생성자 :
  - new Array(arrayLength); 길이만 지정된 배열 (정수만 가능)
  - new Array(element0, element1, ...); 요소가 지정된 배열

특징
- 배열 요소의 참조
  - index로 참조, 0부터 시작
  - index값을 속성 이름으로 사용하여, 표준객체의 속성처럼 저장
  - index로 문자열 사용할 수 없음, 무조건 정수로만 참조하여 저장
- 배열에 값 저장 :
  - index로 참조하지 않으면 객체의 속성으로 저장됨
- 배열의 길이 : 마지막 index에 +1한 값
  - 길이를 지정하는 것 가능
    - 원래 길이보다 작게 지정하면, 배열이 잘림
    - 원래 길이보다 크게 지정하면, 배열의 길이는 늘어남
- 배열의 반복 처리하기
  - for문 활용
  - forEach문 활용
- 정적 메서드 : from, isArray, of
- 생성자 : Array.prototype
- 인스턴스
  - 속성 : length
  - Method : (일반/순회하며)
    - 요소 체크(get) : 접근, 찾기, 포함 여부, 판별하기
    - 요소 변경(set) : 추가하기, 제거하기, 변경하기
    - 배열 변경(set) : 추가하기, 분리하기, 변경하기, 재배치하기
    - 반환 타입 변경하기
인스턴스 메서드
- 요소 접근 : at()
- 요소 찾기 : indexOf(), lastIndexOf()
- 요소 포함 여부 : includes()
- 순회하며
  - 요소 확인하기 : forEach()
    - 요소 판별하기 : every(), some()
    - 요소 찾기 : find(), findIndex()
- 요소 조작
  - 요소 추가 : push(), unshift()
  - 요소 제거 : pop(), shift()
  - 순회하며
    - 요소 변경하기 : flatMap(), map()
    - 요소 제거하기 : filter()
  - 배열 합치기, 추가하기 : concat(), fill()
  - 배열 분리하기 : slice(), splice()
  - 배열 요소 변경하기 : copyWithin(), flat()
  - 배열 재배치하기 : reverse()
    - 순회하며 재배치하기 : sort()
  - 반환 타입 변환하기 :
    - 문자열로 : join(), toLocaleString(), toString()
    - iterator로 : entries(), values()
    - 순회하며 :
      - 타입 변환하기 : reduce(), reduceRight()

20. key based collection - Map, WeakMap

key 값을 기준으로 정렬되어 있는 데이터 집합
- Map, Set 포함
키와 값을 매핑하여 저장한다.
저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다.
- const foo = new Map();
  foo.set(key, value)
Map객체와 WeakMap 객체 공통 속성
- 키와 값을 매핑시켜 저장
- key는 유니크함
Map 객체
- 생성자 함수 : Map.prototype
- 인스턴스
  - 속성 : size
  - method :
    - 요소 체크(get) : 접근, 포함 여부 - get, has
    - 요소 변경(set) : 추가하기, 제거하기, 변경하기 - clear, delete, set
    - 순환 관련 : keys, values, entries, forEach
Map 객체 - 특징
- Map은 간단한 키와 값을 서로 매핑시켜 저장하고, 저장된 순서대로 요소를 반복적으로 접근할 수 있다.
- [key, value]의 형태로 삽입된 순서대로 추가
키 기반의 Object와 어떤 차이가 있을까?
- Map객체와 Object객체의 차이점
  - 속성의 데이터 타입
  - default 속성과의 충돌
  - 객체의 크기
  - iterable 여부
  - 순서 보장
  - 퍼포먼스 (데이터 핸들링)
  - 직렬화와 구문분석 제공여부
속성의 데이터 타입
- Object : string, Symbol 데이터 타입만 가능
- Map : 모든 값을 키로 활용 가능
default 속성과의 충돌
- Object : Object prototype의 기본속성과 동일한 키를 생성시 충돌
- Map : Map은 기본적으로 갖고 있는 속성이 없어, 기본 속성들과 충돌 없음
객체의 크기
- Object : 수동으로 추적해야함
- Map : size 인스턴스 속성으로 얻을 수 있음
순서 보장
- Object : Object은 순서 보장이 안됨
- Map : Map은 추가된 순서대로 반복됨
iterable 여부 (forEach문 사용 여부)
- Object : Object는 iterable이 아님
- Map : Map은 iterable
퍼포먼스(데이터 핸들링)
- Object : 키, 값쌍의 빈번한 추가 제거에는 퍼포먼스가 좋지 않음
- Map : 키, 값쌍의 빈번한 추가 제거에는 Map이 퍼포먼스가 좋음
직렬화와 구문분석 제공여부
- Object : 직렬화와 구문분석 제공 (JSON.stringify, JSON.parse)
- Map : Map에서는 제공하지 않고 있다 (커스텀으로 구현은 가능)
WeakMap - 특징
- 키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음
  - 키는 object만을 허용
- 객체 정보를 비노출
- 객체의 정보를 비노출하는 특징을 활용하여
  - 객체의 사적인 정보를 저장히기 위해서
  - 상세 구현내용을 숨기기 위해서 사용한다.
- 생성자 함수 : WeakMap.prototype
- 인스턴스
  - 속성 : size
  - Method :
    - 요소 체크(get) : 접근, 포함 여부 - get, has
    - 요소 변경(set) : 추가하기(변경하기), 제거하기 - delete, set
    - 순회관련 - 없음 (객체 정보를 비공개하므로 없음)

21. key based collection - Set, WeakSet

Set과 WeakSet 공통 속성
- 중복된 값을 허용하지 않는다.
  - 값이 같은지 검사를 수행한다. same-value-zero-algorithm
- 배열을 인자로 받을 수 있다,
  - 배열의 요소가 Set 객체의 요소로 저장됨
  - 중복된 요소가 제거된다.
Set의 특징
- 모든 값들의 집합 (값 콜렉션)
- 입력된 순서에 따라 저장된 요소를 반복처리 할 수 있다.
- 특정 값은 Set 내에서 하나만 존재
  - NaN은 Set에서 같은 것으로 간주된다.
- 배열 -> Set 으로 Set -> 배열로 변환 가능하다.
- for ... of를 통해 순회 가능하다.
- 생성자 함수 : Set.prototype
- 인스턴스 :
  - 속성 : size
  - method :
    - 요소 체크(get) : 접근, 포함 여부 - has
    - 요소 변경(set) : 추가하기, 제거하기, 변경하기 - clear, delete, add
index 콜렉션과 어떤 차이가 있을까?
- Set과 배열의 차이점
  - 포함여부 확인 퍼포먼스 :
    - 배열 : indexOf를 사용하여 포함여부 확인은 퍼포먼스가 느림
    - Set : has method를 사용 (상대적으로 더 좋음)
  - 요소 제거 :
    - 배열 : 배열은 요소를 제거할 때 배열을 잘라내야함
    - Set : delete method 사용 (상대적으로 더 좋음)
  - 요소 찾기 :
    - 배열 : NaN은 indexOf로 포함여부 확인 불가능
    - Set : NaN 포함여부 확인 가능
  - 중복 여부 확인 :
    - 배열 : 순회하며 확인해야함
    - Set : Set은 값의 유일성을 보장하기 때문에, 중복성을 확인할 필요가 없음
WeakSet의 특징
- 객체 컬렉션 (object 값만을 허용)
  - WeakSet의 인자로 object만 허용
  - 약한 참조를 가진다.
  - const foo = new WeakSet()
    foo.add({ foo: 1 })
- 생성자 함수 : WeakSet.prototype
- 인스턴스 :
  - method:
    - 요소 체크(get) : 포함 여부 - has
    - 요소 변경(set) : 추가하기(변경하기), 제거하기 - delete, add
    - 순환관련 - 없음

22. JSON 객체

JSON (JavaScript Object Notation)
인터넷에서 자료를 주고받을 때 자료를 표현하는 방법으로 알려져있음
키-값 쌍, 배열 자료형, 기타 모든 직렬화 가능한 값
또는 키-값 쌍으로 이루어진 데이터 객체를 전달하기 위해 사람이 읽을 수 있는 텍스트(문자열)를 사용하는 open standard 포맷
JSON의 파일 확장자 : .json
기본 자료형: number, string, boolean, array, object, null
- 자바스크립트의 문법을 차용
객체의 형태와 유사
직렬화 (serialization, deserialization)
- 다양한 환경 간에 데이터를 주고 받기 위해 직렬화 작업이 필요하다.
- 직렬화 serialization: Object -> 문자열로 변환하는 것
- 역직렬화 deserialization: 문자열 -> Object로 변환하는 것
JSON 객체
- 직렬화와 역직렬화를 도와주는 빌트인 객체
- 값을 JSON으로 변환하는 method를 제공
- 생성자 함수 아님
- 함수로써 사용 불가능
- 정적 Method
  - JSON.stringify : 직렬화 하는 구문
  - JSON.parse : JSON 형태로 파싱하는 구문 (역직렬화)
    - 주의 사항 : 문자열이 객체 형태가 앙닌 경우 오류 발생
    - try ... catch 문으로 에러 핸들링 권장

23. 국제화

intl 객체 (internalization 객체)
- 각 언어에 맞는 문자, 숫자, 시간, 날짜 비교를 제공하는 국제화 API를 위한 namespace
  - Intl 이라는 namespace로 그루핑하고, 내부에 있는 생성자 속성들
- 정적 method : Intl.supportedLocalesOf();
- 속성 :
  - DateTimeFormat
  - NumberFormat
  - ...
intl 객체 - DateTimeFormat 생성자 함수
- 언어에 맞는 날짜, 시간 서식을 적용하기 위한 객체
- 생성자 함수: Intl.DateTimeFormat.prototype
- 인스턴스
  - method :
    - 포맷 결과 : format, formatRange
    - 포맷 결과를 각 단위 별로 분해하여 배열화 : formatToParts, formatRangeToPparts
    - ...
intl 객체 - NumberFormat 생성자 함수
- 언어에 맞는 숫자 서식을 적용하기 위한 객체
- 생성자 함수 : Intl.NumberFormat.prototype
- 인스턴스
  - method : (주로 콤마단위를 포맷팅하거나 금액의 단위를 표현해야할 때 주로 사용)
    - 포맷 결과 : format, formatRange
      - 포맷 결과를 각 단위 별로 분해하여 배열화 : formatToParts, formatRangeToPparts
      - ...

24. 프로토타입과 생성자 함수

객체 지향 프로그래밍
- 객체는 현실의 개념을 추상화하여 정의
  - 상태를 갖고 있고 -> this
  - 식별자(속성)을 갖고 있고 -> 속성
  - 어떤 행동을 갖고 있다 -> 메서드
- 인스턴스 객체
  - 개념의 일원으로써 생성된 객체
- 객체지향 프로그래밍 :
  - 객체라는 기본 단위로 나누고, 이들의 상호작용을 서술하는 방식
- 대표적인 객체지향 프로그래밍
  - 클래스 기반 객체지향 -> 자바, ...
  - 프로토타입 기반 객체지향 -> 자바스크립트 ...
- 프로토타입 객체
  - 객체의 인스턴스를 만드는 부모 객체 개념
  - 자바스크립트의 모든 객체는 부모 객체인 프로토타입 객체와 연결
  - 부모객체의 속성과 메서드를 상속받아 사용가능
프로토타입 객체 - 접근하기
- 모든 객체가 갖고 있는 [[Prototype]] 내부 슬롯
  - [[Prototype]]은 상속을 위해 사용
- __proto__라는 접근자 속성으로 접근 가능
  - __proto__로 Object.prototype 객체에 접근
프로토타입 객체 - 생성하기
- 함수타입에만 존재하는 prototype 필드
- 함수에 부모객체 존재
  - 함수를 활용하여 -> 부모객체의 인스턴스 생성가능
- 생성자 함수 (모든 함수가 인스턴스를 생성하는 것은 아님_생성자함수만)
  - 인스턴스 객체 생성시 사용
  - 대문자 함수명 컨벤션
  - new 키워드와 함께 호출
- 인스턴스의 부모 객체 === 생성자함수.prototype
- constructor : 자기 자신을 생성한 객체 참조

25. 프로토타입 chain과 상속

속성이 없는데 조회된다?
- 프로토타입 chain
  - 객체의 속성 참조시, 속성이 없는 경우 프로토타입 체인 동작
    - [[Prototype]]을 통해서 부모 객체를 탐색
  - 모든 객체의 부모는 Object.prototype
    - End of prototype chain 프로토타입체인의 종점
  - 만약 마지막 부모객체(Object.prototype)에서까지 속성을 찾지 못할 경우, undefined 반환

프로토타입 객체의 확장과 상속
- prototype 객체 속성과 메서드 정의시
  - 인스턴스 객체에서 부모 메서드와 속성을 참조
- 객체와 프로토타입에 동일한 이름의 속성이나 메서드가 있는 경우
  - 객체의 속성이 먼저 참조
  - property shadowing : 프로토타입 속성이 가려지는 현상
  - property overridng : 프로토타입 메서드가 가려지는 현상

26. class 문법

ES6 + Class
- ES6에 class 문법 추가됨
  - 클래스 기반 언어에 익숙한 개발자가 빠르게 학습할 수 있도록
- 기존 프로토타입 기반 상속 매커니즘의 추상화
  - 프로토타입 기반 패턴의 문법적인 설탕
class의 형태
- class 클래스명 { ... }
- class 내에는 메서드만 작성 가능
- 인스턴스 생성
  - new 클래스명();
class 문법
- constructor 특수 메서드
- method
  - 인스턴스 method
  - 정적 method
- 인스턴스 속성
  - 조회 및 조작
  - 할당 및 조작
- 클래스 상속
class 문법 - constructor
- 인스턴스를 생성하고, 클래스 필드를 초기화하기 위한 약속된 특수 메서드
  - 인스턴스가 생성될 때, 호출되는 메서드
- 인스턴스 생성시 전달한 인자를 constructor 메서드의 인자로 받을 수 있다.
- constructor 생략가능

class 문법 - 인스턴스 method
- 클래스 내에 존재하는 method
- method 내에서 클래스를 this로 접근 가능
- 클래스의 인스턴스 속성에도 접근 가능
class 문법 - 정적 메서드
- 클래스의 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 정의할 때 사용
- static 키워드 사용
- util용의 함수를 정의할 때 사용
class 문법 - 인스턴스 속성
- 클래스 내부에 캡슐화된 변수 == 멤버 변수
- this에 추가한 속성
- 인스턴스 속성은 this에 바인딩 필요
- 속성은 인스턴스 생성 이후 바로 참조 가능해야하므로, 인스턴스 속성 초기화는 constructor 메서드에서 보통 진행
class 문법 - 인스턴스 속성 조회 및 조작
- getter
  - 특정 인스턴스 속성을 조회하며 조작하는 메서드
  - 형태
    - 메서드 이름 앞에 get 키워드 사용
    - getter 메서드는 무조건 값을 반환
  - 사용시,
    - 일반 메서드처럼 호출하지 않고
    - 속성처럼 참조하는 형식으로 사용
class 문법 - 인스턴스 속성 할당 및 조작
- setter
  - 특정 인스턴스 속성에 할당하며 조작하는 메서드
  - 형태
    - 메서드 이름 앞에 set 키워드 사용
  - 사용시,
    - 일반 메서드처럼 호출하지 않고
    - 속성처럼 할당하는 형식으로 사용
class 문법 - 상속 - extends
- 코드의 재사용 관점에서 상속 필요(부모 - 자식)
- extends와 super 키워드를 통해 class에서 상속 구현
  - extends
    - 부모 클래스를 상속받는, 자식 클래스를 정의할 때 사용
  - class 부모 { ... }
    class 자식 extends 부모 { ... }
class 문법 - 상속 - super
- super()
  - 부모 클래스의 생성자를 호출하게 됨
  - 부모 클래스의 인스턴스 속성을 바인딩함
  - 자식 클래스의 생성자가 this에 접근하고 수정 가능
- 자식 클래스의 constructor 사용시 constructor 반환문 전에 사용되어야함
- super()
  - 부모 클래스와 공통된 변수를 선언, 초기화시 간결하게 처리 가능
  - 자식 클래스에 추가적인 변수가 필요한 경우, super 호출 이후에 작성
    - super 호출 이전에 this에 참조할 수 없음
  - super.메서드()
    - super 키워드를 통해 부모 클래스 접근 가능
    - 부모 클래스의 메서드 접근시, super[메서드 이름]으로 접근하여 호출

27. this와 화살표 함수

this란?
- 컨텍스트(문맥) 참조 가능한 키워드 (전역 Context, 함수 Context)
  - 객체를 참조하는 역할, 어떤 객체인지 동적으로 결정됨
- 함수 Context
  - 함수가 호출될때, 매개변수로 this가 암묵적으로 전달
  - 함수 호출 방식에 따라 this에 바인딩되는 객체가 상이 (동적으로 this 바인딩됨)
  - ES6 화살표 함수 : this 바인딩 제공하지 않음
- 함수 호출 방식 :
  - 함수 호출, 객체의 메서드 호출, 생성자 함수 호출, apply, cal, bind로 호출
this 바인딩 - 함수 호출 방식
- 전역객체에서 this 사용시
  - Browser-side : window
  - Server-side : global
- 함수 내부에서 this는 전역 객체에 바인딩
- 함수에 내부함수 존재시에도 this는 전역객체 바인딩
- 객체의 메서드 내에 내부 함수가 있을 경우, 함수 호출방식으로 취급되어 전역 객체를 바라봄
  - 이를 해소하기 위해
    - this를 다른 변수에 저장하고 사용하거나
    - 내부함수를 해당 객체에 bind

this 바인딩 - 객체 메서드 호출방식
- 메서드 내부의 this는 해당 메서드를 호출한 객체에 바인딩
- 프로토타입 객체의 메서드도 동일하게 해당 메서드를 호출한 객체에 바인딩

this 바인딩 - 생성자 함수 호출방식
- 생성자 함수 호출시 아래와 같은 순서로 동작
  1. 빈 인스턴스 객체 생성, this 바인딩
    - this는 빈 객체에 바인딩
  2. this로 속성 생성
    - this를 사용하여 동적으로 속성과 메서드 생성
  3. 생성된 객체 반환
    - 반환문이 없어도, 1번에서 생성되었던 객체가 반환됨

this 바인딩 - appl, call, bind 호출방식
- this를 명시적으로 바인딩 하는 방법
- Function.prototype.apply
- Function.prototype.call
- Function.prototype.bind
this 바인딩 - apply, call
- 함수명.apply(바인딩할 객체, [함수 호출시 넘기는 인자들])
- 함수명.call(바인딩할 객체, 함수 호출시 넘기는 인자1, ...)
  1. 함수 내의 this에 바인딩할 객체가 바인딩됨
  2. 함수에 인자들이 전달됨
  3. 함수 호출됨
- 바인딩과 동시에 함수를 호출한다.
this 바인딩 - bind
- 함수명.bind(바인딩할 객체)
  1. 함수 내의 this에 바인딩할 객체가 바인딩
  2. 바인딩된 함수 반환
- apply와 차이점 : 바인딩과 함수 호출이 분리 -> bind(호출할객체)()
this 바인딩 - 화살표 함수
- ES6의 화살표 함수
  - 함수를 선언할 때, this에 바인딩할 객체가 정적으로 결정
  - 항상, 상위 스코프 this를 가리킴(Lexical this)
- 화살표 함수의 형태 : 익명함수 형태
  - (인자들) => { ... }
- 지양해야하는 사용형태
  - 객체의 메서드 (+ prototype 메서드) -> 상위 스코프를 가리키기 때문에 전역 객체를 가리키게됨
  - 생성자 함수 : prototype 객체 없음

28. 스코프

어떤 변수부터 참조할까요?

프로그래밍에서 scope
- 스코프 == 변수 영역
- 변수가 유효성을 갖는 영역
스코프의 규칙
- 렉시컬 스코프 규칙, dynamic 스코프 규칙
스코프 종류
- 전역, 모듈, File, 함수, 블록 ...
Scope의 규칙
- 변수 영역을 지정하는 규칙
  - 정적 영역 규칙(lexical scoping rule)
  - 동적 영역 규칙(dynamic scoping rule)
정적 영역 규칙(lexical scoping rule)
- 어디서 호출하였는지가 아니라, 어디에 선언하였는지에 따라 스코프 결정(소스코드 구조 기준)
- 자바스크립트는 lexical scoping rule을 따름

동적 영역 규칙(dynamic scoping rule)
- 어디서 호출하였는지에 따라 스코프 결정
- 런타임때 결정됨(자바스크립트 해당X)
Scope의 종류
전역, 모듈, file, 함수, 블럭 스코프
전역 스코프 : 소스 코드 상의 모든 곳에서 사용할 수 있는 전역 변수
- 자바스크립트 : (브라우저 기준) window 객체
file 스코프
- 해당 파일 전체에서 접근 가능, 다른 파일에서 접근 불가능
- 원시적인 형태의 모듈 영역
- ES6+ 자바스크립트: <script type="module" ...>로 조회되는 파일
모듈 스코프
- 모듈을 지원하는 프로그래밍 언어에서 모듈 단위 변수 선언 가능
함수 레벨 스코프
- 지역 변수: 함수 내에서 유효한 변수
- 함수가 반환된 이후에는 사용 불가능
- 함수 외부에서 유효하지 않음
- 자바스크립트는 기본적으로 함수 레벨 스코프
블록 레벨 스코프
- 지역 변수 : 코드 블럭 내에서 유효한 변수
- ES6+ 자바스크립트 : let, const 키워드는 블록레벨 스코프
정리
- 자바스크립트의 Scope
  - 스코프 규칙 : lexcial scoping rule
  - 스코프 종류
    - 함수레벨 스코프 기반
    - 전역 스코프 : 전역객체 window의 속성(브라우저 기준)
    - ES6+ 부터 지원하는 스코프
      - 블록 레벨 스코프 : let, const 키워드는 블록레벨 스코프
      - file 스코프 : <script type="module" ...>로 조회되는 파일

29. 실행 컨텍스트

자바스크립트를 실행시킬 때, 자바스크립트엔진은 몇가지 정보를 알고 있어야함
- 변수
- 함수 선언
- 변수의 유효범위 (스코프)
- this
위의 정보들을 자바스크립트 엔진은 물리적 객체 형태로 관리를 하는데,
이 객체를 '실행 컨텍스트'라고 한다.
-> 실행 컨텍스트 : 코드가 실행되는 범위에 대한 개념
자바스크립트 엔진은 코드를 읽은 후에, 코드를 평가하고 평가된 코드를 실행한다.
여기서 평가(creation phase 실행컨텍스트 생성)와 실행(execution phase 실행컨텍스트 실행)은 실행컨텍스트에 의해서 관리된다.
실행 컨텍스트 생성 단계 - creation phase
- 코드 평가 단계 : Lexical Environment 생성
- 함수와 변수를 기록(Environment Record)
  - 선언 정의, 객체 정의
  - this 바인딩 : 함수 호출여부에 따라 달라짐
- 외부 환경 참조(Outer Environment Reference)
  - 스코프 체인이 형성됨
실행 컨텍스트 실행 단계 - execution phase
- 코드 실행 단계 : 위에서 아래로 코드가 실행
- 변수는 값이 할당
- 함수 실행 코드가 있을 경우, 함수 실행
  - 새로운 함수 실행 컨텍스트 생성(콜스텍에 쌓이게 됨) 및 함수 실행
실행 컨텍스트의 3가지 종류
- global 컨텍스트 == 전역 컨텍스트
  - 함수 내에서 실행되는 코드가 아니라면, 전역 컨텍스트에서 실행
  - ex) 브라우저 기준 : Global object = window
- functional 컨텍스트
  - 함수가 호출될 때마다, 함수에 대한 실행 컨텍스트 생성
  - 각 함수들은 자신만의 실행 컨텍스트 존재
- eval 컨텍스트
  - eval 함수만의 실행 컨텍스트 존재
우리가 작성한 자바스크립트 코드를 보면, 코드가 실행이 될때 하나의 Global Context와 여러개의 Functional Context가 생성될 것이다. 자바스크립트와 같은 인터프리터 언어는 call stack이라는 메커니즘을 사용
자바스크립트의 Call Stack
- 자바스크립트 엔진이 호출된 함수와 순서를 추적하는 방법
- 어떤 함수가 동작하고 있는지, 다음에 어떤 함수가 호출되어야하는지 등을 제어
- 함수가 반환된 후 실행이 올바른 지점에서 다시 선택되도록 한다.
  - == 함수 호출을 수행할 수 있게 해주는 Record 보관 구조
- stack 자료구조 : 프레임이 쌓이는, Last in First out(LIFO)형태의 자료구조
- 콜 스택: 함수 호출시 만들어지는 실행 컨텍스트가 쌓임
  - 하나의 일만 처리 가능
- 자바스크립트 엔진은 코드를 평가하여 실행컨텍스트를 만들어 -> 콜 스택에 하나씩 쌓고 콜스택에서 실행 컨텍스트를 실행하며 -> stack에서 하나씩 없앤다.
예시를 보면

정리
- 실행 컨텍스트 : 자바스크립트를 실행시키기 위해 필요한 정보를 객체 형태로 추상화 한 것
- 실행 컨텍스트의 단계
  1. 생성 단계 : lexical environment 변수 / 함수 선언 매핑, 외부 환경 참조, ...
  2. 실행 단계
- 실행 컨텍스트이 3가지 종류 : global context, functional context, eval context
- 자바스크립트의 콜스택 :
  - 호출된 함수와 순서를 추적할 수 있는 구조
  - 스택 자료구조 : LIFO

30. 클로저

실행 컨텍스트의 생성 단계에서 외부 환경 참조를 통해 스코프 체인이 형성됨

함수 내부에 함수가 존재한다면,

함수가 종료 되었는데, 아직 참조가 남아 있는 경우

발생 조건
- 외부(outer) 함수 실행 컨텍스트 환경의 변수를 참조하고 있는 내부(inner) 함수 실행 컨텍스트
상황
- 내부 함수 내에서 아직 외부 함수의 변수를 참조하고 있어, 외부(outer) 함수가 종료되었지만, 외부 함수의 참조가 유지되어, 외부 함수 환경에 접근할 수 있는 상황
클로저
- 반환된 내부 함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수
클로저 특징
- 함수가 종료되어도, 스코프를 기억
- 특정 스코프에 접근할 수 있는 함수
1. 상태 유지
2. 은닉화

Lina Hongbi Ko

프론트엔드개발자가 되고 싶어서 열심히 땅굴 파는 자

이전 포스트

[프로그래머스] 프론트엔드 기초: React + TypeScript(1)

다음 포스트

[프로그래머스] 프론트엔드 기초: React + TypeScript(2)

Programmers_BootCamp

1. flow control의 이해

2. 표현식과 문의 이해

3. choice - 조건문

4. conditional loop

5. for loop

6. break, continue문

7. 예외상황의 종류

8. throw와 Error 객체

9. try ... catch문

10. 객체란?

11. 객체 속성 control

12. 객체간 비교와 복사

13. 객체의 종류

14. Number, Math

15. Date

16. 문자열

17. 정규표현식

18. Collection 개요

19. index collection - 배열

20. key based collection - Map, WeakMap

21. key based collection - Set, WeakSet

22. JSON 객체

23. 국제화

24. 프로토타입과 생성자 함수

25. 프로토타입 chain과 상속

26. class 문법

27. this와 화살표 함수

28. 스코프

29. 실행 컨텍스트

30. 클로저

[프로그래머스] 프론트엔드 기초: React + TypeScript(1)

[프로그래머스] 프론트엔드 기초: React + TypeScript(3)

0개의 댓글