Jay

위 그림을 참고하면서 보자면 JavaScript Engine에 Call Stack가 있고 Web APIs에 Render, Microtask Queue, Task Queue가 있다. JavaScript Engine Web APIs l ㅣ l ㅣ event loop Render l ㅣ (원형으로 돈다) (Request Animation Frame, RenderTree, Layout, Paint) l ㅣ l ㅡ ㅡ ㅡ ㅡ ㅣ Microtask Queue Call Stack Task Queue 돌아가는 원리를 보면 먼저 이벤트 루프는 테스크 큐에 있는 것들을 하나씩만 콜 스택으로 가져 오고나서 원래 하던 루프를 계속 돌다가 하나 가져오는 식으로 진행 했는데, 마이크로 테스크는 큐 안에 있는 것들이 모두 다 없어..

프로세스 프로세스는 컴퓨터 위에서(운영체제 위에서) 연속적으로 실행되고 있는 프로그램을 말한다. 사용자들이 음악 재생 프로그램이나 사진을 보는 사진 뷰어프로그램 등등 각각의 프로세스를 가지고 있다. 각각의 프로세스는 메모리 위에서 실행되고 있고 서로 독립적으로 실행된다. 만약에 첫 번째 프로세스에서 문제가 발생하면 그 첫 번째 프로세스만 죽게된다. 어떤 어플리케이션을 쓰다가 그 어플리케이션에 문제가 생기면 쓰고있는 어플리케이션만 강제 종료하거나 갑자기 어플리케이션이 죽어 버리는 경우, 그런 경우는 이 프로세스에 문제가 생겨서 프로세스가 죽었다 라고도 말할 수 있다. 그래서 프로세스는 운영체제 위에서 독립적으로 메모리에서 실행되고 있는 프로그램을 말한다. 그리고 각각의 프로세스는 자기만의 리소스 자원들이 ..

우리의 웹페이지나 웹어플리케이션을 브라우저가 사용자에게 보여주기까지 어떤 과정을 거치냐? 브라우저에서 URL을 입력하게 되면 HTML request/response -> loading -> scripting -> rendering -> layout -> painting 이런 순서로 진행이 된다. 먼저 브라우저가 서버에게 HTML 파일을 요청하게 된다. 그래서 HTML 파일을 서버에게 받아서 로딩을 하게 된다. 데이터를 받아와서 이 HTML을 한줄 한줄씩 읽어서 DOM 요소로 변환한다. 이 부분을 scripting이라고 하는데 이렇게 DOM으로 변환하고 CSS요소를 CSSOM으로 변환한 다음에 이것을 브라우저 window에 표기를 하기 위해서 준비한다. 이렇게 Rendering tree를 만든 다음에 각각..

Browser 구조 분석 이렇게 브라우저에서 웹페이지를 열게되면 Window라는 전체적인 오브젝트가 존재하고, window는 사용자들의 페이지뿐만 아니라, 브라우저에서 현재 열려있는 전체적인 창을 의미한다. 그리고 이 window안에 즉 페이지가 표기되는 부분이 바로 Document 오브젝트이다. 즉, Document는 우리가 HTML에서 작성한 그런 요소들이 표기되어지는 부분이라고 볼 수 있다. 그리고 사용자 눈에는 보이지 않지만 전체적으로 Window에 관련된 즉 브라우저 자체에 관련된 정보들이 담겨있는 Navigator라는 유용한 오브젝트도 있다. 그래서 우리가 HTML, CSS, 자바스크립트를 포함한 웹페이지를 브라우저에서 돌리게 되면 즉 우리가 페이지를 브라우저에서 열게 되면 Window라는 전..

CSSOM 브라우저에서 우리 HTML 파일을 분석하게 되면 HTML에 있는 요소들을 Document Object Model로 변환했는데 사용자가 정의한 스타일 CSS는 어디로 가나? CSS 스타일은 브라우저가 어떻게 이해하는지 대해서 알아본다. DOM + CSS = CSSOM(compute styles, based on CSS, cascading rules) external embedded inline user-agent stylesheet 브라우저에서 Document Object Model을 만들게 되면 사용자가 정의한 CSS를 병합해서 CSSOM이라는 것을 만들게 된다. 그 말은 브라우저가 HTML 파일을 Document Object Model로 만들었다면 사용자가 HTML 파일 안에 들어 있는 스타..

APIs Application Programming Interface 윈도우에서 동작하는 어플리케이션을 만들고 싶다면 Windows에서 제공하는 API를 이용해서 간단하게 윈도우 어플리케이션을 만들 수 있다. 안드로이드나 이런 맥 OS에서 제공하는 API를 이용하면 간단하게 모바일 어플리케이션을 만들 수가 있다. 그리고 유튜브에서 자신들의 백엔드 서비스에서 API들을 제공하게 된다. 사용자가 이렇게 유튜브에서 제공하는 API를 이용해서 유튜브에 있는 데이터를 받아 올 수 있는 이런 것들이 가능하게 된다. 이런 OS나 플랫폼에서 제공하는 API도 API이지만 사용자들이 작성하는 프로젝트에서 User Storage라는 클래스에서 로그인을 할 수 있고, 로그아웃을 할 수 있는 함수들이 있다면, 이것도 사용자들..

MDN Node 웹페이지에 오면 DOM Node가 무엇인지에 대해서 나와있다. 참고: https://developer.mozilla.org/en-US/docs/Web/API/Node Node - Web APIs | MDN The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objec developer.mozilla..

HTML 웹페이지를 만들면 HTML 파일을 브라우저에서 읽게 된다. 브라우저에서는 body 태그, section 태그 이런 각각의 태그들을 분석해서 이것을 노드로 변환하게 한다. 즉 브라우저가 이해할 수 있는 자신들 만의 오브젝트로 변환한다. HTML JavaScript Tag => Node HTML에서 쓰인 Tag가 자바스크립트에서는 Node라는 오브젝트로 변환이 된다. 그리고 이 Node의 오브젝트 안에는 태그 안에 작성했었던 클래스라던지 텍스트 같은 모든 정보들이 포함이 되어있다. Node Node라는 오브젝트는 EventTarget이라는 오브젝트를 상속한다. 즉 모든 Node는 이벤트가 발생할 수 있다. document도 Node를 상속하기 때문에 document도 Node이기 때문에 또 Node..

desktop은 section 하나에 content 3개 tablet은 section 하나에 content 2개 mobile은 section 하나에 content 1개 중요한, 좀 더 강조하고자 하는 내용들을 위로 올려서 표현 할 수 있다. desktop, tablet, mobile을 구분짓는 breakpoint가 존재하지는 않는다. 굳이 구분짓자면 mobile은 320px ~ 480px tablet은 768px ~ 1024px desktop은 1024px~

참고 : https://www.notion.so/12-async-await-bac523cb75da44ce8cfd3c55f9761dc5 12. async / await async & await www.notion.so