강의

멘토링

로드맵

NEW
개발 · 프로그래밍

/

프로그래밍 언어

[CS 기술면접 7] 말이 트이는 자바스크립트

실무와 면접에서 반드시 알아야 할 자바스크립트 핵심 개념만 선별해, 스코프와 실행 컨텍스트부터 클로저, 프로토타입, 비동기 처리, 모듈 시스템까지 한 번에 정리한 강의입니다. 표면적인 문법 설명을 넘어서, 자바스크립트가 실제로 어떻게 동작하는지를 근본 원리부터 이해할 수 있도록 구성했습니다. 예시와 시각 자료를 통해 어렵게 느껴지던 개념도 쉽게 설명하고, 면접에서도 직접 활용할 수 있는 ‘말로 풀어내는 이해’를 목표로 합니다. 자바스크립트의 동작 원리를 체계적으로 정리하고 싶다면, 지금 바로 시작하세요.

10명 이 수강하고 있어요.

  • 이용준

이런 걸 배울 수 있어요

  • 스코프와 실행 컨텍스트를 기반으로 자바스크립트의 동작 원리 이해하기

  • 클로저, 프로토타입, this 바인딩 등 핵심 개념을 면접 수준으로 정리하기

  • 비동기 처리(Promise, async/await)와 이벤트 루프의 작동 메커니즘 익히기

  • 모듈 시스템(ESM, 동적 import)의 구조와 로딩 전략 이해하기

  • 기술 면접에서 자바스크립트 심화 개념 질문에 명확하게 답하는 방법 배우기

🥲 개발자 취업, 코딩 테스트가 끝이 아니었습니다.

비전공자 출신인 저는 처음 개발자취업을 준비하며 알고리즘과 코딩 테스트에만 매달렸습니다. 나름 자신감도 붙고 대부분의 코딩 테스트를 통과했죠. 하지만 다음 관문인 기술 면접에서 계속 고배를 마셨습니다.
무엇이 문제였을까요? 바로 CS(컴퓨터 과학) 지식의 부재였습니다. 면접에서는 알고리즘보다 CS 기본기를 훨씬 중요하게 여겼습니다.

🗣 실전 면접, '말하는 연습'이 중요했습니다.

CS 기본기를 다시 채우고 나서도 면접은 쉽지 않았습니다. 모 기업 면접에서 부동 소수점에 대한 질문을 받았습니다. 분명 책에서 여러 번 읽고 이해했다고 생각했던 내용인데, 입 밖으로 단 한마디도 내뱉지 못했습니다. 그때 깨달았습니다. 단순히 읽고 이해하는 수동적인 학습으로는 실전에서 답할 수 없다는 것을.

면접 필승을 위해서는 많은 지식을 쌓는 것뿐만 아니라 이 지식을 설명하는 능력이 필요합니다. 이 '설명하는 능력'은 단 몇 문장으로 개념을 정리하고 입으로 뱉어보는 연습을 통해서만 길러집니다. 이 과정에서 자신이 무엇을 정확히 모르고 있었는지도 발견할 수 있죠. 이 연습이 부족하면 다음과 같은 문제에 봉착합니다.


1. 개념 혼동형

면접관 객체 지향의 특징은 무엇인가요?
💬 지원자 SOLID 원칙입니다. 먼저 S는...(생략)...

비슷한 개념을 혼동하는 경우입니다.
SOLID는 OOP 설계 원칙이고 객체 지향의 특징은 추상화, 캡슐화, 상속, 다형성입니다.
관련있는 개념을 뒤섞는 순간, 면접관은 ‘기초가 불안하다’고 판단합니다.
단순한 실수가 아니라, 개념의 뼈대가 잡히지 않았다는 신호로 읽히기 때문입니다.


2. 구체성 부족형

면접관 TCP의 특징은 무엇인가요?
💬 지원자 신뢰성을 보장하는 프로토콜입니다.
면접관 신뢰성을 보장하는 메커니즘은 뭔가요?
💬 지원자 어... 그러니까... 안전하게 전송되게 하는... 그런...

What만 알고, How/Why가 빠진 경우입니다.
표면적인 답만 알고, 원리를 설명할 준비가 되어 있지 않은 상태죠.
TCP 커넥션(3-way handshake)으로 통신을 합의하고, RDT(시퀀스 넘버, ACK, 재전송 등)를 통해 신뢰성을 보장하며 흐름 제어와 혼잡 제어로 품질을 유지합니다.
이러한 개념들이 머릿속에서 하나의 흐름으로 연결되어 있어야 합니다. 개념을 구체적으로 정리하고 있지 않으면 꼬리 질문에 대비할 수 없습니다.


3. 기본 질문에서 말문이 막힘

면접관 HTTP는 무엇인가요?
💬 지원자 어… 웹에서 데이터를 주고받는… 그런…?

너무나 익숙한 개념이지만, 막상 한 문장으로 설명해보라면 쉽게 말이 나오지 않습니다.
요청, 응답, 서버, 클라이언트 같은 단어들이 떠오르지만 자연스러운 문장으로 이어지지 않습니다.
정의부터 원리까지 한 흐름으로 말하는 연습을 해본 적이 없기 때문이죠.
이건 지식의 부족이 아니라, 구조화의 부재입니다.


아는 것만으론 부족합니다. 말로 풀어낼 때 비로소 실력이 됩니다.

🔥 그래서 만들었습니다. 말이 트이는 CS 기술면접 시리즈!

🎯 이런 분들에게 추천합니다

비전공자 · 취준생 · 이직 준비자 등 기술 면접을 앞두고, CS 기본기를 말로 정리할 수 있어야 하는 분

다시 정리해야 하는 전공생

공부해본 적은 있지만
그 수많은 CS 지식들을 다시 정리할 엄두가 안나요

두꺼운 전공책
다시 펼치지 마세요.
핵심만 확실히 정리합니다.

CS가 막막한 비전공자

기술 면접 준비가
처음이라 뭐부터
해야할지 막막해요

로드맵을 따라가면
주요 CS 핵심 개념만
집중 학습할 수 있습니다.

시간이 없는 이직 준비자

됐고, 저는 시간이 없어요.
면접에 나오는 CS만

빠르게 정리해야돼요

혼자서도 빠르게 복습
가능한 강의 자료와
인터뷰 챕터가 있습니다.

⚡ 강의 핵심 Kick

1⃣ 짧고 집중도 높은 러닝타임

  • 부담없는 강의 시간으로, 바쁜 일정에도 완주할 수 있고 면접 직전에도 빠르게 복습 가능합니다

  • 핵심만 압축해, 짧은 시간 안에 끝까지 완강할 수 있도록 설계되었습니다

  • 강의를 쇼핑하듯 쌓아두는 것이 아니라, 완강 자체가 가장 큰 학습 효과라는 점에 집중했습니다

2⃣ 핵심만 정리한 면접 대비형 강의

  • 면접 전 꼭 확인해야 할 개념 및 원리들을 한데 모아 정리했습니다

  • 기본기를 채우는 동시에, 궁극적으로는 면접 대비용으로 활용할 수 있게 구성했습니다

  • 단순 요약이 아니라, 도해와 쉬운 설명을 곁들여 비전공자도 충분히 이해할 수 있게 구성했습니다

  • 주요 내용을 빠르게 정리하면서도, 왜 중요한지 납득하며 학습할 수 있습니다

3⃣ 실전 인터뷰 연습 챕터 수록

  • 면접에서는 단순히 아는 것보다, 깔끔하게 설명하는 능력이 훨씬 중요합니다

  • 하지만 혼자 정리하고 연습하는 건 쉽지 않고 귀찮은 작업입니다

  • 이 강의는 각 섹션 말미에 “한두 문장으로 답하기” 훈련을 넣어, 정리의 수고로움을 덜어드립니다


💡 이렇게 활용하세요

1⃣ 자료를 다운로드하고 강의를 들으며 핵심 개념을 익히세요.
2⃣ 필요한 부분은 직접 필기하여 나만의 CS 인터뷰 노트로 만들어보세요.
3⃣ 휴대폰에 저장해두고 언제든 열어 복습하세요. 
4️⃣ 짧은 시간 안에 면접 감각을 끌어올릴 수 있습니다.

💬 Q. 강의 시간이 짧은데, 제대로 배울 수 있을까요?

이 강의는 짧지만, ‘얕지 않습니다’.
방대한 내용을 압축해, 면접에서 실제로 묻는 핵심만 정리했습니다.
불필요한 이론을 걷어내고 꼬리질문까지 답할 수 있을 만큼 깊이 있게 다룹니다.
한정된 시간을 가장 효율적으로 쓰고 싶다면, 짧은 러닝타임이 오히려 가장 강력한 무기가 될 것입니다.

🖐 안녕하세요! 제 소개를 드립니다! 🙇

기본기 때문에 밤새워 고민하고, 면접 질문 하나에 가슴 졸이던 과거의 저를 떠올리며 강의를 만들었습니다.

저는 비전공자 출신으로 시작해 기본기(CS지식, 프로그래밍 언어 등)의 갈증을 누구보다 잘 알고 있습니다. 수많은 자료를 독학으로 파고들고 저만의 노하우를 쌓아, 결국 서울대학교 졸업 후 🧑🏻‍💻 카카오 개발자로 일하고 있습니다.

어릴 때부터 다양한 자료를 조합하고 재구성하며 '나만의 단권화 노트'를 만드는 데 누구보다 자신이 있었습니다. 이 강의는 바로 그 '최강 독학 노하우'와 저의 모든 열정, 철학을 담아 탄생시킨 비밀 노트입니다.

🔥 이 강의, 왜 특별할까요?

  • 저의 모든 '노하우'가 담겼습니다: 비전공자로서 CS와 프로그래밍 언어를 독학하여 대기업에 취업한 저의 경험과 노하우를 오롯이 녹여냈습니다. 복잡하고 추상적인 개념을 어떻게 하면 가장 효율적으로 이해하고 내 것으로 만들지, 그 방법을 이 강의에 모두 담았습니다.

  • 어떤 개발 분야든 '기본'이 핵심입니다: 게임 개발, AI, 웹/앱 개발 등 어떤 분야를 지향하든 컴퓨터 공학의 기본 지식은 선택이 아닌 필수입니다. 이 강의는 여러분이 단단한 기본기를 바탕으로 진짜 실력자가 될 수 있도록 돕습니다.

  • '압도적인 퀄리티'로 승부합니다: 전공 서적, 유명 대학 강의, 시중 서적, 기술 면접 자료까지 수많은 레퍼런스를 참고하여 핵심 키워드를 추출하고, 이를 저만의 방식으로 재구성했습니다. 직관적인 도해와 그림, 그리고 저의 실무 경험을 녹여낸 쉬운 설명으로 복잡한 개념도 "아, 이젠 알겠다!" 싶게 만들어 드릴 것을 약속합니다.

🚀 기술 면접 마스터 로드맵의 일곱 번째 강의 [자바스크립트] 편을 소개합니다.


📕 자바스크립트는 문법만 알면 되는 언어가 아닙니다.

  • 변수는 아는데 스코프/호이스팅/TDZ가 헷갈리나요

  • this가 호출 방식마다 왜 달라지는지 설명이 막히나요

  • 프로토타입과 class의 차이를 구조적으로 설명하기 어렵나요

  • 이벤트 루프·마이크로태스크·Promise·async/await실행 순서를 자신있게 말하기 어렵나요

스코프, 실행 컨텍스트, 클로저, 프로토타입, 이벤트 루프 같은 ‘동작 원리’를 이해해야 실무와 면접에서 진짜 힘을 발휘합니다. 이 강의는 암기가 아닌 도해 중심 · 흐름 중심 · 실전 중심으로 자바스크립트의 내부 작동을 명쾌하게 정리해, 면접장에서 “말이 트이는” 경험을 제공하는 강의입니다.


🎯 이 강의를 통해 다음 질문들에 명확하게 답할 수 있게 됩니다.

  • 스코프와 실행 컨텍스트는 무엇이며 왜 필요한가요?


    → 렉시컬 환경·실행 컨텍스트가 결정하는 식별자 탐색/초기화 규칙을 통해 호이스팅·TDZ가 왜 생기는지 이해합니다.

  • this 바인딩은 어떻게 결정되나요?
    → 기본/명시적/new 바인딩 규칙과 call/apply/bind의 차이를 사례로 정리합니다.

  • 클로저는 무엇이고 언제 유용한가요?
    → 외부 상태 캡슐화, 이벤트/콜백에서의 활용, 메모리 누수 주의점까지 장단점을 균형 있게 다룹니다.

  • 프로토타입과 class는 무엇이 다르나요?
    → 프로토타입 체인·메서드 공유 원리와 class 문법이 얹힌 추상화를 도식으로 비교합니다.

  • 이벤트 루프는 어떻게 동작하나요?
    → 콜 스택·태스크 큐·이벤트 루프를 시각화하고, Promise와 async/await의 원리를 알아봅니다.

  • DOM은 무엇이며 어떻게 조작하나요?
    → 노드 선택 및 조작, 이벤트 전파(캡처링/버블링), preventDefault/stopPropagation을 묶어 설명합니다.

  • 스크립트 로딩 전략은 왜 중요하죠?
    → defer·async·type="module"의 차이, ES 모듈·동적 import와 코드 스플리팅을 정리합니다.



📌 강의 말미에는 실전 인터뷰 연습 챕터가 기다립니다.

“실행 컨텍스트를 한 문장으로 말해보세요”, “클로저가 왜 필요한가요?”, “프로토타입 상속을 도식으로 설명해보세요”, “Promise와 async/await의 차이를 실행 순서로 말해보세요”, “버블링이 왜 유용한가요?” 같은 면접 단골 질문에 대해 스스로 한두 문장으로 답해보는 훈련도 할 수 있습니다.

📖 핵심만 꽉 채운 커리큘럼

이 강의에서 배우게 될 목차와 핵심 키워드입니다.

낯선 키워드가 있다면 이번 기회에 확실히 잡고 넘어가세요.

  1. 스코프와 실행 컨텍스트

    • 스코프, 렉시컬 환경, 실행 컨텍스트, 호이스팅, TDZ, this 키워드, 명시적 바인딩, JS 런타임


  2. 클로저

    • 클로저의 개념과 동작 원리, 데이터 은닉화와 메모리 관리 관점의 장단점

  3. 자바스크립트 동작 원리

    • 싱글 스레드 구조, 동기 vs 비동기 처리 흐름, 이벤트 루프의 작동 방식(콜 스택, 태스크 큐)

  4. 비동기 프로그래밍

    • 콜백 함수와 콜백 지옥, Promise의 상태 변화와 체이닝, async/await 문법과 에러 처리

  5. 프로토타입과 상속

    • 객체 생성 방식과 생성자 함수,

      프로토타입의 개념과 연결 구조,

      다양한 프로토타입 상속 방식

  6. 배열과 객체 다루기

    • map, filter, reduce 등 배열 메서드, 객체 구조 분해와 스프레드 연산자

  7. 자바스크립트 모듈 시스템

    • ES 모듈 시스템 구조, import/export의 차이, 동적 import와 코드 스플리팅

  8. 브라우저와 자바스크립트

    • 자바스크립트 실행 준비 과정, 스크립트 로딩 전략, DOM과 이벤트, 이벤트 전파

  9. [부록] 인터뷰 연습

    • 문답 형식으로 주요 개념들을 다시 한 번 복습

✏ 이런 내용을 배워요

1⃣ 흐름 중심으로 이해하는 자바스크립트 핵심 메커니즘

  • 스코프, 실행 컨텍스트, 이벤트 루프, 콜 스택 등 복잡한 메커니즘이 어떻게 연결되어 동작하는지 흐름도와 타임라인으로 파악

실행 컨텍스트 생성 과정

2⃣ 도해, 필기, 코드를 활용한 단계별 흐름 설명

  • 단순 암기가 아닌 시각 + 코드 + 손필기를 결합한 구조
    → 복잡한 개념도 필기와 실행 결과를 병행해 자연스럽게 익히고
    → 수강 중에도 다시 열어보며 정리할 수 있는 ‘복습형 강의’ 구성

스코프의 정의와 종류

3⃣ 실전 감각을 키우는 패턴 중심 예제

  • 프로토타입 상속, 이벤트 위임, 모듈 로딩 전략 등
    실무에서 마주치는 패턴을 이유와 함께 이해할 수 있도록 구성

class 기반 프로토타입 상속 예시

4⃣ 기술 면접을 대비한 핵심 질문 정리

  • 강의 마지막에 인터뷰 연습 챕터 포함

  • "클로저는 무엇인가요?", "Promise의 원리를 설명해주세요" 등
    자주 묻는 질문을 한두 문장으로 정리하는 연습 포함

  • 개념 습득 → 실전 대비까지 이어지는 흐름

핵심 질문 정리

👀 강의 맛보기

영상이 멈춰있다면 새로고침 부탁드립니다 :)

싱글 스레드의 한계를 극복하는 방법: 이벤트 루프

Promise 동작 원리 및 후속 처리 방법

💡 또 다른 면접 대비 강의가 궁금하다면? 아래의 로드맵을 참고하세요 :)

🔗 기술 면접 마스터 로드맵

기술 면접 마스터 로드맵

수강 전 참고 사항

  • 제공하는 학습 자료 형식: PDF

  • 선수 지식이 필요하지 않은 강의입니다.


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 자바스크립트의 기본 문법은 알지만, 동작 원리를 체계적으로 정리하고 싶은 분

  • 실행 컨텍스트, 클로저, 프로토타입, 비동기 등 면접 단골 주제를 깊게 이해하고 싶은 분

  • 기술 면접에서 자바스크립트 관련 질문에 자신 있게 답하고 싶은 취업 준비생

  • 코드 실행 흐름과 성능 최적화 원리를 이해해, 실무 개발에 바로 적용하고 싶은 분

선수 지식,
필요할까요?

  • Javascript 기본 문법

안녕하세요
입니다.

1,383

수강생

89

수강평

8

답변

4.9

강의 평점

7

강의

학력 및 경력

  • 서울대학교 졸업

  • 現 카카오 개발자

     

배경

  • 컴퓨터 비전공자 출신

  • 독학으로 개발을 시작해 CS 기초부터 기술 면접까지 직접 체계적으로 정리하며 준비

  • 시행착오를 겪으며 쌓은 학습법과 개념 정리 노하우를 꾸준히 콘텐츠로 제작해옴

주요 이력

강의 철학

  • 실무와 면접에서 꼭 마주치는 핵심만 선별해,
    쉬운 설명과 도해로 누구나 이해하고 확장할 수 있도록 설계

  • “그때의 저에게 필요했던 강의를 만들고 있습니다”

블로그

Contact

  • yiyj1030@gmail.com

커리큘럼

전체

38개 ∙ (3시간 25분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중

₩7,260

70%

₩24,200

이용준님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!