JS 퀴즈북 × 이펙티브 타입스크립트 읽기 지도

Item 79–83 범위를 바탕으로 JS 현대화, @ts-check와 JSDoc, allowJs, 모듈별 마이그레이션, noImplicitAny를 코드 리뷰 관점에서 정리합니다.

ESM live binding, default/named export, circular dependency, dynamic import, CJS와 ESM 차이를 프론트엔드 코드 리뷰 관점에서 정리합니다.

Item 67–73 범위를 바탕으로 public API 타입, TSDoc, this callback, module augmentation, TypeScript 기능 선택, source map을 코드 리뷰 관점에서 정리합니다.

DOM 이벤트의 capture/bubble, delegation, default action, React synthetic event 경계를 프론트엔드 코드 리뷰 관점에서 정리합니다.

Item 60–66 범위를 바탕으로 Object iteration, Record, tuple/rest, XOR, brand, @types 버전 경계를 코드 리뷰에서 다루는 방법을 정리합니다.

프로토타입 조회, class 문법, 인스턴스 필드와 prototype 메서드 차이를 프론트엔드 코드 리뷰 관점에서 정리합니다.

Item 55–59 범위를 바탕으로 type test, 타입 표시, 꼬리 재귀 한계, 코드 생성, never exhaustiveness를 코드 리뷰에서 다루는 방법을 정리합니다.

고차 함수, 순수 함수, 부수 효과, async 함수의 Promise 반환을 코드 리뷰에서 어떻게 읽을지 정리합니다.

Item 49–54 범위를 바탕으로 type coverage, 제네릭, 조건부 타입, 템플릿 리터럴 타입을 코드 리뷰에서 어떻게 판단할지 정리합니다.

this 바인딩을 정의 위치가 아니라 호출 형태, 메서드 분리, arrow function, bind 기준으로 읽는 방법을 코드 리뷰 관점에서 정리합니다.

Item 42–48 범위를 바탕으로 any, unknown, 타입 단언, monkey patching, soundness 함정을 외부 입력 경계와 코드 리뷰 관점에서 정리합니다.

콜 스택, 태스크 큐, 마이크로태스크 큐를 기준으로 Promise와 setTimeout 실행 순서를 코드 리뷰 관점에서 정리합니다.

Item 35–41 범위를 바탕으로 string 남용, optional 필드, 특수 값, 도메인 이름 설계를 코드 리뷰 관점에서 정리합니다.

클로저가 값 복사가 아니라 렉시컬 환경 참조라는 점을 stale closure, 루프 콜백, React 이벤트 리뷰 관점에서 정리합니다.

Item 28–34 범위를 바탕으로 추론 위치, 유효 상태 모델링, API 입출력, null 경계, union 설계를 프론트엔드 코드 리뷰 관점에서 확장 정리합니다.

스코프 체인, 렉시컬 환경, var/let/const 호이스팅 차이를 콜백·상태 버그 리뷰 관점에서 다시 정리합니다.

Item 22–27 범위를 바탕으로 narrowing, alias, context inference, evolving type, async/type flow를 프론트엔드 코드 리뷰 관점에서 다시 정리합니다.

객체 참조와 얕은 복사, Object와 Map/Set의 차이, WeakMap/WeakSet이 필요한 메모리 상황을 프론트엔드 코드 리뷰 관점에서 정리합니다.

Effective TypeScript 2판의 Item 16–21을 바탕으로 index signature, 타입 추론 기본, 변수/객체 생성 패턴을 프론트엔드 코드 리뷰 관점에서 정리합니다.

객체 프로퍼티를 key/value가 아니라 descriptor로 읽는 법, getter/setter와 defineProperty, preventExtensions/seal/freeze의 경계를 코드 리뷰 관점에서 정리합니다.

Effective TypeScript 2판의 Item 11–15를 바탕으로 excess property check, 함수식 타입, type vs interface, readonly, 타입 반복 제거를 프론트엔드 코드 리뷰 관점에서 정리합니다.

객체가 원시값으로 바뀌는 ToPrimitive 흐름, + 연산자의 문자열 연결과 숫자 덧셈 분기, Symbol.toPrimitive가 코드 리뷰에서 왜 중요한지 정리합니다.

Effective TypeScript 2판의 Item 6–10을 바탕으로 타입 시스템을 탐색하는 법, 타입을 값의 집합으로 보는 관점, type/value space, 타입 단언의 경계를 코드 리뷰 관점에서 정리합니다.

==, ===, Object.is, SameValueZero가 각각 어떤 비교 알고리즘을 쓰는지 정리하고, includes와 indexOf, Map/Set 키 비교에서 생기는 프론트엔드 리뷰 포인트를 잡습니다.

에이전트 시스템에서 trace를 콘솔 로그나 비용 기록으로만 보면 왜 부족한지, 사용자 요청부터 도구 호출, 산출물, 검증, 다음 실행 개선까지 이어지는 증거 사슬로 어떻게 설계해야 하는지 reverse-engineering합니다.

Effective TypeScript 2판의 Item 1–5를 바탕으로 TypeScript와 JavaScript의 관계, tsconfig, 타입 제거, 구조적 타이핑, any의 위험을 프론트엔드 코드 리뷰 관점에서 정리합니다.

자바스크립트의 Number가 왜 정수처럼 보여도 부동소수점 모델 위에서 움직이는지, NaN과 -0, safe integer, BigInt를 프론트엔드 코드 리뷰 관점에서 다시 정리합니다.

에이전트가 서로 협업하려면 "무엇을 잘한다"는 소개가 아니라 능력, 입력, 산출물, 권한, 실패 모드, 사람 개입 조건을 적은 실행 가능한 경계선이 필요하다는 점을 reverse-engineering합니다.

MCP 서버를 많이 붙이는 문제가 아니라, 에이전트가 외부 능력을 쓰기 전에 도구 목록, 입력 스키마, 권한, 샘플 호출, 실패 모드를 검문 가능한 계약으로 다루는 법을 reverse-engineering합니다.

harness를 단순 테스트 환경이나 공유 프롬프트가 아니라 모델, 컨텍스트, 도구, 권한, 작업 원장, 검증, 피드백을 묶어 전문 작업 단위를 찍어내는 팀 아키텍처 공장으로 reverse-engineering합니다.

에이전트 프레임워크를 직접 설계하거나 고칠 때 확장점을 단순 플러그인 기능이 아니라 책임과 권한이 갈리는 경계면으로 보는 법을 reverse-engineering합니다. 모델, 도구, 기억, 세션, 게이트웨이, 스케줄러, 리뷰 게이트가 어디에서 갈라져야 안전한지 봅니다.

여러 에이전트나 프로필을 붙일 때 사람 역할놀이가 아니라 capability, task, artifact, handoff contract로 연결해야 하는 이유를 reverse-engineering합니다. A2A식 사고와 OkayJing hub-spoke 운영을 바탕으로 안전한 협업 경계를 봅니다.

에이전트 실행을 단순한 채팅 답변이 아니라 이벤트, 산출물, 검증, 상태 전이의 흐름으로 설계하는 법을 reverse-engineering합니다. 티켓, 세션, 파일, 로그, 아티팩트가 왜 프레임워크의 중심이 되는지 봅니다.

에이전트 프레임워크에서 사람 개입, 승인, 거절, 확인 질문을 예외 처리로 두지 않고 실행 표면으로 설계하는 법을 봅니다. 위험도 기반 autonomy ladder, interrupt, approval gate, 검증 보고를 reverse-engineering합니다.

에이전트 프레임워크에서 반복 가능한 워크플로와 열린 에이전트 판단을 어떻게 분리해야 하는지 봅니다. 모든 것을 자율 에이전트로 만들지 않고, 상태·도구·검증·사람 개입 지점을 나누는 설계 기준을 reverse-engineering합니다.

에이전트 프레임워크에서 로그, trace, 평가, 재현 가능한 증거를 어떻게 설계해야 하는지 봅니다. 단순한 채팅 기록이 아니라 실행을 다시 읽고 고칠 수 있는 관측 가능성 계층을 reverse-engineering합니다.

에이전트 프레임워크에서 컨텍스트를 긴 프롬프트나 자료 모음이 아니라 실행 상태로 설계하는 법을 봅니다. 세션 기록, 작업 상태, 장기 기억, 검색 결과, 산출물, 검증 근거를 분리하고 조립하는 기준을 reverse-engineering합니다.

에이전트가 도구를 쓴다는 말을 함수 호출이 아니라 계약 설계로 다시 봅니다. MCP식 tool contract, 입력 스키마, 권한, 결과 해석, 실패 처리, 검증 책임을 기준으로 개인 에이전트 프레임워크의 도구 런타임을 설계합니다.

백엔드 스터디 마지막 날입니다. Spring Boot 세부 문법을 외우는 대신 프론트엔드 개발자가 백엔드와 안전하게 협업하기 위해 알아야 할 요청 흐름, API 계약, 데이터, 인증, 테스트, 운영 대화법을 하나의 지도로 정리합니다.

개인에게 맞는 에이전트 프레임워크를 만들기 전에 먼저 에이전트가 실제로 실행되는 환경을 분해합니다. 모델, 컨텍스트, 도구, 권한, 검증, 로그가 합쳐진 harness를 기준으로 현재 도구들의 한계와 확장 지점을 읽는 첫 번째 글입니다.

Day 1부터 Day 10까지 배운 백엔드 읽기 기준을 하나의 리뷰 체크리스트로 묶습니다. AI가 만든 Spring Boot 백엔드를 기능 단위가 아니라 요청 흐름, 계약, DB, 보안, 테스트, 운영 가능성 기준으로 검토하는 방법을 정리합니다.

AI가 만든 Spring Boot 백엔드를 운영 가능한 코드로 보려면 기능 구현뿐 아니라 문제가 났을 때 어디서 막혔는지 추적할 수 있어야 합니다. Day 10에서는 로그, 요청 ID, 에러 추적, 메트릭, 알림을 낮은 단계부터 읽는 법을 정리합니다.

AI가 만든 Spring Boot 백엔드가 실제 팀 작업에 들어갈 수 있는지 보려면 코드만이 아니라 API 문서, README, 변경 이력, 프론트엔드와의 계약 흐름을 읽을 수 있어야 합니다. Day 9에서는 Swagger/OpenAPI, README, 예시 요청, 에러 표, 협업 리뷰 기준을 낮은 단계부터 정리합니다.

AI가 만든 Spring Boot 백엔드가 로컬에서만 돌아가는 코드인지, 실제 서버에서 안전하게 운영될 수 있는 코드인지 판단하려면 배포 구조와 운영 환경을 읽을 수 있어야 합니다. Day 8에서는 Docker, 환경 변수, 프로필, 로그, 헬스체크, CI/CD를 낮은 단계부터 봅니다.

useEffect로 사이드 이펙트를 다루고, 이벤트 처리와 폼 상태 관리까지 — React로 실제 동작하는 앱을 만들기 위한 핵심 기술을 배웁니다.

지금 당장 읽지 않아도 됩니다. React를 배우면서 에러 처리가 필요해지거나 면접 대비가 필요할 때 참고하세요.

AI가 만든 Spring Boot 백엔드 코드를 검토할 때 테스트는 기능이 실제로 지켜지는지 확인하는 가장 안전한 증거입니다. Day 7에서는 테스트 문법을 외우기보다 Controller, Service, Repository 테스트가 무엇을 보장하는지 읽는 법을 낮은 단계부터 익힙니다.

AI가 만든 Spring Boot 백엔드 코드를 검토할 때 로그인, 인증, 인가, 토큰, 현재 사용자 흐름은 기능 안전성을 결정합니다. Day 6에서는 auth 코드를 외우는 대신 요청이 누구의 요청인지 확인하고 권한을 적용하는 흐름을 낮은 단계부터 읽습니다.

AI가 만든 Spring Boot 백엔드 코드를 검토할 때 Service 계층은 Controller, Repository, Entity를 연결하는 핵심 판단 지점입니다. Day 5에서는 Service 메서드, 비즈니스 규칙, 트랜잭션, 읽기/쓰기 경계, 위험 신호를 낮은 단계부터 읽는 법을 다룹니다.

AI가 만든 Spring Boot 백엔드 코드를 검토할 때 DB 저장 흐름은 가장 자주 위험해지는 지점입니다. Day 4에서는 Entity, Repository, JPA, ID, 관계, 조회/저장 메서드를 낮은 단계부터 읽고 프론트엔드 기능과 연결해 점검하는 방법을 다룹니다.

AI가 만든 Spring Boot 백엔드 코드를 검토할 때 입력 검증과 에러 응답은 사용자의 화면 경험을 직접 바꾸는 핵심 지점입니다. Day 3에서는 @Valid, 검증 어노테이션, BindingResult, 전역 예외 처리, 에러 응답 DTO를 낮은 단계부터 읽는 법을 다룹니다.

AI가 만든 Spring Boot 백엔드 코드를 검토할 때 가장 먼저 맞춰야 하는 것은 문법 암기가 아니라 프론트엔드와 백엔드 사이의 API 계약입니다. Day 2에서는 URL, HTTP Method, 요청 바디, 응답 바디, DTO, 검증 어노테이션, 에러 응답을 낮은 단계부터 읽습니다.

React를 처음 시작합니다. 컴포넌트, JSX, props, useState까지 — React 앱을 만들기 위한 핵심 네 가지를 한 번에 배웁니다.

React를 배우면서 this가 헷갈리거나, 면접 대비가 필요할 때 참고하는 JS 심화 자료입니다. 이 내용을 지금 당장 완벽히 이해하지 않아도 React를 배우는 데 지장이 없습니다.

직접 백엔드 코드를 다 작성하는 사람이 아니라, AI가 만든 Spring Boot 코드를 이해하고 수정 방향을 판단할 수 있는 사람을 목표로 시작합니다. Day 1에서는 서버가 하는 일, HTTP 요청의 흐름, 스프링 프로젝트 폴더 구조, Controller-Service-Repository의 역할을 아주 낮은 단계부터 잡습니다.

Next.js가 무엇이고 왜 필요한지 React와 비교해 이해한 뒤, CSR부터 SSR, SSG, ISR, PPR까지 렌더링 전략과 Web Vitals를 정리하며 스터디를 마무리합니다.

다음 주부터 React를 시작합니다. React 코드에서 매 줄 등장하는 map/filter, 구조 분해, 스프레드, 옵셔널 체이닝, 모듈까지 — React 코드를 막힘없이 읽기 위한 JS 문법을 한 번에 정리합니다.

비동기와 async/await를 배운 뒤, 대면에서는 API를 단순 호출 방법이 아니라 프론트엔드와 백엔드 사이의 계약으로 바라봅니다. HTTP, REST, CORS, 프록시, API 클라이언트 구조, TanStack Query와 파일 배치까지 연결합니다.

JS 비동기 처리의 흐름을 배웁니다. 클로저가 왜 중요한지, 콜백 지옥을 해결한 Promise, 그리고 현대 JS의 표준인 async/await까지 이어지는 흐름을 이해합니다.

바닐라 JS의 한계에서 React가 등장한 이유까지, 컴포넌트와 렌더링 방식을 이해하고 프로젝트 구조 감각을 만들어가는 대면입니다.

JS에서 가장 낯선 개념 중 하나인 프로토타입 기반 상속을 다룹니다. const가 왜 불변을 보장하지 않는지, 타입을 런타임에 정확히 확인하는 방법까지 함께 배웁니다.

JavaScript에서 거의 모든 것은 객체입니다. 함수가 일급 객체라는 의미, var와 let의 스코프 차이, 그리고 렉시컬 스코프까지 다룹니다.

4~6주차 공백 이후 진행하는 첫 번째 대면입니다. HTML/CSS/JS 핵심을 가볍게 다시 연결하고, 브라우저가 코드를 실제 화면으로 바꾸는 과정을 통해 렌더링 파이프라인과 성능 감각을 잡습니다.

길어진 6주차 대면의 두 번째 차시입니다. AI 시대에 개발자가 실제로 어떻게 일하는지, 그리고 프론트엔드 개발자가 디자이너·백엔드·PM 사이에서 어떤 연결과 리딩 역할을 하는지 다룹니다.

JavaScript를 처음 제대로 배우는 주차입니다. var/let/const의 차이, JS만의 독특한 타입 시스템, 그리고 호이스팅·TDZ까지 다룹니다.

배경 이미지를 제어하고, Position으로 요소를 원하는 위치에 배치하며, Flexbox로 유연한 가로·세로 레이아웃을 구성합니다. 요소를 화면 정중앙에 띄우거나, 내비게이션 바처럼 가로로 예쁘게 정렬하는 것이 이번 주 목표입니다.

3주차 박스 모델과 스타일링 복습, 과제 풀이, 4주차 Position과 Flexbox 레이아웃까지 다룬 대면 스터디 정리입니다. 면접에서 자주 나오는 마진 겹침, box-sizing, Flexbox 관련 질문도 함께 준비합니다.

폰트와 색상을 다루고, 인라인과 블록 요소의 차이를 이해하며, 마진·패딩으로 구성되는 박스 모델을 완벽하게 익힙니다. 요소들 사이의 여백을 자유자재로 제어하고 화면이 찌그러지지 않게 박스 크기를 다루는 것이 이번 주 목표입니다.

2주차 폼과 CSS 선택자 복습, 과제 풀이, 3주차 박스 모델과 스타일링까지 다룬 대면 스터디 정리입니다. 면접에서 자주 나오는 GET vs POST, CSS 우선순위, 박스 모델 관련 질문도 함께 준비합니다.

사용자 입력을 받는 폼(Form)을 만들고, CSS를 HTML에 연결하는 방법과 원하는 요소를 정확히 선택하는 CSS 선택자 규칙을 배웁니다. 로그인·회원가입 폼을 직접 만들고, CSS로 원하는 요소를 콕 집어내는 것이 이번 주 목표입니다.

1주차 HTML 핵심 복습과 과제 풀이, 2주차 폼(Form)과 CSS 선택자까지 다룬 대면 스터디 정리입니다. 면접에서 자주 나오는 시맨틱 HTML, img alt 속성 관련 질문도 함께 준비합니다.

기초 태그 강의에서 한 걸음 더 나아갑니다. 카카오톡 공유 썸네일, 모바일 데이터 절약, 스크린 리더기를 위한 숨은 정보 등 실무에서 마주하게 될 중급 HTML 개념들을 가볍게 훑어봅니다.

프론트엔드 개발자가 실무에서 하는 일, 2025-2026 기술 스택, 현실적인 연봉과 채용 트렌드를 정리했습니다. 스터디 자료 구조와 앞으로의 방향도 함께 안내합니다.

스터디 커리큘럼 방향을 정하기 위한 세 번째 사전 진단 퀴즈입니다. 자바스크립트의 스코프, 참조 타입의 메모리 할당, DOM 제어와 이벤트 흐름 등 React 실무의 근간이 되는 CS 지식을 점검합니다.

스터디 커리큘럼 방향을 정하기 위한 마지막 사전 진단 퀴즈입니다. React 컴포넌트를 다루기 위해 필수적인 배열 고차 함수(map, filter)와 비동기 통신(async/await) 능력을 점검합니다.

스터디 커리큘럼 방향을 정하기 위한 마지막 사전 진단 퀴즈입니다. 선언적 UI, 상태(State), 단방향 데이터 흐름, 부수 효과(Side Effect) 등 React 생태계 진입을 위한 필수 개념을 점검합니다.

스터디 커리큘럼 방향을 정하기 위한 첫 번째 사전 진단 퀴즈입니다. HTML 태그 구조부터 CSS 박스 모델까지, 실무와 React 환경에서 이 기초들이 왜 중요한지 점검합니다.

스터디 커리큘럼 방향을 정하기 위한 두 번째 사전 진단 퀴즈입니다. 시맨틱 마크업, 폼 이벤트 제어, CSS 우선순위, Flexbox 레이아웃 등 실전 활용 능력을 점검합니다.