#YIL(Yesterday I Learned)_23.10.21-1

# 어제 한 일 

1) 오전 팀회의를 통해 개인과제 진행 상황 체크 및 어려운점 파악해서 질문 리스트 만들기  O 
2) 오전 중에 able팀 찾아가서 api 관련하여 코드 비교해보며 분석하기  O 
3) 개인과제 검색 기능 구현하기  O 
4) 이전 able 팀장님이 조언해준 내용 추가로 찾아서 공부하기(진행중)  △

<개인 프로젝트 진행 중 메인 타이틀 환경 동영상 형태로 변경>

---

# 어제의 느낀 점 

// 개인과제를 통해 배우는 코딩은 산넘어 산

 

자바스크립트 개념을 배우며 프로젝트를 진행하다 보니 찾아봐야 할 개념들이 엄청 많았다. 구글링해서 긁어오는 코드들을 읽어 내보려고 노력하지만 아직은 무리인가보다. 그래도 바로바로 able 팀장님을 찾아뵈어 읽은 방법과 모르는 코드를 물어보고 조언을 받아서 어떻게 정리를 해야 할지, 어떻게 해야 방향을 제시받았다. 당장 팀장님을 찾아갔을 때만 하더라도 구글링해서 작성한 코드에 대해 질문을 20~30개를 받을 정도였고 대부분 왜 이런 로직으로 작성했는지 설명 못하였지만 팀장님이 설명해 주신 내용을 듣고 한 번 더 내용을 정리하게 되면서 왜 이 코드를 사용했는지 그리고 다른 방법은 무엇이 있는지, 어떤 게 효율적인지에 대해 알게 된 소중한 시간이었다.

//Consideration of the code_API 적용에 대한 코드를 정리하면서

API 적용에는 async/await 방식과 Promise 체인이 있는데 구글링을 통해 처음 접하고 작성한 코드가 전자의 방식이다. async/await는 비동기 작업을 동기적으로 수행하고 try... catch를 사용해서 에러를 처리하면 catch 블록에서 에러를 콘솔에 출력하는 방식이었다. 하지만 후자의 방식은 promise임을 통해 비동기 작업 then() 방법을 사용하여 각각의 비동기 단계를 연결하며, catch 메소드를 사용하여 에러를 처리하고 콘솔에 출력한다.

후자의 방식으로 변경한 이유는 아직 Async/Await의 개념에 대해 지식이 너무나도 부족했다. 고민 끝에 지금 하는 개인 프로젝트에 발맞춰 간결하고 작업이 단순한 Promise 체인의 방법으로 변경하였다. 아직 더 세세히 뜯어보고 공부하려면 찾아서 정리해야 할 개념들이 주말을 활용해서 잘 공부해 봐야겠다.

 

// 추가 개념정리 

# promise란? 
- ES6에서 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 
- 전통적인 콕백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 
- 프로미스는 Promise 생성자 함수를 인스턴스화 한다.
- 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 resolve 와 reject함수를 인자로 전달 받는다. 

 // Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

promise는 비동기 처리가 성공(fufilled) 하였는지 또는 실패(rejected)하였는지 등의 상태(state) 정보를 갖는다. 
- pending: 비동기 처리가 아직 수행되지 않은 상태
- fulfilled: 비동기 처리가 수행된 상태(성공)
- rejected: 비동기 처리가 수행된 상태(실패)
- settled: 비동기 처리가 수행된 상태(성공 또는 실패)

# promis 호출 과정 
1. 비동기 함수 내에서 promise 객체를 생성하고 그 내부에서 비동기 처리를 구현한다. 
2. 이때  resolve 메소드의 인자로 비동기 처리 결과를 전달하는데, 이 처리 결과는 promise 객체의 후속 처리 메소드로 전달된다. 
3. 만약 비동기 처리에 실패하면 reject 메소드를 호출한다. 이때 reject 메소드의 인자로 에러 메시지를 전달한다. 이 에러 메시지는 promise 객체의 후속 처리 메소드로 전달된다. 

# 후속 리 메소드에는 대표적으로 then(Promise 반환)과 catch(예외)가 있다. 
1) then
then 메소드는 두 개의 콜백 함수를 인자로 전달 받는다. 첫 번째 콜백 함수는 성공(fulfilled, resolve 함수가 호출된 상태) 시 호출되고 두 번재 함수는 실패(rejected, reject 함수가 호출된 상태) 시 호출된다. 
then 메소드는 promise를 반환한다. 

2) catch
예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출한다. 
catch 메소드는 Promise를 반환한다. 

Promise 체이닝 비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우, 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 콜백 헬이 발생한다. 
프로미스는 후속 처리 메소드인 then이나 catch로 메소드를 체이닝(chainning)하여 여러 개의 프로미스를 연결하여 사용할 수 있다. 이로써  콜백 헬을 해결한다. 

따라서 then 메소드가 Promise 객체를 반환하도록 하면(then 메소드는 기본적으로 Promise를 반환한다.)  여러 개의 프로미스를 연결하여 사용할 수 있다. 

---

## Async / Await의 이해 
Async과 await 는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 피로미그의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다. 특히 복잡했던 Promise를 조금 더 편하게 사용할 수 있다. 

# Async과 Await의 기본 문법 

async function 함수명() {
  await 비동기_처리_메서드_명();
}

#async의 개념 
async 키워드는 function 앞에 사용한다. function 앞에 async을 붙이면 해당 함수는 항상 Promise를 반환한다. 
Promise가 아닌 값을 반환하더라도 이행 상태의 Promise(resolved promise)로 값을 감싸 이행된 Promise가 반환되도록 한다. 

# 예시) 아래 예시 함수를 호출하면 result가 1인 프라미스가 반환된다. 

async function f() {
  return 1;
}

f().then(alert); // 1
---
위 함수에서 1을 Prpmise.resolve로 감싸도 같은 결과를 반환한다. 
---
async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

즉, async이 붙은 함수는  반드시 Promise를 반환하고, Promise가 아닌 것은 Promise로 감싸 반환한다. 

---

# await 개념 
await는 async 함수 안에서만 동작한다. await는 `기다리다`라는 뜻을 가진 영단어이며, 프라미스가 처리될 때 까지 기다리는 역할을 한다. 결과는 그 이후 반환된다. 

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f( );

- 함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 `중단` 되었다가 프라미스가 처리되면 실행이 재개된다.
- 이때 프라미스 객체의 result 값이 변수 result에 할당된다. 따라서 위 예시를 실행하면 1초 뒤에 `완료!`가 출력된다. 

await 는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다. 프라미스가 처리되면 그 결과와 함께 실행이 재개된다. 프라미스가 처리되길 기다리는 동안에 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.
- await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then( )등을 사용해야 했을 것이다. 하지만 async await 문법덕에 비동기에 대한 사고를 하지 않아도 된다.
- 또한, await는 promise.then 보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법이다.  promise.then 보다 가독성 좋고 쓰기도 쉽다. 

---

#async/await와 promise/catch
- #async/await를 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않다. 또한 .catch 대신 일반 try...catch를 사용할 수 있다는 장점도 있다. 항상 그러한 것은 아니지만, promise.then을 사용하는 것보다 async/await를 사용하는 것이 대개는 더 편리하다. 
- 그런데 문법 제약 때문에 async 함수 바깥의 최상의 레벨 코드에선 await를 사용할 수 없다. 그렇기 때문에 관행처럼 .then/catch를 추가해 최종 결과나 처리되지 못한 에러를 다룬다. 

---

# 차주 월요일에 할 일 

1) 오전 팀회의하면서 서로 코드 공유하기 

2) 개인과제 마지막날인 만큼 빠진 요구사항 있는지 다시 확인하기

3) 개인과제 영상 찍고 제출하기 

4) 개인과제가 끝나면서 지금까지 만든 코드 분해해서 내용 곱씹어보기