성장 루프
문제를 푸는 순간 다음 학습이 정해집니다
기술 선택
현재 쓰는 스택을 고르면 필요한 영역만 모아 시험지가 구성됩니다.
실전 문항
문법 암기보다 실무 판단, 실패 조건, 트레이드오프를 묻습니다.
결과 진단
난이도 가중치를 반영해 현재 수준과 취약 영역을 보여줍니다.
오답 학습
틀린 문제는 연결된 기술 가이드로 바로 이어집니다.
기술별 모의고사
원하는 영역만 골라 볼 수 있습니다
JavaScript
실행 컨텍스트, 클로저, 비동기, 프로토타입 등 JS의 핵심 원리부터 실무 패턴까지 정리한 가이드 모음입니다.
TypeScript
강력한 정적 타이핑과 고급 타입 시스템을 통해 타입 안전한 코드를 작성하는 실무 테크닉을 다룹니다.
React
React 렌더링, 상태 관리, 패턴 등 핵심 개념을 정리한 가이드 모음입니다.
Next.js
Next.js App Router, 렌더링 전략, 캐싱, 배포까지 실무 중심으로 정리한 문서 모음입니다.
HTML
웹 표준, 시맨틱 마크업, 접근성 등 FE 개발의 근간이 되는 HTML 핵심 개념을 정리한 가이드 모음입니다.
Jotai
Jotai 상태 관리 라이브러리의 atom 설계부터 Next.js 연동까지 다룬 가이드 모음입니다.
Zustand
Zustand로 클라이언트 상태를 간결하게 관리하는 패턴과 실무 전략을 정리한 가이드 모음입니다.
TanStack Query
TanStack Query로 서버 상태를 다루는 패턴과 실무 전략을 정리한 가이드 모음입니다.
CSS
박스 모델, 레이아웃(Flex/Grid), 애니메이션 등 시각적 완성도를 위한 CSS 핵심 기술을 정리합니다.
Tailwind CSS
Tailwind CSS의 utility-first 철학부터 컴포넌트 패턴, Next.js 연동까지 실무 중심으로 정리한 문서 모음입니다.
npm
의존성 관리부터 스크립트 활용까지, 가장 대중적인 패키지 매니저의 실무 활용법을 다룹니다.
pnpm
Strict한 의존성 관리와 효율적인 디스크 사용을 자랑하는 pnpm의 핵심 원리를 정리합니다.
NestJS
NestJS 아키텍처와 실무 패턴을 정리한 가이드 모음입니다.
Drizzle ORM
Drizzle ORM을 활용한 타입 안전한 DB 접근 패턴을 정리한 문서 모음입니다.
Interview
FE 기술 면접의 핵심 원리와 실무 답변을 정리한 인터뷰 마스터 클래스 가이드입니다.
오답과 연결되는 글
최근 업데이트된 학습 가이드
💡 25. 번들 최적화 & 코드 스플리팅: 실전 성능 개선
사용자가 최초 방문 시 내려받는 JavaScript 번들을 최소화하는 코드 스플리팅 전략, React.lazy와 동적 import, 그리고 Bundle Analyzer로 번들 크기 시각화까지. 실무 성능 개선의 전 과정을 다룹니다.
⚛️ 24. TypeScript × React 고급 패턴: 타입 안전한 컴포넌트 설계
제네릭 컴포넌트로 any 남용 탈출, Discriminated Union으로 불가능한 props 조합 차단, 다형성 컴포넌트의 완전한 타입 안전성까지. 실무 TypeScript 패턴을 코드로 체득합니다.
🧩 23. useReducer & 상태 머신: 복잡한 상태 로직의 해방
isSaving과 isSaved가 동시에 true가 되는 버그는 왜 생기는가? useReducer와 유한 상태 머신(FSM) 사고방식으로 '불가능한 상태 조합'을 코드 구조 자체로 차단하는 법을 배웁니다.
🪝 22. 커스텀 훅 설계 철학: 로직의 캡슐화와 합성
복붙 늪에서 탈출하는 커스텀 훅 추출 기준부터, useAsync·useLocalStorage·useDebounce 등 실무 훅 설계 패턴까지. '훅이어야 하는가, 컴포넌트여야 하는가'의 판단 기준을 명확히 다집니다.