240115 엘리스 SW트랙 4주차 Day 16

* 자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 비동기 등을 처리하는 모듈은 여러 스레드로 구성될 수 있다.

* 메인 스레드를 긴 시간 점유하면, 그동안 프로그램은 멈춘다. 따라서 긴 처리가 필요한 작업은 비동기로 실행하도록 로직을 구성하면 좋다.

* 비동기 작업이 실행되는 동안에도 메인 스레드는 코드를 실행하고 브라우저를 렌더링하게 된다.

---

* 이벤트 루프는 자바스크립트 엔진 외부에 존재한다. node.js 환경의 경우 libuv라는 모듈에서 비동기 처리를 담당한다.

* 이벤트 루프는 콜 스택이 비워질 때 태스크 큐에서 콜백함수를 꺼내 콜스택에 넣는다.

* 비동기 처리가 끝나면, 태스크 큐에 콜백함수가 들어간다. (setTimeout, XMLHttpRequest, fetch 등)

* 이벤트 루프는 콜 스택이 비워졌을 때, 태스크 큐에서 콜백함수가 들어온 순서대로 함수를 내보낸다. 단, 큐는 여러개가 존재하며 그 중 우선순위가 높은 큐(잡 큐 등)에서 나중에 들어온 콜백함수가 실행될 수 있다.

---

* Promise의 콜백은 잡 큐를 사용한다.

* Promise 객체는 비동기 처리 중 상태를 표현할 수 있다. (pending 상태)

* Promise로 비동기 처리 순서를 강제할 수 있다. Promise.prototype.then 체인을 이용해 비동기 처리 순서를 강제할 수 있다.

* Promis.prototype.finally() 메서드는 성공, 실패에 상관없이 항상 호출된다.

---

* 03 자바스크립트 문제집의 setTimeout 사용하여 웹 구현하기 문제에서

 

이렇게 코드를 짰는데 안되는 이유는 맨마지막 줄에 있었다 !

 

 

addEventListener를 사용할때에는 뒤에 있는 함수에 ()를 붙이면 안된당 ,,

---

* 디바운싱에 대해 더 찾아보기 !

---

* 쓰로틀링에 대해 더 찾아보기 !

---

* 03 자바스크립트 문제집 > Promise 사용하기 문제에서 

setTimeout(() => {
      posts.push(post);
      const error = false;

 

- 이 코드는 비동기 처리를 위해 setTimeout() 함수를 사용하고 있습니다. 이 함수는 전달된 함수를 지연적으로 실행하고 지연 시간을 밀리초로 지정하는 데 사용됩니다. 여기에서 지연 시간은 2000이므로 2초입니다.

- 다음으로 posts.push(post) 코드는 post 객체를 posts 배열에 추가하는 역할을 합니다. 이 코드는 createPost() 함수에 전달된 post 객체를 posts 배열에 추가하는 역할을 합니다.

- 마지막으로 const error = false; 코드는 에러 변수를 초기화하는 데 사용되므로 에러가 발생하지 않았다는 것을 나타냅니다. 이 변수는 createPost() 함수 내에서 사용되며 에러 처리 및 반환 작업에 사용됩니다.

---

*

 

이 코드처럼 promise를 사용할 때에는 앞에 return을 꼭 붙여줘야한다는거 !

---

* 03 자바스크립트 문제집 > fetch 사용하여 API호출하기 2 문제에서

 

대충 틀을 잡고 콘솔창을 찍어보면

 

이런식으로 results가 나오는걸 볼 수 있는데,

여기에서 password값을 가지고 오려면

const data = datas.results[0].login.password

 

이렇게 가져와야한다는걸 알 수 있다 !

 

근데 나는 결과값이 undefined가 나와서

뭐가 문제인지 봤더니 data를 가지고 와야하는것을 data.value를 결과값으로 넣고 있어서 오류가 난것이었다 !

그래서 GPT한테 그냥 data와 data.value를 가지고 오는것의 차이점을 물어봤는데,

 

 

이렇게 답을 해주었다 !

앞으로는 값을 잘 보고 입력해줘야할듯 !

 

그래서 결과적으로

 

이렇게 코드를 짜서 해결해따 !

굳 ! 

---

그래도 어느정도 이해가 되면서 따라가고 있는 것 같아 다행인것같당 ,,! 

그리고 GPT를 열심히 써먹어보려는 노력도 해야될둡 ! ㅋ.ㅋ