자바스크립트

자바스크립트의 비동기 처리

프론트엔드를 공부하면서 많이 들어봤지만 아직도 개념이 정확하게 잡혀 있지 않다는 게 창피한 비동기 처리. 이번에 면접을 보면서 이 질문에 대답을 명확히 하지 못 했다는 수치심을 느끼고 이 참에 제대로 정리하고 넘어가고자 한다. 동기 VS 비동기 자바스크립트가 싱글 스레드다. 싱글 스레드란 무엇일까? 한 마디로 자바스크립트 언어는 한 번에 하나만 수행할 수 있다는 말이다. 그렇기 때문에 동기와 비동기의 개념이 나온 것 같다. 동기란 하나의 작업이 수행되고 끝난 다음에 또 다른 작업이 수행되는 것처럼 작업이 순서대로 하나씩 수행되는 방식을 말한다. 반대로 비동기란 하나의 업무를 처리하는 동시에 다른 업무도 처리하는 것을 말한다. 그런데 한 번에 하나의 작업만 수행한다던 자바스크립트로 어떻게 비동기 처리를 할..

[TIL] 브라우저 렌더링

사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스 브라우저 엔진 : 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 렌더링 엔진 : HTML 과 CSS를 파싱해 요청한 웹 페이지를 표시하는 렌더링 엔진 통신 : 각종 네트워크 요청을 수행하는 네트워킹 자바스크립트 해석기 : 자바스크립트 코드를 실행하는 인터프리터 ex) 크롬-v8 UI 백엔드 : 기본적인 위젯을 그려주는 UI백엔드 파트 ex) 버튼, 체크박스 자료 저장소 : 보조 기억장치에 데이터를 저장하는 파트 ex) localStorage, cookie Critical Rendering Path : 렌더링 경로 DOM Tree생성 & CSSOM Tree 생성 → Render Tree 생성 → Render Tree..