200922_TIL

Today I learned

• callback
• promise
• fetch

@@ 최근에 계속 Toy 알고리즘과 비동기 프로그래밍 파트를 나가며 정신없이 계속 문서를 읽고 테스트를 실행해보며 지내고 있다. 비교적 알음알음, 들어보고 접해봤던 파트들에 비하면 점점 생소한 파트이기도 하고 자료가 방대해서 메소드나 프로퍼티를 다 알고 넘어갈 수가 없어지면서 난이도가 높다기보단, 어떤 것을 알고 모르는지 체크하기가 점점 힘들어지는 느낌이다.
부족한 개념들을 공식문서들을 참조하며, 페어를 진행하고 오피스아워 진행하면서 질문도 해보고 스스로 코드 찍어가보면서 답도 구하고, 정말 모르겠는건 도서 참조해서 적어가보고 있다.
그래도 시간 부족을 너무 느낀다. 헤매다보면 저녁 개인공부시간이 훌쩍 지나가있고, 그 다음날은 새로운 레슨을 나가느라 바쁘다.
최대한 쫓아가보고 주말이나 다음주 추석을 잘활용해야겠다.

주말에 네이버 코딩테스트에 연습삼아, 참전했다가 역시나 쓴 패배를 맛보며 돌아나왔다. 한문제는 풀고 효율성에 발목이 잡혔고, 그 다음 문제는 전략을 세우다가 시간이 종료됐다. 그냥 개인공부를 할 걸 너무 섣부른 참가였나 싶었지만, 도전해본 것에 만족하기로 했다.

이번 토이 문제는 DFS 관련 문제였는데, 순서대로 트리 값이 다 찍혔는데, 초기 설정이 잘못된것인지 이전 테스트 케이스 값들이 다음 테스트 케이스에 찍히는 문제가 도저히 풀리지 않는다..😖😖 한번만...다시풀자 풀자 해서 3번 넘게 지우고 다시 쓰기를 반복했는데, 다시금 풀릴 것 같다가도 꽉 막힌 기분. 어찌저찌 순서는 구현했는데, 역시 재귀는 콜스택에 쌓이고 빠질 때까지 다 생각을 해야해서 너무 어렵게 느껴진다.

Callback

• 나중에 호출할 함수

• 보통 익명함수로 사용한다

• setTimeout

  • 콜백 실행을 지정된 밀리초만큼 지연하는 내장함수

• 코드가 반드시 우리의 작성 순서대로 되지 않는다.

• 비동기적 실행의 가장 큰 목적은 어떤 것도 차단하지 않는다는 것이다.

  (가령 코드가 실행될 동안 사용자는 입력도 할 수 없고, 화면도 업데이트 되지 않음)

• 콜백으로만도 비동기 코드를 실행할 수 있다. ex) readFile의 콜백함수를 인자로 넣어서 처리

• 비동기 코드가 늘어날 수록 버그 없는 관리하기 쉬운 코드를 작성하는 일은 어려워진다.

• 때문에 Promise 가 등장했다.

Promise

• Promise는 콜백의 단점을 해결하려는 시도 속에 나왔다.
• 그러나 Promise가 콜백 함수를 대체하는 것은 아니다.
• Promise는 프라미스 기반 비동기적 함수를 호출하면 그 함수는 Promise 인스턴스를 반환한다.
• 프라미스는 성공 하거나 실패하거나 두가지 뿐인 결과를 가진다 ( fulfilled / rejected )
• 성공한 프라미스가 나중에 실패하는 일은 없다.
• 프라미스가 실패하거나 성공하면 결정됐다(setteled)고 한다.
• 프라미스는 객체이므로 어디든 전달할 수 있다. 비동기적 처리를 다른 함수에서 하고 싶다면 프라미스를 넘기기만 하면 된다.
• 프라미스 하나에 여러개의 resolve , reject 를 호출해도 소용없다. 첫번째 호출만이 의미를 가진다.
• 프라미스를 변수에 할당하지 않고 then 핸들러를 바로 호출하면, (then 핸들러는 성공 콜백과 에러 콜백을 받기때문에) 두가지 콜백 중 하나가 실행된다.

• reject와 resolve가 함수를 멈추지는 않는다. 그저 프라미스의 상태를 관리할 뿐이다.

• 프라미스는 완료되거나 파기될 뿐, 진행 상황을 알려주진 않는다. ( Q 라는 프로미스 관련 라이브러리는 이런 기능이 들어있다 )

• 비동기 작업의 최종 완료 또는 실패를 나타내는 객체

• promise의 사용법

  • 함수가 Promise를 반환하도록 하면 , then을 이용하여 비동기 함수를 호출 할 수 잇다.

• 콜백함수를 전달하는 고전 방식과 달리 promise가 보이는 특징

  • 콜백은 자바스크립트 이벤트 루가 현재 실행중인 콜스택을 완료하기전에는 절대 호출되지 않는다.
  • 비동기 작업이 성공하거나 실패한 뒤 then()을 이용하여 추가한 콜백의 경우도 위와 같다.
  • then()을 여러번 사용하여 여러개의 콜백을 추가할 수 있다. 그리고 각각의 콜백은 주어진 순서대로 하나하나 실행되게 된다.

• 프로미스는 코드를 분리할 수 있다. 프로미스 생성 후 변수에 대입하고 필요한 곳에 쓰면 된다.

• 조건문과 같이 프로미스를 다르게 생성할 수 도 있다. Promise를 변수에 대입할 수 있기 때문에 활용도가 높다.

[프로미스 체인]

• 프라미스가 완료되면 다른 프라미스를 반환하는 함수를 즉시 호출할 수 있다.
• then을 여러번 연속해서 쓸 수 있다. ( 쳬이닝) then 이 또 다른 값을 반환하거나, 다른 Promise를 반환한다면 해당 Promise가 resolve된 후에 다음 then이 실행된다.
• then에선 이전 프라미스에서의 반환값(resolved value)을 파라미터로 받는다.
• mongoose 에서 프로미스를 지원하기 때문에 , 메소드에서 프로미스 객체를 반환하고 연속적으로 then을 사용 가능하다.
• 만약 catch 가 then 체이닝에서 마지막에만 존재해 에러를 한번 처리하기 때문에 확인이 힘들다면, 리턴하는 프로미스 객체에 catch 를 붙일 수 있다. 그러면 프로미스 체이닝을 끊을 수 있다. throw로 에러를 발생시키면 뒤의 then 들은 호출되지 않는다.
• 프로미스 체인은 예외가 발생하면 멈추고 chain 을 돌아서 아래에서 catch를 찾아낸다. 이것은 동기 코드가 어떻게 동작하는지 모델링 한 것이다.

[결정되지 않은 프로미스 방지]

• 프라미스는 비동기적 코드를 단순화, 콜백이 두번이상 실행되는 문제를 방지

• 그러나 프라미스가 결정되지 않는 문제까지 자동으로 해결하진 못한다
  이 경우 에러가 일어나지 않으므로 이런 실수는 매우 찾기 어렵다.

• 결정되지 않은 프라미스를 방지하는 한가지 방법은 타임아웃을 거는 것이다.
  충분한 시간이 지났는데도 프라미스가 결정되지 않으면, 자동으로 실패하게 만든다.

• Promise.all

  • all 메소드는 여러 프로미스 객체들을 하나로 모아서 처리할 수 있다.
  • 모든 메소드가 성공하면 then, 하나라도 실패하면 catch 로 연결
  • Promise.all 안에서 fetch 를 넘겨줄 때 둘중 하나가 전달받으면 넘어가버리는 현상이 있었다. 그래서 then 안의 콜백함수 앞에 async 통해서 담아주니 이 문제를 해결 할 수 있었다. 이렇게 되는 이유는 무엇일까.

• Promise.race

  • 여러 프로미스 중 가장 빨리 성공하거나 실패한 결과값을 보여준다.

web API

• Body
  • Fetch API의 Body mixin은 응답/요청서의 본문을 나타내며, 내용 유형이 무엇이며 어떻게 처리해야 하는지 선언할 수 있다.
  • method
    • blob()
    • json()
      • response 스트림을 취하고, 이에 body 데이터를 읽어서 JSON으로 파싱한 결과를 반환한다.
    • text()
      • USVString으로 된 프로미스 값 반환.

fetch

• Web API

• Fetch에는 일반적인 오브젝트로로 Request 와 Response가 포함

• fetch()를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안된다.

• fetch()는 Promise객체를 반환

• fetch API 의 request

• 리퀘스트가 성공하든 실패하든 해당 리퀘스트 통신에 대한 Response객체가 취득된다.

• fetch()의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없다.

• response.json()

  • Body mixin의 json() 매서드는 Response 스트림을 가져와 스트림이 완료될때까지 읽는다