이 편에서 만드는 파일

(코드 없음) 이 편은 실습 폴더를 만들지 않습니다. notes-app 프로젝트는 04편부터 시작합니다.

개념 정리

JS 엔진과 브라우저는 다른 것이다

자바스크립트 코드를 실행하는 것은 V8, SpiderMonkey 같은 JS 엔진입니다. 엔진 자체는 변수·함수·객체·Promise 같은 언어 문법만 압니다. 화면에 그림을 그리거나 네트워크 요청을 보내는 기능은 엔진에 없습니다.

document.querySelector, fetch, localStorage 같은 것은 브라우저가 엔진 옆에 추가로 붙여 준 Web API입니다. 자바스크립트 코드에서 fetch(...)를 호출하면, 실제 네트워크 요청은 엔진이 아니라 브라우저(정확히는 브라우저의 네트워크 스택)가 처리하고, 끝나면 결과를 다시 엔진에 돌려줍니다.

Node.js에서는 document가 없고 대신 fs, process 같은 시스템 API가 있습니다. “자바스크립트에 원래 있는 기능”과 “실행 환경이 추가한 기능”을 구분하는 습관이 이 과목 전체에서 필요합니다.

DOM은 문서를 객체로 표현한 것

DOM(Document Object Model)은 HTML 문서를 자바스크립트가 읽고 바꿀 수 있는 트리 구조 객체로 표현한 것입니다. 브라우저가 HTML을 파싱하면서 이 트리를 만들고, 자바스크립트는 document.querySelector, element.textContent 같은 DOM API로 이 트리를 읽거나 바꿉니다. 트리를 바꾸면 브라우저가 다시 화면을 그립니다(02편에서 자세히 다룸).

이벤트 루프와 메인 스레드

브라우저 탭 하나는 기본적으로 자바스크립트를 한 번에 한 줄씩만 실행하는 스레드 하나(메인 스레드)를 씁니다. 클릭 이벤트 처리, DOM 갱신, 화면 그리기가 전부 이 한 스레드 위에서 순서대로 일어납니다.

fetch나 setTimeout처럼 시간이 걸리는 작업은 메인 스레드가 기다리지 않습니다. 브라우저가 백그라운드에서 처리하고, 끝나면 결과를 태스크 큐에 넣습니다. 이벤트 루프는 콜 스택이 비었을 때 큐에서 다음 작업을 꺼내 실행합니다. 이 구조 덕분에 네트워크 요청 중에도 화면이 멈추지 않습니다.

무거운 계산(예: 메모 500개 검색)을 메인 스레드에서 직접 돌리면 그동안 클릭도 화면 갱신도 멈춥니다. 15편에서 이 계산을 별도 스레드인 Web Worker로 옮기는 이유가 여기에 있습니다.

origin — 같은 사이트인지 구분하는 기준

origin은 프로토콜 + 호스트 + 포트의 조합입니다. 셋 중 하나라도 다르면 다른 origin으로 취급합니다.

localStorage, IndexedDB, fetch 요청 허용 여부(CORS)는 모두 이 origin을 기준으로 판단합니다. 08편에서 notes-app(Vite 개발 서버, 포트 5173)이 json-server(포트 3001)에 요청을 보낼 때 이 둘이 서로 다른 origin이라는 점이 다시 등장합니다.

개발자 도구로 확인하기

typeof Array.prototype.map
typeof document.querySelector
typeof fetch

location.origin

확인

• 콘솔에서 typeof fetch와 typeof Array.prototype.map이 둘 다 "function"으로 나오지만, 정의된 곳(엔진 vs 브라우저)이 다르다는 것을 설명할 수 있습니다.
• location.origin이 현재 주소창의 프로토콜://호스트:포트와 일치하는 것을 확인합니다.

직접 해보기

1. 지금 열린 사이트와 다른 사이트(예: 검색 엔진)를 새 탭에서 열고 각각 location.origin을 비교해봅니다.
2. 콘솔에 setTimeout(() => console.log("나중에"), 0); console.log("먼저")를 입력하고 어떤 순서로 출력되는지 확인해봅니다. 이유를 위 이벤트 루프 그림과 연결해 설명해봅니다.

자주 하는 실수

확인 문제

참고 자료

• MDN - Web APIs 
• MDN - Event loop 
• MDN - Same-origin policy