자바스크립트 런타임과 엔진의 차이: 이벤트 루프는 어디에 있을까
V8 같은 엔진과 브라우저나 Node.js 같은 런타임이 각각 맡는 일을 나누고, 이벤트 루프가 엔진이 아니라 런타임에 속하는 이유와 그 구조를 다이어그램으로 설명한다.
브라우저와 DOM10편
2024
브라우저에서 자바스크립트가 동작하는 원리
자바스크립트 런타임을 이루는 엔진, Web API, 태스크 큐, 잡 큐, 이벤트 루프가 각각 무슨 일을 하는지, 싱글 스레드로 어떻게 비동기를 처리하는지 그림과 함께 정리했다.
2022
AJAX란 무엇이고, 비동기 통신 API fetch, axios는 어떻게 쓰이는가
1) 페이지를 리로딩하지 않고 컨텐츠만 바뀌게 하기위해 API 통신을 한다.2) API를 사용함으로써 랜더링 없이 컨트롤러로만으로도 데이터베이스를 수정할 수 있다.
[DOM]: 이벤트 버블링을 이용해 하위 요소 전체 다루기(e.target, e.currentTarget)
옵션들을 forEach로 반복시켜서 이벤트를 주는 방식이 아닌 event.target으로 옵션들의 부모요소 ul을 참조해 이벤트를 위임시키면 반복문을 쓰지않고도 옵션들에 이벤트를 줄 수 있다. 옵션이 많아지면…
[DOM] Javascript로 html을 조작해보자
OM은 Object Model, 객체 지향 모델을 뜻한다. 뭔가를 객체로 표현하는 방법을 말한다. 나아가 Documnet가 추가된 "D"OM은 웹 페이지의 내용을 객체로 표현하는 형식을 말한다. Brower가…
2021
스크립트(script) 추가/제거하는 버튼 만들기
script를 실행하고 싶은 이름을 배열에 적으면, 버튼이 생성되며, 누르면 해당 js파일이 실행된다.
[addEventListener] 콜백함수에게 인자를 주는 방법
1. EventTarget의 메서드이다.
[Web APIs] 브라우저 API
개발자가 복잡한 기능을 쉽게 개발할 수 있도록 내부 코드에 신경 쓰지 않아도 복잡한 작업을 쉽게 기능을 가져다 쓸 수 있도록 돕는다.
Window 객체
브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있다. - 모든 객체를 포함하고 있는 전역객체(글로벌객체)이다.
MediaRecorder: 웹 녹화 API와 MediaStream 정리
getUserMedia로 카메라 스트림을 얻어 video에 보여 주고, MediaRecorder로 녹화한 Blob을 webm 파일로 내려받기까지의 흐름을 정리했다.