Interactive — learn by writing code

Full learning map

Practice by hand, theory in concept notes. · 0 of 82 interactive done

Not sure where to start? Let the 1:1 coach pick

100%

HTML 기초

0/7

HTML이란? — 태그의 기본 HTML 문서 구조 — head·body input — 입력칸 텍스트 태그 — 제목·문단 링크 — a 태그 폼 — form 태그

목록 태그Coming soon

CSS 기초

0/7

CSS 선택자 — 클래스 박스 모델 — padding·border 선택자 우선순위 — 클래스 > 태그 Flexbox — 가로 정렬 CSS Grid — 격자 배치 미디어 쿼리 — 반응형 CSS 변수 — var()

Python 입문

0/19

변수·print — Python 첫 코드 자료형 — int·float·str·bool 리스트(list) — 순서 있는 묶음 딕셔너리(dict) — key:value 짝 제어 흐름 — if·for 함수 — def·return f-string — 변수를 {}로 끼워넣기 set(집합) — 중복 자동 제거 리스트 컴프리헨션 — 리스트를 한 줄로 람다(lambda) — 이름 없는 한 줄 함수 클래스(class) — 객체를 찍어내는 틀 예외 처리 try-except — 에러로 안 죽기 상속 — class 자식(부모)제너레이터 — yield 로 하나씩 이터레이터 — iter·next 데코레이터 — @로 함수에 부가기능 더하기 @dataclass — 보일러플레이트 줄이기 with 문 — 자원 자동 정리 타입 힌트 — : int, -> float

JavaScript

0/12

변수와 타입 함수와 스코프 DOM 선택과 변경 이벤트 배열과 반복 fetch 기초 참 같은 값 / 거짓 같은 값 — truthy & falsy 화살표 함수 — (a, b) => a + b 배열 메서드 — filter 배열 메서드 — map 구조 분해 할당 async/await — 비동기 기다리기

TypeScript

0/4

기본 타입 — 타입 에러 고치기 interface — 객체의 모양 정의 함수 타입 — 매개변수·반환 타입 유니온 타입 — 여러 타입 허용

백엔드 · 요청과 응답

0/6

요청과 응답 메서드의 의미 경로 파라미터 하드 DELETE 의 함정 소프트 삭제 권한 체크

풀스택 · 전체 흐름

0/2

흐름 관찰 — 클릭 한 번의 전 과정 종합 — 안전한 삭제 흐름

Java · Spring

0/9

변수·출력 — Java 첫 코드 산술 — 숫자 계산 조건문 — if / else 반복문 — for 배열 — 여러 값과 for-each

클래스·객체 (OOP)Coming soon

Spring · 의존성 주입Coming soon

Spring · REST 컨트롤러Coming soon

Spring · JPA → DBComing soon

터미널 · 환경설정

0/4

터미널 첫걸음 — 폴더 이동(cd)라이브러리 설치 — npm install 사이트 띄우기 — npm run dev GitHub 에 올리기 — 첫 협업 흐름

개발 도구 · AI 자동완성

0/3

AI 자동완성 받아치기 — Tab 연습

Cmd+K 인라인 편집Coming soon

AI 에이전트에게 맡기기Coming soon

네트워크 · 언제 쓰나

0/1

네트워크 — 언제 무엇을 쓰나

운영체제 · 언제 쓰나

0/1

운영체제 — 언제 무엇을 쓰나

보안 · 무엇을 막나

0/1

보안 — 언제 무엇을 막나

DevOps · 언제 쓰나

0/1

DevOps — 언제 무엇을 쓰나

바이브코딩 · 프롬프트

0/1

바이브코딩 — 프롬프트 잘 쓰는 법

GitHub · 버전관리

0/7

저장소 시작 — git init 변경 담기 — git add (스테이징)저장하기 — git commit 브랜치 — git branch · checkout GitHub 에 올리기 — git push

브랜치 합치기 (merge)Coming soon

Pull Request · 리뷰Coming soon

Flexbox

0/2

정렬·분배Coming soon

grow·shrinkComing soon

반응형

0/2

미디어쿼리Coming soon

clamp·vwComing soon

React

0/2

컴포넌트·propsComing soon

useStateComing soon

Next.js

0/2

App RouterComing soon

Server ActionComing soon

Database

0/2

ERD 설계Coming soon

정규화Coming soon

백엔드 로직 · 회원 삭제

0/8

하드 DELETE의 함정 ON DELETE CASCADE 소프트 삭제 트랜잭션 권한 체크 종합 — 실무의 회원 삭제

회원가입Coming soon

로그인·세션Coming soon

Concept notes — theory (free, all concepts)

Read every concept here, even those without interactive lessons yet. Free, no login.

Java 6 lessons

OOP, 컬렉션, 스트림, JVM

Spring Boot 10 lessons

DI, MVC, JPA, Security

Database 6 lessons

SQL, 인덱스, 트랜잭션

HTML/CSS 11 lessons

HTML, CSS, Flexbox, Grid

JavaScript 21 lessons

ES6+, DOM, 비동기

TypeScript 7 lessons

타입 시스템, 제네릭, 비동기 7개 — JS 와의 차이

React 22 lessons

컴포넌트 · Hooks · 상태관리 · 폼 · 최적화 · TS

Next.js 15 lessons

App Router · Server Component · Server Actions · Streaming · Optimistic UI · Middleware · SEO · Revalidation

Python 27 lessons

문법, 자료구조, 비동기, AI 기초

Vibe Coding 9 lessons

Cursor·Copilot·v0·Claude Code

Dev Tools 4 lessons

IDE, CLI, 디버깅, 생산성

Network 9 lessons

TCP/IP, HTTP, 쿠키·세션, CDN, CORS

Collaboration & Git 4 lessons

Git, 애자일