강의 개요

4시간 동안 파이썬 파일 하나(약 220줄)로 고객 목록 + 추가 폼 + 성별 통계 차트가 있는 웹앱을 처음부터 끝까지 만듭니다. HTML, CSS, JavaScript는 한 줄도 쓰지 않습니다.

대상

• 파이썬 기초 문법(함수, 리스트, 딕셔너리, 클래스)을 아는 사람
• 웹개발은 처음이거나, 프론트엔드(React)를 따로 배우지 않고 웹앱을 만들고 싶은 사람
• 데이터 분석·자동화 스크립트를 웹 화면으로 보여주고 싶은 사람

학습 목표

강의가 끝나면 수강생은 다음을 할 수 있습니다.

1. uv로 Reflex 프로젝트를 만들고 실행한다.
2. 컴포넌트를 조합해 화면을 그리고, 키워드 인자로 스타일을 준다.
3. rx.State에 데이터를 두고, 화면이 그 데이터를 따라 바뀌게 만든다.
4. 버튼·폼 이벤트를 받아 서버의 파이썬 코드로 상태를 바꾼다.
5. 상태를 가공해 차트로 시각화한다.
6. "컴파일 타임 vs 런타임"의 차이를 설명하고, 그 때문에 생기는 대표적인 에러를 고친다.

완성 결과물: Customer Data App

준비물

• Windows 10/11, macOS, Linux 중 하나 (Windows는 WSL 권장이지만 필수는 아님)
• uv (파이썬과 패키지를 함께 관리)
• Node.js 22.22.0 이상 (Reflex 0.10이 요구하는 최소 버전)
• VS Code 등 코드 에디터, 웹 브라우저
• 이 교안의 기준 버전: Reflex 0.10.0, Python 3.12

시간표 (총 240분)

이 교안 활용법

• 각 교시는 학습 목표 → 개념 설명 → 코드 따라치기 → 실습 → 체크포인트 순서입니다.
• 강사 노트는 영상 녹화나 라이브 강의 때 말로 풀어줄 포인트입니다. 블로그 포스팅에서는 본문 설명으로 바꿔 써도 됩니다.
• 코드는 교시마다 조금씩 덧붙여 가며 완성합니다. 최종 코드는 부록에 있습니다.