프론트엔드/고찰하기 3

Javascript의 비동기 프로그래밍 - (2) Promise, async/await 시뮬레이션

오늘은 자바스크립트의 비동기 프로그래밍 중 Promise, async/await에 대해 예시와 함께 알아보겠습니다. 이 글은 프로미스와 async/await의 내용 설명에 대한 모든 것을 담고 있지는 않습니다. 프로미스는 간단하게만 살펴보고, async/await에 대해서는 시뮬레이션과 코드 진행의 흐름 살펴보기 위주로 작성되었습니다. 참고로 콜백에 대한 글이 궁금하시다면 아래 글을 읽고 오셔도 좋을 것 같습니다. Javascript의 비동기 프로그래밍 - (1) 콜백, 뭐라고 생각하세요? 오늘은 자바스크립트의 비동기 프로그래밍에 대해 알아보겠습니다. 이 글은 이벤트 루프의 동작, 호출 스택, 메모리 힙, 태스크 큐 등에 대한 이해를 기반으로 작성되었습니다. 들어가며 자바스 lerryroad.tistor..

Javascript의 비동기 프로그래밍 - (1) 콜백, 뭐라고 생각하세요?

오늘은 자바스크립트의 비동기 프로그래밍에 대해 알아보겠습니다. 이 글은 이벤트 루프의 동작, 호출 스택, 메모리 힙, 태스크 큐 등에 대한 이해를 기반으로 작성되었습니다. 들어가며 자바스크립트는 기본적으로 싱글 스레드입니다. 이러한 동기적 처리는 한 작업이 완료될 때까지 다음 작업을 실행하지 않습니다. 동시에 하나의 작업만 처리한다는 뜻입니다. 우리는 여기서 하나의 작업이 다른 작업들의 병목현상이 될 수 있다는 문제를 느끼게 됩니다. 예를 들어, 웹 페이지에서 서버로부터 데이터를 가져오는 동안 사용자 인터페이스가 응답하지 않는 상황이 발생할 수도 있죠. 자바스크립트 엔진’만’ 살펴보면 단일 호출 스택을 사용하기 때문에 충분히 우려되는 문제입니다. 그러나 브라우저에서 자바스크립트 코드가 실행될 때 우려했던..

트리 자료구조 중심으로 보는 DOM 탐색

트리 자료구조를 중심으로 DOM 탐색 과정 살펴보기 WebKit 의 getElementById 구현부 간략히 살펴보기 추측 및 주관적인 생각이 많이 들어가 있어 잘못된 부분이 있을 수 있습니다. 틀리거나 오해한 부분은 댓글로 알려주시면 감사하겠습니다. 들어가며 🐠 DOM (Document Object Model) 이란 무엇일까요? 🐟 DOM은 브라우저가 전달받은 문서를 해석, 구조화해놓은 결과물입니다. 이 DOM을 기준으로 브라우저는 일련의 과정을 거쳐 실제 화면을 보여줍니다. 우리가 크롬, 사파리같은 브라우저를 통해 특정 URL에 접속했을 때를 상상해봅시다. 브라우저는 그 URL에 해당하는 페이지를 달라고 서버에게 요청하고 서버는 해당 요청에 대한 적절한 응답을 브라우저에게 내려줍니다. 여기서 '적절한..

728x90