230328(화)

🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🔑 오늘의 학습 키워드

동기(synchronous)?

• 동시에 일어난다는 의미로, 여기서 동시에 일어난다는 것은 요청과 결과가 동시에 일어난다는 의미
• 앞의 코드가 아직 실행 중이라면 그 실행이 끝날 때까지 기다려야한다.(블로킹)
• 설계가 매우 간단하고 직관적이다.

비동기(asynchronous)?

• 동시에 일어나지 않는다는 의미로, 여기서 동시에 일어나지 않는다는 것은 요청과 결과가 같은 자리에서 동시에 일어나지 않음을 의미
• 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간에 다른 작업을 할 수 있어, 시간적으로 좀더 효율적이다.

setTimeout의 동작원리?

setTimeout(() => console.log('비동기입니다.'), 10000);

setTimeout은 브라우저의 V8 엔진 자체에 내장되어있는 함수가 아니다. 웹 브라우저가 제공하는 api인 WEB API 중 하나이다. 실행되면 10000ms 즉, 10초 뒤에 cb(callback) 함수를 실행해달라는 이벤트가 등록되고 10초 뒤에 cb가 실행된다.

아래의 말을 이해해보기

자바스크립트는 싱글 쓰레드 기반이며 논 블로킹 방식의 비동기적인 동시성 언어이며 콜 스택, 이벤트 루프와 콜백 큐 그리고 여러가지 다른 API들을 가지고 있다.

• 자바스크립트는 싱글 쓰레드이지만, 실행되는 환경(브라우저, nodejs 등)에서 제공하는 event loop, callback queue를 통해 비동기적으로 작동할 수 있다.
• 여기서 말하는 동시성은 우리가 생각하는 비동기 로직이 동시에 실행되는 성질을 말한다.(동기 = 동시에 일어난다, 비동기 = 동시에 일어나지 않는다 의 개념은 입력과 출력이 같은 자리에서 일어나고 말고를 말한다.)

JSON(JavaScript Object Notation)

• 이전에는 주로 XML 형식으로 서버에 데이터를 요청했다. 하지만 이후 비동기적으로 데이터를 요청해서 받을 수 있는 방법이 생겨나면서 JSON 형식의 데이터를 받아올 수 있게 되었다.
• 사실상 XML은 이제 거의 잘 안쓰이고 있으며, JSON 형태를 거의 표준처럼 사용하고 있다. 클라이언트에서 데이터를 보낼 때나 받을 때 모두 JSON 형태를 사용할 수 있다.

fetch api

• 기존에는 XMLHTTPRequest 객체를 통해 비동기 데이터 통신을 진행하였다.
• 점점 비동기 요청이 더 복잡하고 증가되면서, 비동기통신 로직에 보기 좋은 패턴이 적용되고 있다.
• fetch api는 프로미스 패턴을 사용하여 비동기 로직을 좀더 동기적으로 보이게끔 해준다.(가독성을 높여준다.)

Promise 패턴

• Promise 객체를 사용하여 비동기 처리를 동기적인 것처럼 보여주는 패턴이다.

Promise: all vs allSettled

• Promise.all(): 모든 Promise 객체가 fulfilled되면 resolve한 값들의 배열을 반환. 단, 하나라도 에러 발생 시 즉시 reject한 값 반환.
• Promise.allSettled(): fulfilled와 rejected 상관없이 모든 Promise 객체가 settled가 되면 그 결과를 반환해준다.

Promise: race vs any

• Promise.race(): fulfilled든 rejected든 그저 가장 먼저 settled된 값을 반환한다.
• Promise.any(): 먼저 처리된 상태들 중에서 fulfilled인 상태만 반환한다.(만약 모든 Promise에서 fulfilled가 없다면 AggregateError 발생)

Promise의 then

• Promise를 통해 resolve와 reject 함수를 실행시킬 수 있다.
• 이 때, 어떤 값을 resolve하게 되면 그 때 우리는 그 값을 then의 내부 콜백함수의 파라미터로 받아서 로직을 처리할 수 있다.
• 좀 단순하게 생각해보자면, then(cb)를 통해서 우리는 resolve가 발생했을 때(이벤트 개념), then으로 전달한 cb를 resolve로 전달한 값과 함께 micro task queue에 보내게 된다.

🍀 오늘의 고민 키워드

fetch와 then 코드 실행

fetch(URL).then(cb1).then(cb2)

위의 코드가 어떻게 실행되고 처리되는지?!

fetch와 then, then은 이 자체는 동기적으로 실행이 된다. fetch 내부에서 서버와의 통신이 성공하면 어떤 응답을 resolve하게 되는 프로미스를 반환한다.
즉, resolve 함수가 실행되면 then을 통해 등록된 cb가 micro task queue에 전달되며 콜스택이 비었을 때 실행할 수 있게 된다.
시저… 끝까지 굴하지 않고 promise와 then이 addEventListener와 유사하다는 생각을 가져와줘서 고맙습니당ㅋㅋㅋㅋㅋ

📝 요약 및 하루 간단 회고

• Promise, fetch, 동기/비동기 에게 하루종일 두드려맞은 하루

오늘의 잘한 점

• 동료들하고 하루종일 토론하면서 머리 싸매고 공부한 점
• 알고리즘 미리미리 풀어둔 점

오늘의 아쉬운 점

• 계획했던 강의와 코드 구현을 많이 못한 점

참고

• 동기와 비동기
• 이벤트 루프란?
• 이벤트루프란 무엇인가? - JSConf