Dev-blog

자바스크립트 난코스 로드맵

Properties1
tagsjavascript, frontend, roadmap, 학습기록

7 min read

자바스크립트 난코스 로드맵 (주니어가 가장 어려워하는 개념)

👉 현재 진행: W1 ← 한 주(또는 한 개념)를 끝낼 때마다 이 줄만 다음 단계로 갱신한다.

주니어가 가장 자주 무너지는 JavaScript 개념들을 정복하기 위한 학습 로드맵이다. 직접 만든 VN(비주얼 노벨) 엔진을 연습 운동장으로 삼아, 개념을 실제 코드에 적용하며 익힌다.

학습 원칙

  • 목표: 주니어가 가장 자주 무너지는 JS 개념을 내 코드로 설명할 수 있을 만큼 정복한다.
  • AI 사용 규칙: AI는 “코드 생성”이 아니라 “왜 이렇게 동작해?”에 대한 해설에만 쓴다.
  • 속도: 한 개념에 1~2주가 걸려도 정상이다. 주차(W)는 일정이 아니라 순서일 뿐이다.

공부 루프

① 먼저 막혀보기 → ② 짧게 배우기 → ③ 손으로 구현 → ④ 실행 전 결과 예측 → ⑤ 내 말로 설명

통과 기준

“이해 확인” 문장을 안 보고 내 말로 설명할 수 있고 + 복붙 없이 구현할 수 있으면 다음 단계로 넘어간다.

W1 — 렉시컬 스코프 & 스코프 체인

  • 개념: 변수가 “어디에 적혔는가”로 보이는 범위가 정해진다. 안쪽 함수는 바깥 변수를 찾아 위로 올라간다.
  • VN에서: render 안에서 바깥의 script·i가 왜 보이는지 추적. 함수 안에 함수를 중첩해 어느 변수가 보이는지 실험.
  • 이해 확인: “이 변수는 왜 여기서 접근돼?”를 스코프 체인으로 설명.

W2 — 호이스팅 & TDZ (일시적 사각지대)

  • 개념: 선언이 위로 끌어올려지는 현상. let/const는 끌어올려지지만 쓰면 에러 나는 구간(TDZ)이 있다.
  • 고전 함정 (예측해보기): 
    console.log(a); var a = 1;   // ?
console.log(b); let b = 1;   // ?
  • VN에서: 함수·변수를 선언 위에서 호출해 var와 let의 에러 차이를 직접 관찰.
  • 이해 확인: 함수 선언식과 표현식이 호이스팅에서 왜 다른지.

W3 — 클로저 ⭐ (최고 난이도)

  • 개념: 함수가 자기가 태어난 곳의 변수를 기억해서, 바깥 함수가 끝난 뒤에도 살려둔다.
  • 고전 함정 (예측해보기): 
    for (var i = 0; i < 3; i++) setTimeout(() => console.log(i), 0);  // ?
    → 왜 이렇게 나오는지, let으로 바꾸면 왜 달라지는지.
  • VN에서: 타이핑 효과의 진행 상태, “한 번만 실행되는” 로직을 클로저로 감싸기.
  • 이해 확인: 바깥 함수가 끝났는데 왜 그 변수가 안 사라지는지.

W4 — this 바인딩 ⭐

  • 개념: this는 함수를 “어떻게 호출했는가”로 정해진다. 화살표 함수는 다르게 동작한다.
  • 고전 함정: 객체 메서드를 변수에 빼서 호출하면 this가 왜 풀리는지.
  • VN에서: Character 객체 메서드 안의 this. 이벤트 핸들러에서 this가 바뀌는 것 → 화살표 함수/bind로 고정.
  • 이해 확인: 일반 함수 this와 화살표 함수 this의 차이.

W5 — 프로토타입 체인 & 클래스의 실체

  • 개념: JS 상속은 프로토타입 연결로 동작한다. class는 그 위에 씌운 문법 설탕일 뿐.
  • VN에서: Character를 프로토타입 방식으로 한 번, class로 한 번 만들어 같은 결과 확인.
  • 이해 확인: 객체에 없는 메서드를 호출했는데 어떻게 실행되는지(체인 탐색).

W6 — 값 vs 참조 / 얕은 복사 vs 깊은 복사

  • 개념: 원시값은 복사, 객체·배열은 참조 공유. 그래서 의도치 않게 원본이 바뀐다.
  • VN에서: 세이브 데이터 객체를 복사했더니 원본이 같이 바뀌는 버그 재현 → 스프레드/구조분해/깊은 복사로 해결.
  • 이해 확인: “복사했는데 왜 원본이 바뀌지?”를 설명하고 고치기.

W7 — 비동기 기초: 콜백 & 콜백 지옥

  • 개념: 기다리는 일을 “끝나면 이 함수 불러줘”로 처리하는 방식과 그 한계.
  • VN에서: 대사 타이핑 → 끝나면 다음 줄 → 끝나면 다음 줄을 콜백 중첩으로 만들어 “지옥” 체감.
  • 이해 확인: 왜 콜백 중첩이 빠르게 지저분해지는지.

W8 — 이벤트 루프 / 프로미스 / async-await ⭐

  • 개념: JS는 싱글 스레드인데 어떻게 동시에 보이는지. 마이크로태스크(프로미스) vs 매크로태스크(setTimeout).
  • 고전 함정 (실행 순서 예측): 
    console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);   // 출력 순서는?
  • VN에서: W7의 콜백 지옥을 프로미스 → async/await로 리팩터링.
  • 이해 확인: 위 함정의 순서를 이벤트 루프로 설명.

이 로드맵을 끝내면

  • 면접의 “변별 질문”들(클로저·this·이벤트 루프)에 내 코드 예시로 답할 수 있게 된다.
  • 연습용으로 쓴 VN 엔진을 배포하면 그 자체가 포트폴리오가 된다.

RECENT — 최근 글

Graph View