시행착오 기술 블로그

Utility tyles

타입스크립트는 공통타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다.

유틸리티 타입은 전역으로 사용 가능하다.

(1) Partial <T>

프로퍼티(속성)을 선택적으로 만드는 타입을 구성한다.

주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환한다.

interface Todo {
  title: string
  description: string
}

// obj매개변수 타입에 Partial Utility types을 추가
function updateTodo(obj: Partial<Todo>) { 
  return obj;
}

// updateTodo는 Todo 인터페이스를 객체로 받아와야하는데, 
// result에서 넘겨주는 값은 일부 (2개중 1개)만 넘기기 때문에 Partial<Todo>를 하지 않으면 오류
const result = updateTodo({
  title: "title",
})

console.log(result); // { title: 'title' } 출력

updateTodo function 함수는 Todo 인터페이스를 객체로 받아와야하는데, 
result에서 넘겨주는 값은 일부 (2개중 1개)만 넘기기 때문에 Partial<Todo>를 하지 않으면 오류가 발생한다.

(2) Readonly <T>

프로퍼티(속성)을 읽기전용(read only) 으로 설정한 타입을 구성한다.

(3) Record <T>

프로퍼티의 집합 K로 타입을 구성한다.

타입의 프로퍼티들을 다른 타입에 매핍시키는 데 사용한다.

(4) Pick <T, K>

프로퍼티 K의 집합을 선택해 타입을 구성한다.

interface Todo {
  title: string
  description: string
  completed: boolean
}

// Pick을 이용해 title 프로퍼티를 포함
type TodoPreview = Pick<Todo, "title">

const todo: TodoPreview = {
  title: "Clean room"  
}

(5) Omit <T, K>

모든 프로퍼티를 선택한 다음, K를 제거한 타입을 구성한다.

interface Todo {
  title: string
  description: string
  completed: boolean
}

// Omit을 이용해 description 프로퍼티를 제외
type TodoPreview = Omit<Todo, "description">

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,  
}

이 경우에 Partial 타입을 사용해도 됨.

(6) Exclude <T, U>

T에서 U에 할당할 수 있는 모든 속성을 제외한 타입을 구성한다.

(7) Extract <T, U>

T에서 U에 할당할 수 있는 모든 속성을 추출하여 타입을 구성한다.

(8) NonNullable <T>

null 과 undefined를 제외한 타입

(9) Parameters <T>

함수 타입 T의 매개변수 타입들의 튜플 타입을 구성한다.

(10) ConstructorParameters <T>

생성자 함수 타입의 모든 매개변수 타입을 추출한다.

모든 매개변수 타입을 가지는 튜플 타입(T가 함수가 아닌 경우 never)을 생성한다.

(11) ReturnType <T>

함수 T의 반환타입으로 구성된 타입을 생성한다.

(12) Required <T>

T의 모든 프로퍼티가 필수로 설정된 타입을 구성한다.

함수

매개변수: 함수를 정의할 떄 사용되는 변수를 의미한다. 인자 값 또는 파라미터 라고도 한다.

인수: 함수를 호출할 때 사용되는 값을 의미한다.

function add(x, y) {
	return x+y;
}

add(2, 5);

여기서 x와 y는 파라미터(인자)라고 하고, 2와 5는 인수값이라고 한다.

일급 객체 (First-class object)

자바스크립트와 타입스크립트의 함수는 일급객체이다.

다른 객체들에 일반적으로 적용가능한 연산을 모두 지원하는 객체를 일급 객체라고 한다.

• 다른 함수에 매개변수로 제공할 수 있다.
• 함수에서 함수를 반환하는게 가능하다.
• 변수에 함수 할당이 가능하다.

let elice = function() { return "coding"; };
console.log(elice()); // "coding"

함수를 정의해 변수에 저장하고, 변수를 호출하면 함수실행 결과가 반환되는 것을 확인할 수 있다.

함수 선언 방법

함수 선언식

함수 표현식

화살표 함수 표현식

단축형 화살표 함수 표현식

함수 생성자 (new 사용. 잘 쓰이지 않음)

타입 추론(Contextual Typing)

방정식의 한쪽에만 타입이 있더라도 반대쪽 타입을 추론할 수 있다.

이를 통해 타입을 유지하기 위한 노력을 줄일 수 있다.

function add(a: number, b: number) {
    const res = a + b; 
    return res.toString();
}

res 변수는 number이고,

return 반환 값은 string이라는 것이 명백하기 때문에 function의 반환값을 따로 타입을 명시하지 않아도 된다.

타입스크립트 필요성

타입을 명시하지 않고 사용하는 var, let은 변수가 선언되는 과정에서 타입이 지정된다. (동적 타이핑)

이로 인해, 타입 에러와 같은 실수가 있어도 컴파일 단계에서 확인이 어렵다.

타입스크립트를 이용한다면,

타입에러를 런타임 단계까지 가지 않고도 컴파일 단계에서 미리 확인하고 고칠 수 있게 된다.

타입스크립트 Type

(1) primitive type 기본형: 값을 저장하는 자료형

• string
• boolean
• number
• null
• undefined
• symbol (es6에서 추가됨)

// 문자형
let str: string = "hi";

// 불대수
let isTrue: boolean = true;

// 숫자
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

// null은 object
let n: null = null;

// undefined는 암것도 아님 
let ud: undefined = undefined;

자료형 간 관계성

null === undefined // false
null == undefined // true (wow)

null === null // true
nul == null // true

!null // true

// null은 연산가능, undefined는 연산안됨
isNan(1+null) // false
inNan(1+undefined) // true

(2) reference type 참조형

• object
• array
• function

// 변수 o의 타입은 object
// 함수 create의 타입은 void()
function create(o:object) : void(){
	// 코드 작성
}

// 참조형
create({prop: 0}) // 성공
create([1, 2, 3]) // 성공

// 기본형
create("string")  // 실패
create(false)     // 실패
create(42)        // 실패
create(null)	  // 실패
create(undefined  // 실패

let arr: number[] = [1, 2, 3]
let arr: Array<number> = [1, 2, 3]

(3) 타입스크립트 추가된 자료형

• tuple
• enum
• any
• void
• never

Enum

특정 값(상수)들의 집합

인스턴스 생성, 상속을 방지하여 상수값의 타입안정성이 보장된다.

// enum 선언
enum Car { 
    BUS = "bus", 
    TAXI = "taxi", 
    SUV = "suv" 
}

// enum Car를 이용해서 taxi값을 할당
const taxi:Car = Car.TAXI;
console.log(taxi); // TAXI 출력

함수의 매개변수 사용법 예제

addTwo 함수의 구조를 확인하세요. 인자로 건네받은 두 개의 number 타입 변수를 더해서 반환해줍니다.

function addTwo(a: number, b: number): number {
    return a + b;
}

console.log(addTwo(2, 3))

선택적 매개변수를 사용해 한 개 또는 두 개의 인자를 입력받는 addOneOrTwo 함수를 만드세요.
인자가 한 개라면 입력받은 인자를 그대로 반환하세요. 인자가 두 개라면 두 인자를 더해서 반환하세요.

// 한 개의 매개변수가 들어올 수도 있고, 두 개의 매개변수가 들어올 수도 있습니다.
// ?를 사용하는 것을 제외하면, 위 함수와 동일하게 작성합니다!
function addOneOrTwo(a: number,  b?: number): number {
    if (b === undefined) return a
    return a+b
}

console.log(addOneOrTwo(5, 10))
console.log(addOneOrTwo(10))

초기화 매개변수를 사용해 한 개 또는 두개의 인자를 입력받는 addDefault 함수를 만드세요.
인자가 한 개라면 입력받은 값에 10을 더해서 반환하세요. 인자가 두 개라면 두 인자를 더해서 반환하세요.

function addDefault(a: number, b?: number) {
    if (b === undefined) return (a+10)
    return a+b
    
}
console.log(addDefault(3)) // return 13
console.log(addDefault(12, 15))

나머지 매개변수를 사용해 두 개 이상의 인자를 입력받는 addTwoOrMore 함수를 만드세요.
입력받은 인자를 모두 더해서 반환하세요.

// // JS도 가변인자 (나머지 매개변수)를 갖고 있어요.
// // 워낙 유용하다보니, 많이 사용했을 것 같지만, 한 번 더 연습해 봅시다.
function addTwoOrMore(...args: number[]): number {
    return args.reduce((total:number, now: number) => total + now)
}

console.log(addTwoOrMore(2, 1))
console.log(addTwoOrMore(8, 8, 6, 1, 9, 6))

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

https://meetup.toast.com/posts/89

이벤트 루프

이벤트를 처리하는 반복되는 동작을 의미한다.

즉, 비동기 이벤트 동작을 처리하는 일련의 반복동작.

비동기 코딩이 어떤 순서로 수행되는지 이해할 수 있다.

이벤트루프 구성요소

콜 스택

작성된 함수들이 등록되는 LIFO 스택

이벤트 루프는 콜스택이 비어있을 때까지 스택의 함수를 실행한다.

메시지 큐

setTimeout 같은 지연 실행 함수를 등록하는 FIFO 큐

정해진 시간이 끝나면 콜스택이 비어있는 경우에 해당 함수를 콜스택에 추가한다.

잡 큐

Promise에 등록된 콜백을 등록하는 FIFO 큐

상위함수가 종료되기 전에, 콜스택이 비어있지 않더라도 잡큐에 등록된 콜백함수를 콜스택에 추가한다.

* setTimeout은 콜스택이 비어있을 때 실행된다.

* Promise는 상위함수가 종료되기 전에 실행된다.

function baz() {
  console.log('baz');
}

function bar() {
  console.log('bar');
}

function foo() {
    console.log('foo');
    setTimeout(bar, 0);
    baz();
}

foo();

위 코드의 실행순서는???

foo

baz

bar

그 이유는???

setTimeout은 비동기 동작으로 bar( ) 함수는 아무리 0초라 하더라도 메시지 큐에 들어간다.

콜스택에 foo( )까지 종료되어 콜스택이 비어있을 때 메시지 큐에서 콜스택으로 넘어간다. 

따라서 bar( )가 마지막에 실행되는 것이다.

Axios 와 Ajax

HTTP 비동기 통신 라이브러리

Axios 

웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리로, promise 기반으로 이루어져 있다.

즉, 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 Ajax(Asynchronous JavaScript and XML)처럼 사용된다.

Ajax

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 화면 전체를 새로 고침 하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능

Fetch 와 Axios

HTTP 요청을 처리하기 위한 자바스크립트의 라이브러리

Fetch

• 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않다.
• 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있다.
• JSON 자동 변환, 응답 시간 초과 설정 기능을 지원하지 않는다.

Axios

• 별도의 import나 설치가 필요하다.
• 브라우저 호환성이 뛰어나다.
• JSON 자동 변환, 응답 시간 초과 설정 기능 등을 지원한다.

Axios 사용법

CRUD

Create, Read, Update, Delete

C : Create(생성) - POST
R : Read(조회) - GET
U : Update(수정) - PUT
D : Delete(삭제) - DELETE

(1) 라이브러리 추가

index.html 파일에 아래 axios 라이브러리 관련 스크립트를 추가한다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

(2) POST

POST는 새로운 자원을 생성할 때 사용

axios.post(url, data 객체)

axios.post('https://reqres.in/api/login', {
      email: 'eve.holt@reqres.in',
      password: 'cityslicka',
    })
    .then(response => {
      console.log(response);
      token.innerHTML = response.data.token
    });
}

(3) GET

GET은 자원을 요청할 때 사용

axios.get(url)

axios.get('https://reqres.in/api/users/2')
    .then((response) => {
      let res = response.data.data;
      name.innerHTML = res.first_name + " " + res.last_name;
      email.innerHTML = res.email;
});

(4) PUT

PUT은 자원을 갱신할 때 사용

axios.put(url, 수정할 data 객체)

// 수정할 데이터를 선언
const url = 'https://reqres.in/api/users/2'
const object = { "first_name": "White", "last_name": "Rabbit" , "email": "alice@elice.io" }

// axios.put을 호출하고 result에 반환되는 사용자 데이터를 저장
axios.put(url, object)
.then((response) => {
  console.log(response.data)
  const res = response.data
  name.innerHTML = res.first_name + ' ' + res.last_name
  email.innerHTML = res.email
  updateDate.innerHTML = res.updatedAt
})

(5) DELETE

DELETE는 자원을 삭제할 때 사용

axios.delete(url)

axios.delete("https://reqres.in/api/users/2").then((response) => {
    console.log(response);
    status.innerHTML = response.status;
});

async/await

1. 기존의 비동기 처리 방식인 (1) callback (2) promise 의 단점을 보완하기 위해 등장한 문법.
2. 가독성이 높아지고 .then 메서드 체인 없이도 순서가 있는 비동기 처리가 가능해졌다.
3. async/await 함수의 리턴값은 항상 promise여야 한다. promise가 아닌 값이 리턴되면 Promise.resolve()로 감싸져 리턴된다.
4. 에러 처리는 try-catch 구문을 사용한다.

async function asynFunc() {
    try {
        let data = await fetchData();
        let user = await fetchUser(data);
        return user;
    } catch (e) {
    	console.log("실패:", e);    
    }
}

• function 키워드 앞에 async를 붙여 async 함수를 만든다.
• async 함수 내에서 await 키워드를 사용하여 fetchData() 와 fetchUser() 순서로 비동기 처리한다.
• 이 코드에서 fetchData() 와 fetchUser()는 Promise를 리턴해준다.
• try 구문에서 만약 오류가 발생하면 코드실행을 중단하고, catch로 넘어가 에러처리를 한다.

fetch API

1. 기존 XMLHTTPRequest 를 대체하는 HTTP 요청 API이다.
2. ES6에 추가된 Promise를 리턴하도록 정의되었다.
3. 네트워크 요청 성공시, promise는 response 객체를 resolve( )하고, 실패시 promise는 error객체를 reject( )한다.

let result = fetch(serverURL) // fetch API 호출하면 promise를 반환

result.then(response => {
    if(response.ok) {
        // 호출 성공시 실행할 코드 입력
        // ...
    }
})
.catch (error => {
    // 호출 실패시 실행할 코드 입력
    // ...
})

response.status : HTTP 상태코드가 저장된다.

response.ok : HTTP 상태코드가 200~209 이면 true를 저장하고, 아니면 false를 저장한다. 

response.url : 요청한 url 정보를 담는다.

response.header : Response객체의 헤더 정보를 얻을 수 있다.

response.blob() : 파일을 요청했다면 여기에 파일이 들어있다.

response.json() 메서드 : body 정보를 json으로 만드는 Promise를 반환하는 비동기 함수이다.

fetch를 Post 요청

fetch (url, options)로 옵션사항으로 post 방식을 선택할 수 있다.

옵션에는 headers / body 정보도 함께 전달 가능하다.

fetch(serverURL, {
    method: 'post',
    headers: 
    {
        'Content-Type': 'application/json;charset=utf-8',
        Authentication: 'mysecret'
    },
    body: JSON.stringify(formData)
})
.then(response => {
	return response.json();
})
.then(json => {
	console.log('POST 요청 결과', json)
})

Post 정보 조합하기

...

Promise

자바스크립트에서 Promise API는 비동기 API이다.

따라서 setTimeout은 Task queue에 저장되는 것과 달리, Promise API는 Job queue에 저장된다.

job que가 task que보다 우선순위 높기 때문에 아래와 같은 결과가 나온다.

setTimeout(() => {
	consoloe.log("타임 아웃1")
}, 0);

Promise.resolve().then( () => console.log("프로미스1"));

setTimeout(() => {
	consoloe.log("타임 아웃2")
}, 0);

Promise.resolve().then( () => console.log("프로미스2"));


// 출력
// 프로미스1 프로미스2
// 타임 아웃1 타임 아웃2

Promise의 작업 상태

new Promise( )로 프로미스를 생성하고 종료 될 때까지 3가지 상태를 갖는다.

(1) Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다. 이때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

new Promise(function(resolve, reject) {
  // ...
});

(2) Fulfilled(이행 == 완료) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

여기서 콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 된다.

new Promise(function(resolve, reject) {
  resolve();
});

이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

(3) Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

reject를 아래와 같이 호출하면 실패(Rejected) 상태가 된다.

new Promise(function(resolve, reject) {
  reject();
});

실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다. (reject보다는 catch를 추천함)

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

Promise.resolve와 Promise.reject

Promise.resolve함수는 Promise를 바로 반환한다.
Promise.reject함수는 실패한 Promise를 바로 반환한다.

Promise
    .resolve(10)
    .then(console.log)

Promise
    .reject("Error")
    .catch(console.log)

Promise로 then, catch, finally 코드

then ( ) 메서드: 성공했을 때, 실행할 콜백함수를 인자로 넘긴다.

catch ( ) 메서드: 실패했을 때, 실행할 콜백함수를 인자로 넘긴다.

finally ( ) 메서드: 성공/실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
}).finally(function() {
  console.log("promise 종료"); // 성공/실패 여부에 관계없이 항상 실행
});

Promise Chaning ( 여러 개의 프로미스 연결하기)

then() 메서드를 호출하고 나면 새로운 프로미스 객체가 반환된다. 따라서, 아래처럼 체인 형식으로 구현이 가능해진다.

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

프로미스 객체를 하나 생성하고 setTimeout()을 이용해 2초 후에 resolve()를 호출하는 예제

resolve()가 호출되면 프로미스가 대기 상태에서 이행 상태로 넘어가기 때문에 첫 번째 .then()의 로직으로 넘어감.

첫 번째 .then()에서는 이행된 결과 값 1을 받아서 10을 더한 후 그다음 .then() 으로 넘겨줌.

두 번째 .then()에서도 마찬가지로 바로 이전 프로미스의 결과 값 11을 받아서 20을 더하고 다음 .then()으로 넘겨줌.

마지막 .then()에서 최종 결과 값 31을 출력.

Promise.all

Promise 배열을 받아 모두 성공시 각 Promise의 resolved 값을 배열로 반환한다.

하나의 promise라도 실패할 시, 가장 먼저 실패한 promise의 실패 이유를 반환한다.

Promise.all([
    promise1,
    promise2,
    promise3
])
    .then(values => {
        console.log("모두 성공", values)
    })
    .catch(e => {
        console.log("하나라도 실패", e)
    })

자바스크립트의 비동기 처리

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성으로,

자바스크립트가 싱글 스레드라서 비동기처리가 필요한 것이다!

멀티스레드인 자바는 하나의 스레드가 놀아도, 다른 스레드가 일할텐데 자바스크립트는 스레드가 하나라 쉴틈없이 일을 하는 것.

비동기 처리는 이벤트 루프와 콜스택(call stack)을 이용한다.

call stack에는 func1, func2... 가 쌓인다. 

그중 비동기 코드가 호출되면 webAPI를 통해 완료된 결과는 task queue에 저장되고, 

이벤트 루프는 call stack과 task queue를 감시하다가, call stack이 비워지면 task queue에 저장되어 있는 콜백함수를 call stack에 저장한다.

참고! 

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)

사례1) 제이쿼리의 ajax 또는 fetch

제이쿼리로 실제 웹서비스를 개발할 때, ajax 통신을 한다. 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데, 이때 ajax 통신으로 해당 데이터를 서버로부터 가져온다.

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined

$.get(url, function(response) {  })  

url에 HTTP get 요청을 보내 받아온 데이터를 response 인자에 저장된다.

Q. 콘솔에 getData()를 출력하면 undefined가 나오는 이유는?

A.  $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문.

따라서, getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값 undefined를 출력

사례2) setTimeout(function() {    }, ms)

ms 시간만큼 기다렸다가 function을 실행하는 API. ms동안 기다리기만 하는게 아님. 그 다음줄의 코드를 실행하는 것.

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

여기서  #1 출력 -> #3 출력 -> #2가 출력된다.

콜백 함수 Callback

콜백함수

비동기적으로 동작하는 경우에, 데이터가 준비된 시점에 원하는 동작을 수행하도록 콜백함수를 사용한다.

콜백지옥

서버에서 데이터 받아옴, 그 데이터로 파싱하여 id추출, id로 인증함, 인증결과를 화면에 표출함.

이 모든 과정을 비동기로 처리하면 아래와 같은 콜백 안에 콜백을 계속 물게 된다. 이게 콜백 지옥

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

콜백지옥의 해결책

ES6에서 제공하는 Promise과 ES8에서 제공하는 Async / Await

브라우저에서 제공하는 webAPI setTimeout, setInterval 등이 존재한다.

실행 컨텍스트

자바스크립트 코드가 실행되는 환경을 의미하며, 자바스크립트의 여러 개념을 깊게 이해하기 위해 중요한 개념.

실행 컨텍스트를 이해하면 자바스크립트의 동작을 스펙 레벨에서 이해하고 활용할 수 있음!

Global(전역)에서 시작해서, 함수가 호출될 때 코드에서 참조하는 변수, 객체, this 등은 스택에 쌓이게 된다.

따라서 1) 전역에 존재하는 코드, 2) 함수에 존재하는 코드를 잘 구별해야 한다.

실행 컨텍스트 Stack

전역에 존재하는 코드는 함수나 클래스 내부의 코드를 무시하고 컨텍스트를 가진다.
함수에 존재하는 코드는 함수 내부에서만 컨텍스트를 가진다.

그리고 호출되는 순서에 따라 스택에 쌓이고, 나중에 쌓여진 함수부터 실행된다.

컨텍스트 연산함수

// mul 함수는 숫자 num을 입력받아 내부에 정의된 a, b와 함께 곱한 결과를 리턴합니다.
function mul(num) {
  let a = 10;
  let b = 20;
  // 코드가 동작하도록 mul30 함수를 만드세요.
  function mul30(num){
      return a*b*num
  }
  return mul30(num);
}


// add30 함수는 숫자 num을 입력받아 내부에 정의된 a, b와 함께 더한 결과를 리턴합니다.
function add30(num) {
  let a = 10;
  return (function () {
    let b = 20;
    // 코드가 동작하도록 add 함수를 만드세요.
    function add(){
        return a+b+num
    }
    return add();
  })();
}

const myModule = { mul, add30 };

export default myModule;

렉시컬 환경

렉시컬 환경은 식별자와 식별자에 연결된 값을 저장하는 자료구조이다.

const myName = "Elice";

function Coder() {
  const title = "Coder Land";
  return title;
}

전역으로 생성되는 렉시컬 환경에서는 myName, Coder 이렇게 2개의 식별자와 식별자에 연결된 값이 저장된다.
myName에는 Elice가 들어있지만, Coder에는 스코프 체인으로 Coder와 연결되어 있다.

스코프 체인은 스코프가 연결된 구조를 말한다.
그리고 Coder 함수의 렉시컬 환경에서는 title이라는 1개의 식별자와 식별자에 연결된 값이 저장된다.
또한, 전역 렉시컬 환경에 스코프 체인으로 연결되어 있습니다. 전역에서는 Coder라는 정보를 갖고 있기 때문이다.

자바스크립트 실행

인터프리터 언어로, 자바스크립트의 컴파일은여러단계로 구성되며 각 단계별로 코드를 처리하는 목적이 다르다.

이를 알아야, 코드가 선언되고 실행될 때 생기는 버그나 메모리 누수(Memory Leak)을 이해하고 고칠 수 있다.

자바스크립트가 실행되면 초기화 되는 항목

• this 포인터 : 글로벌 스콮에서는 window를 가리킨다.
• variable Object : 접근할 수 있는 변수들 {  }
• Scope Chain : [   ] global이나 함수스콥프 등으로 제한적

함수 호출 종류

• 직접 호출
• 메서드 호출
• 생성자 호출
• 간접 호출( call, apply 등)
• 콜백 함수 호출

dynamic binding

환경에 따라 this가 가리키는 것이 달라지는 것을 의미한다.

bind, apply, call 등으로 this가 가리키는 것을 조작할 수 있다.

주의) 화살표 함수일 때 this

만약 화살표함수를 이용해 호출을 하면, this는 함수가 생성된 환경을 가리킨다. 

일반 함수를 이용해 호출하면 this는 호출된 환경을 가리킨다. 

자바스크립트 비동기

자바스크립트는 다른 프로그래밍 언어와 달리 싱글 스레드 환경에서 비동기 동작을 처리한다.

이벤트 루프에 대해 이해하면, 자바스크립트 엔진 레벨에서의 비동기 코드 동작을 이해할 수 있다.

복잡한 비동기 동작을 이해하고 높은 수준의 비동기 코드를 작성하며, 버그의 원인을 파악할 수 있게 된다.