🎓 JavaScript 핵심 개념 학습 센터

JavaScript의 핵심인 동기/비동기 처리 방식을 시각적 타임라인으로 완벽 이해

콜백Promiseasync/await

🔒

🔒 HTTP vs HTTPS

웹 보안의 기초인 HTTP와 HTTPS의 차이점, SSL/TLS 동작 원리를 시각적으로 학습합니다

암호화SSL/TLS인증서

🌐

🌐 CORS (Cross-Origin Resource Sharing)

Same-Origin PolicyPreflight RequestCORS Headers

브라우저의 보안 정책과 CORS 동작 원리를 시각적으로 학습하고, 실무에서 자주 마주치는 에러 해결법을 익혀보세요

🔐

🔐 인증 방식 비교 (Cookie vs Session vs JWT)

웹 인증의 핵심 방식들을 비교하고, 각각의 장단점과 적합한 사용 사례를 학습합니다

CookieSessionJWT

🔌

🔌 웹소켓 vs HTTP 통신

실시간 통신을 위한 WebSocket과 전통적인 HTTP 통신의 차이점을 시각적으로 학습합니다

실시간 통신양방향 통신Polling/SSE

🔄

🔄 RESTful API 설계 원칙

HTTP MethodsStatus CodesBest Practices

REST 아키텍처 스타일과 API 설계 모범 사례를 시각적으로 학습하고 실습합니다

💾

💾 웹 스토리지 완벽 가이드

LocalStorageCookieIndexedDB

LocalStorage, SessionStorage, Cookie, IndexedDB의 차이점과 활용법을 실습으로 학습합니다

🗄️

🗄️ 브라우저 캐싱 전략

Cache-ControlETagCDNService Worker Cache

HTTP 캐싱, 브라우저 캐시, CDN 캐싱의 작동 원리를 시각적으로 학습하고 성능을 최적화합니다

📡

📡 GraphQL vs REST

Over-fetchingUnder-fetchingSchemaResolver

REST API와 GraphQL의 차이점을 실제 요청/응답 비교로 학습하고 각각의 장단점을 이해합니다

Phase 2: JavaScript 핵심 마스터리

JavaScript의 내부 동작 원리를 깊이 있게 파고들어 고급 개발자로 거듭납니다.

📋

📝 JavaScript 변수 선언 & 호이스팅

var, let, const의 차이점과 스코프, 호이스팅, TDZ를 인터랙티브 시뮬레이터로 학습

varletconst스코프호이스팅TDZ

⚖️

⚖️ JavaScript 동등 연산자 (== vs ===)

동등 연산자와 일치 연산자의 차이점을 실습과 예제로 명확하게 학습

동등 연산자일치 연산자타입 변환비교

🔄

🚀 병렬 Promise 응답 순서

여러 Promise가 병렬로 실행될 때 응답 받는 순서를 시각적으로 학습

Promise비동기 처리병렬 실행

🧠

🧠 JavaScript 실행 컨텍스트

실행 컨텍스트와 스택, 스코프 체인의 작동 원리를 단계별 시각화로 학습

실행 컨텍스트스택스코프 체인호이스팅변수 환경

🎯

🔍 JavaScript Scope & Closure

ClosureScopeVariable CaptureReact State

클로저와 스코프 체인을 통한 변수 캡처 메커니즘을 시각적 시뮬레이터로 학습

🧬

🧬 JavaScript Prototype & 상속

Prototype상속생성자 함수클래스프로토타입 체인

프로토타입 체인과 상속 메커니즘을 시각적 시뮬레이터로 학습

🎪

🎯 Event Delegation & 이벤트 위임

Event DelegationEvent BubblingPerformanceDOM Management

효율적인 이벤트 처리와 DOM 이벤트 전파 메커니즘을 인터랙티브 시뮬레이터로 학습

⚡

🧱 JavaScript 이벤트 루프

Event LoopCall StackQueue

Call Stack, Task Queue, Microtask Queue의 작동 원리를 시뮬레이션으로 학습

🎯

🎯 this 바인딩의 모든 것

암시적 바인딩명시적 바인딩new 바인딩화살표 함수

JavaScript의 this 키워드가 결정되는 4가지 규칙을 인터랙티브 예제로 완벽 학습

🔄

🔄 JavaScript 모듈 시스템

import/exportrequire동적 import순환 참조

CommonJS, ES Modules, AMD의 차이점과 번들러가 처리하는 과정을 시각화로 학습

🎯

🎯 JavaScript 배열 메서드 완전 정복

map, filter, reduce부터 최신 메서드까지 배열 조작의 모든 것을 실습으로 학습

고차함수메서드 체이닝성능 비교실무 패턴

📊

📊 JavaScript 메모리 관리

가비지 컬렉션, 메모리 누수, WeakMap/WeakSet의 동작을 시각적으로 학습합니다

가비지 컬렉션메모리 누수힙/스택WeakMap

Phase 3: React & 웹 심화

모던 웹 개발의 핵심인 React와 브라우저 렌더링에 대한 심도 있는 내용을 학습합니다.

⚛️

⚛️ React Virtual DOM

Virtual DOMDiffingReconciliationReact성능 최적화

Virtual DOM의 작동 원리와 Diffing 알고리즘을 시각적 시뮬레이터로 학습

🌐

🌐 웹 렌더링 전략 시뮬레이터

CSR, SSR, ISR, SSG의 차이점과 특징을 시각적 시뮬레이터로 학습

CSRSSRISRSSG렌더링성능 최적화

🎨

🎨 브라우저 렌더링 과정

DOMCSSOMCritical Rendering Path성능 최적화리플로우리페인트

HTML과 CSS가 화면에 그려지는 전체 과정을 시각적으로 학습하고 성능 최적화 기법 마스터

🔧

🔧 브라우저별 CSS 호환성 해결

Vendor PrefixProgressive EnhancementFeature DetectionCross BrowserPolyfill

개발자가 자주 마주하는 CSS 호환성 이슈 해결 방법과 실무 사례를 체계적으로 학습

⏱️

⏱️ JavaScript Debounce & Throttle

DebounceThrottle성능 최적화이벤트 제어사용자 경험

이벤트 호출 빈도 제어 기법과 성능 최적화를 인터랙티브 시뮬레이터로 학습

🎛️

🎛️ React 상태 관리 완전 가이드

초급-중급

useState부터 Context API까지 React의 모든 상태 관리 패턴을 초보자도 쉽게 이해할 수 있도록 단계별로 학습합니다

useStateuseEffectuseReducerContext API커스텀 훅

📱

📱 반응형 웹 디자인 실전

초급-중급

미디어 쿼리, 플렉스박스, 그리드를 활용한 반응형 레이아웃을 실습으로 구현합니다

미디어 쿼리모바일 퍼스트터치 이벤트뷰포트

⚡

⚡ 웹 성능 측정과 개선

Core Web Vitals번들 최적화이미지 최적화로딩 전략

Lighthouse, Web Vitals를 활용한 성능 측정과 실제 개선 방법을 학습합니다

🧪

🧪 프론트엔드 테스팅 입문