1단계와 2단계에서 마크업과 스타일링의 기본기를 다졌다면, 3단계에서는 웹 개발의 꽃 자바스크립트의 근본적인 동작 원리를 점검합니다.
자바스크립트는 매우 유연하고 쉽다는 인식이 있는 언어이지만, 스코프(Scope), 참조(Reference), 이벤트 흐름(Event Flow)의 원리를 정확히 알지 못하면 원인을 알 수 없는 버그에 시달리게 됩니다. 특히 이 단계의 지식들은 추후 리액트의 상태 관리와 렌더링 최적화를 이해하기 위한 필수적인 개념이에요.
자바스크립트에서 변수가 살아있는 유효 범위(Scope)를 정확히 이해하고 있는지 확인합니다. "var는 사용하지 마라"라는 말을 자바스크립트를 공부해본 사람들이라면 자주 들어보셨을텐데요. 왜 쓰지 말라는거지? 하는 의문이 들었나에 대해 물어보는 질문입니다. var, let, const의 차이를 아는 것은, 의도치 않은 변수 덮어쓰기나 메모리 누수를 방지하기 위한 가장 기본적인 소양이며, 더 나아가 공부할 때 어느 정도의 깊이를 가지고 공부하는지 알아볼 수 있는 대목입니다.
for 반복문 안에서 쓸 임시 변수를 선언하려고 합니다. 요즘은 let을 주로 사용하는데요. 만약 실수로 반복문 블록 중괄호 밖에서 이 변수를 부르려고(console.log) 할 때, var와 let은 각각 어떤 결과를 보여줄까요?
for (var i = 0; i < 3; i++) {}
console.log(i); // 3 출력 (변수가 밖으로 새어나옴)
for (let j = 0; j < 3; j++) {}
console.log(j); // ReferenceError: j is not defined (안전하게 보호됨)
자바스크립트 메모리 할당 방식의 핵심인 원시 타입과 참조 타입의 차이를 묻습니다. 이 개념을 모르면 앞으로 배울 스프레드 문법이나, 구조 분해를 이해하지 못하는데요. 특히 리액트에서 상태(State)의 불변성(Immutability)을 지키기 위해 반드시 완벽하게 이해해야 하는 개념입니다.
사용자 정보 객체 userA를 만들고, const userB = userA; 형태로 복사했습니다. 이후 userB의 이름을 바꿨더니 원본인 userA의 이름까지 바뀌어버렸습니다. 객체나 배열을 다룰 때 왜 이런 일이 발생하며, 어떻게 예방할 수 있을까요?
const userA = { name: "Kim" };
// 잘못된 복사 (주소만 복사됨)
const userB = userA;
userB.name = "Lee";
console.log(userA.name); // "Lee" (원본이 훼손됨)
// 올바른 복사 (새로운 객체를 만들어 값만 펼쳐 넣음)
const userC = { ...userA };
바닐라 자바스크립트로 웹 요소를 제어할 때 가장 기본이 되는 DOM 선택자(Selector)의 활용 능력을 확인합니다. 사실 미묘한 성능 향상이 필요한 부분이 아니라면 qs(querySelector)를 주로 사용합니다.
HTML에서 특정 요소를 찾으려 합니다. document.getElementById('alert')를 쓰는 것과 document.querySelector('#alert')를 쓰는 것은 결과는 같아 보이지만, 두 방식은 어떤 차이가 있고 언제 무엇을 쓰는 게 좋을까요?
// ID로만 검색 가능
const box1 = document.getElementById("myBox");
// ID, Class, 자식 요소 등 CSS 선택자 모두 사용 가능
const box2 = document.querySelector("#myBox");
const activeItem = document.querySelector(".list .item.active");
브라우저에서 이벤트가 발생했을 때 부모 요소로 전파되는 흐름을 제어할 수 있는지 확인합니다. 모달창(팝업창)이나 드롭다운 메뉴 밖을 클릭했을 때 창이 닫히게 만드는 UI 패턴을 구현하려면 반드시 알아야 하는 필수 개념입니다.
모달창 바깥의 어두운 배경을 클릭했을 때 창이 닫히게 만들고 싶습니다. 배경을 클릭했는데 모달창 내부 요소의 클릭 이벤트까지 건드리지 않게 하려면(이벤트 흐름 제어) 어떻게 해야 할까요?
const modalBg = document.querySelector(".modal-background");
const modalContent = document.querySelector(".modal-content");
// 방법 1: 내부 요소에서 버블링 차단
modalContent.addEventListener("click", function (event) {
event.stopPropagation(); // 부모인 modalBg로 클릭이 넘어가지 않음
});
// 방법 2: 클릭된 대상이 배경 본인일 때만 실행
modalBg.addEventListener("click", function (event) {
if (event.target === event.currentTarget) {
closeModal();
본 사전 진단 퀴즈의 기초 개념은 다음의 공식 문서를 참고하여 작성되었습니다.