TIL(22.05.31)

Event Loop

자바 스크립트는 싱글스레드다. 그말인즉슨, 한번에 한 가지 일(task)만 실행할 수 있다는 말이다. 워낙 실행하는 속도가 빠르기 때문에 별로 큰 문제자체는 아니다. 하지만 특정 task를 수행할때 특정 시간(예를 들면 1분 이상이라던지..)을 기다려야 한다면 큰 문제가 될 것이다. 5G를 보급하고 있는 시대에 해당 시간만큼 브라우저가 멈춰야한다면 사람들은 서비스를 쳐다도 보지 않고 떠날것이다. (자바스크립트는 브라우저의 메인 스레드를 이용해서 실행하고, 따라서 해당 시간만큼 UI를 그리는 작업을 포함해서 모인 작업이 올 스탑된다.)

이러한 문제점을 해결하기 위해서 브라우저는 Web API를 제공해준다.(DOM API, setTimeout, HTTP requests 등) Web API를 통해서 우리는 싱글스레드인 자바스크립트를 비동기적으로, 그리고 논블락킹을 유지할 수 있게된다.

자바스크립트 엔진에서는 함수가 실행되면 call stack에 쌓이게 된다. call stack에 쌓인 함수는 first in, last out의 순서로 작업이 수행된다.

call stack이 비어 있으면, event look는 callback queue에 작업이 남아있는지 확인하고, 작업이 남아있다면 call stack으로 이동시킨다.

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

위의 코드가 call stack과 web api, queue에서 어떤 순서로 머물다가 이벤트 루프에 의해서 다시 call stack을 거쳐 실행되는지 잘 생각해보고, 동작 과정을 잘 이해하길 바란다, 나놈.

회고

아침에 진짜 죽을듯이 아프고, 토하면서 겨우 걸어가서 요로결석 진단받고 돌깨고 치료하고 오는데 그렇게 가뿐할 수가 없었다. 저녁에는 모의면접에서 나의 무지가 들어날까 노심초사하다가 막상 끝나니 현실적인 면접자의 내 위치를 파악할 수 있어서 그렇게 개운할 수가 없었다. 물론 면접은 어렵다. 본디 공부에 어울리는 사람은 아니라서 당연히 어려울수밖에 없다. 좀 더 deep하게 준비할 것이 전체적인 피드백이라고 생각한다. 내가 경험한 것에 대한 장단점을 추리고, 거기서 내 자신을 피드백하며 시간의 흐름축을 따라 내 능력과 연봉이 함께 증가하길 바란다. 좋은 기회를 제공해주신 준혁님과 수영님에게 감사함을 멀리서나마 보내고 싶다. 모의면접에 나온 내용들에 대해서는 따로 준비해서 내 언어로 바꿔두도록 하자. 언제든지 자신있게 말할수 있게. 프론트엔드 개발자로 성장하게 된다면, 오늘 모의면접도 많은 영양분으로 작용할 것이다. + 유명한 라이브러리의 소스코드를 보면서 리액트로 왜 이렇게 짜는지 생각해보고 많은 사람들이 짜는 방식에 대해 고려해보기

찾아보고 확실하게 이해해야 할 것

1. callback vs Promise 차이
2. CORS 관련(브라우저 스펙이고, response 헤더가 하는 역할 등)
3. useCallback, useMemo, useRef 훅은 언제, 왜, 어떤 기준으로 사용할 것인가
4. 이벤트 캡처링 vs 버블링
5. 렉시컬 스코프와 클로저
6. 브라우저 동작 과정, 그리고 가져온 static 파일(HTML)을 어떻게, 어떤 순서로 그리는가.
7. 웹 스토리지, 쿠키 등의 의미 및 용도 차이점
8. Https 동작 방식에 대한 이해
9. CSR vs SSR 각 각에 대한 설명 및 언제 사용하고, 언제 각 각의 렌더링이 이득일지에 대한 이해
10. this
11. Redux 등의 동작 방식 공식 문서
12. 함수형 컴포넌트의 진득한 이해
13. useState 등이 어떻게 동작되는지 뜯어보기
14. 웹팩에 대한 경험은 해볼 수록 좋다.
15. useEffect의 훅이 어떻게 동작하는가. 뎁스 등을 비교하는 방식
16. 여러개의 useEffect가 있을지 각각 몇번 찍히는 지에 대해 생각해보기. -> 리렌더링이 어떠한 과정으로 진행되고, 어떤 값들을 달라지고 유지되는지

const App = () => {
const [,setValue] = useState(1);
  
  const intValue = 1;
  const obj = {};
  useEffect(() => {
  	setTimeout(() => {
      setValue(prev => prev + 1)
    }
  }, [])
  
  useEffect(() => {
    console.log(intValue)
  }, [intValue])

  useEffect(() => {
  	console.log(obj)
  }, [obj])
   
   return <div>Good</div>
}