기술 스택별 미니 프로젝트 모음 포맷:
[기술스택] 결과물 만들기
저장소: https://github.com/lukaPlayground/tutorial 데모 모음: https://lukaplayground.github.io/tutorial
| # | 폴더 | 주제 | 데모 | 블로그 |
|---|---|---|---|---|
| 01 | 01-drag-drop-todo | [HTML/CSS/JS] 드래그앤드롭 Todo 앱 |
GitHub Pages | Blog |
| 02 | 02-react-exchange-rate | [React] 실시간 환율 계산기 (API 연동) |
GitHub Pages | Blog |
| 03 | 03-nextjs-supabase-guestbook | [Next.js] Supabase로 방명록 만들기 (풀스택) |
Vercel | Blog |
| 04 | 04-python-youtube-transcript | [Python] 유튜브 자막 추출기 만들기 |
로컬 실행 ↓ | Blog |
| 05 | 05-darkmode-portfolio | [HTML/CSS/JS] 다크모드 토글 포트폴리오 페이지 만들기 |
GitHub Pages | Blog |
| 06 | 06-localstorage-notepad | [HTML/CSS/JS] 로컬스토리지 메모장 앱 만들기 |
GitHub Pages | Blog |
| 07 | 07-canvas-drawing | [HTML/CSS/JS] Canvas API로 그림판 만들기 |
GitHub Pages | Blog |
| 08 | 08-pomodoro-timer | [HTML/CSS/JS] 뽀모도로 타이머 만들기 |
GitHub Pages | Blog |
| 09 | 09-react-github-profile | [React] GitHub 프로필 검색기 만들기 (GitHub API) |
GitHub Pages | Blog |
| 10 | 10-react-movie-search | [React] 영화 검색 앱 만들기 (TMDB API) |
GitHub Pages | Blog |
| 11 | 11-react-weather | [React] 날씨 앱 만들기 (Open-Meteo · API 키 불필요) |
GitHub Pages | Blog |
| 12 | 12-react-infinite-scroll | [React] 무한 스크롤 구현하기 (커스텀 훅 + IntersectionObserver) |
GitHub Pages | Blog |
| 13 | 13-nextjs-markdown-blog | [Next.js] 마크다운 블로그 만들기 (정적 생성) |
Vercel | Blog |
| 14 | 14-nextjs-ai-chatbot | [Next.js] Vercel AI SDK로 챗봇 만들기 |
Vercel | Blog |
| 15 | 15-nextjs-prisma-todo | [Next.js] Prisma + PostgreSQL Todo 앱 만들기 |
Vercel | Blog |
| 16 | 16-nextjs-nextauth | [Next.js] NextAuth로 소셜 로그인 구현하기 |
Vercel | Blog |
| 17 | 17-flutter-budget-app | [Flutter] 가계부 앱 만들기 (로컬 저장) |
로컬 실행 ↓ | Blog |
| 18 | 18-flutter-qr-scanner | [Flutter] QR 코드 생성/스캔 앱 만들기 |
실기기 필요 ↓ | Blog |
| 19 | 19-flutter-timer | [Flutter] 뽀모도로 타이머 앱 만들기 (로컬 알림) |
로컬 실행 ↓ | Blog |
| 20 | 20-flutter-memo | [Flutter] 메모앱 만들기 (Hive NoSQL) |
로컬 실행 ↓ | Blog |
| 21 | 21-python-excel | [Python] 엑셀 자동화 스크립트 만들기 (openpyxl) |
로컬 실행 ↓ | Blog |
| 22 | 22-python-scraper | [Python] 웹 스크래퍼 만들기 (BeautifulSoup) |
로컬 실행 ↓ | Blog |
| 23 | 23-python-fastapi | [Python] FastAPI로 REST API 서버 만들기 |
로컬 실행 ↓ | Blog |
| 24 | 24-python-telegram-bot | [Python] Telegram 봇 만들기 |
로컬 실행 ↓ | Blog |
| 25 | 25-php-login | [PHP] 로그인/회원가입 시스템 만들기 |
로컬 실행 ↓ | Blog |
| 26 | 26-php-board | [PHP] 게시판 CRUD 만들기 (SQLite · CSRF · 페이지네이션) |
로컬 실행 ↓ | Blog |
| 27 | 27-php-rest-api | [PHP] REST API 서버 만들기 (순수 PHP · JSON · CORS) |
로컬 실행 ↓ | Blog |
| 28 | 28-php-file-upload | [PHP] 파일 업로드 시스템 만들기 (다중 업로드 · 파일 교체 · 다운로드) |
로컬 실행 ↓ | Blog |
| 29 | 29-gemini-chatbot | [Gemini API] 나만의 AI 챗봇 웹앱 만들기 (Gemini · 멀티턴) |
로컬 실행 ↓ | Blog |
| 30 | 30-pollinations-image | [Pollinations.ai] AI 이미지 생성기 (API 키 없음 · Vanilla JS · 무료) |
GitHub Pages | Blog |
| 31 | 31-transformers-image-caption | [Transformers.js] 이미지 설명 생성기 (브라우저 AI 추론 · Web Worker · ~200MB) |
로컬 실행 ↓ | Blog |
| 32 | 32-ollama-pdf-summary | [Python + Ollama] PDF 요약 자동화 스크립트 (Ollama 로컬 LLM · PyMuPDF · 배치 처리) |
로컬 실행 ↓ | Blog |
| 33 | 33-n8n-make-blog-automation | [n8n + Make] 블로그 포스팅 자동화 (GitHub Actions · Markdown→HTML · Tistory API) |
클라우드 + 로컬 | Blog |
Python 스크립트는 로컬에서 직접 실행한다. Python 3.8 이상 필요.
Python 설치: https://www.python.org/downloads/
cd 04-python-youtube-transcript
pip install -r requirements.txt
# CLI 버전 (터미널 출력)
python main.py <YouTube URL>
# 웹 UI 버전 (Streamlit)
streamlit run app.py
# → 브라우저에서 http://localhost:8501 자동으로 열림가상환경을 쓰고 싶다면 (선택)
python -m venv venv source venv/bin/activate # Windows: venv\Scripts\activate pip install -r requirements.txt
cd 21-python-excel
pip3 install -r requirements.txt
python3 main.py
# → output/monthly_sales_report.xlsx 생성cd 22-python-scraper
pip3 install -r requirements.txt
python3 main.py
# → output/books.csv 생성 (books.toscrape.com 100권)cd 23-python-fastapi
pip3 install -r requirements.txt
uvicorn main:app --reload
# → http://localhost:8000 API 서버
# → http://localhost:8000/docs Swagger UIcd 24-python-telegram-bot
pip3 install -r requirements.txt
cp .env.example .env # .env 열어서 BOT_TOKEN 입력
python3 main.py
# → Telegram에서 봇과 대화 시작BOT_TOKEN 발급: Telegram에서 @BotFather → /newbot → 토큰 복사 →
.env에 붙여넣기
PHP 내장 웹 서버로 로컬에서 실행한다. PHP 8.0 이상 필요.
PHP 설치: https://www.php.net/downloads
cd 25-php-login
php -S localhost:8080
# → http://localhost:8080데이터 저장: SQLite 파일(
data/users.db)이 자동 생성된다. 서버 없이 로컬 파일만으로 동작한다.
cd 26-php-board
php -S localhost:8080
# → http://localhost:8080데이터 저장: SQLite 파일(
data/board.db)이 자동 생성된다. MySQL 전환 시db.php의 DSN 한 줄만 변경하면 된다.
cd 27-php-rest-api
php -S localhost:8080 index.php
# → http://localhost:8080/api/tasks라우터 스크립트 필수:
php -S는index.php를 라우터로 지정해야/api/tasks경로가 동작한다.index.php없이 실행하면 404가 난다.
cd 28-php-file-upload
php -S localhost:8080
# → http://localhost:8080업로드 폴더:
uploads/가 자동 생성된다..gitignore에 포함돼 있어 업로드된 파일은 저장소에 커밋되지 않는다.
cd 29-gemini-chatbot
cp .env.example .env # .env 열어서 GEMINI_API_KEY 입력
php -S localhost:8080
# → http://localhost:8080API 키 발급: aistudio.google.com → Get API key →
.env에 붙여넣기
# 서버 불필요 — 브라우저에서 바로 열기
open 30-pollinations-image/index.html
# 또는 파일 탐색기에서 index.html 더블클릭# Web Worker는 file:// 프로토콜 미지원 → 간단한 HTTP 서버 필요
cd 31-transformers-image-caption
python3 -m http.server 8031
# 브라우저: http://localhost:8031
# 첫 실행 시 ~200MB 모델 다운로드 (이후 브라우저 캐시)# Ollama 설치 및 모델 준비 (최초 1회)
ollama pull llama3.2
# 의존성 설치
cd 32-ollama-pdf-summary
pip install -r requirements.txt
# 실행 (PDF 파일이 있는 폴더 지정)
python3 summarize.py ./sample/ --model llama3.2Flutter 앱은 네이티브 기능을 사용해 웹 데모가 불가능하다. 아래 방법으로 로컬에서 실행한다.
open -a Simulator # 시뮬레이터 실행
cd 17-flutter-budget-app # 또는 19-flutter-timer
flutter run # 자동으로 시뮬레이터 감지# Android Studio → Device Manager → 에뮬레이터 시작
cd 17-flutter-budget-app # 또는 19-flutter-timer
flutter run # 자동으로 에뮬레이터 감지18-flutter-qr-scanner는 카메라 + ML Kit를 사용하며, iOS 시뮬레이터에서 ML Kit arm64 슬라이스 미지원으로 빌드 불가. 실제 iOS/Android 기기 연결 후 실행해야 한다.
# 기기 연결 후
cd 18-flutter-qr-scanner
flutter devices # 연결된 기기 확인
flutter run # 실기기에서 실행Last updated: 2026-03-05