53만 건 이상의 실제 상가(상권) 데이터를 활용한 인터랙티브 SQL 학습 웹 애플리케이션입니다.
| 특징 | 설명 |
|---|---|
| 완전한 브라우저 실행 | 서버 없이 브라우저에서 SQL 실행 (sql.js WebAssembly) |
| 실제 데이터 | 소상공인시장진흥공단 상가정보 536,115건 |
| 단계별 학습 | 16개 실무 문제를 6단계 난이도로 제공 |
| VS Code 에디터 | Monaco Editor 기반 SQL 편집 환경 |
git clone https://github.com/Cloud-Linuxer/sql-study.git
cd sql-study
npm install
npm run devNote:
public/data/store_data.csv파일 필요 (공공데이터포털에서 다운로드)
git clone https://github.com/Cloud-Linuxer/sql-study.git
cd sql-study
docker-compose up -d- Frontend: http://localhost:5173
- API: http://localhost:3001
- MySQL: localhost:3306 (root/practice123)
# 1. MySQL 데이터베이스 생성
mysql -u root -p -e "CREATE DATABASE naver_financial CHARACTER SET utf8mb4;"
# 2. 환경 설정
cd server && cp .env.example .env
# .env 파일에서 DB_PASSWORD 설정
# 3. 서버 실행
npm install && npm start
# 4. 프론트엔드 (새 터미널)
cd .. && npm install && npm run dev| 영역 | 기술 |
|---|---|
| Frontend | React 18, Vite, Tailwind CSS, Monaco Editor |
| Backend | Express.js, MySQL, Passport (Google OAuth) |
| Browser DB | sql.js (WebAssembly SQLite), PapaParse |
sql-study/
├── src/
│ ├── components/ # React 컴포넌트
│ ├── hooks/ # 커스텀 훅 (useDatabase, useDatabaseAPI)
│ ├── data/ # 예제 쿼리, 퀴즈 문제
│ └── utils/ # 유틸리티 함수
├── server/ # Express API 서버
├── docker/ # Docker 초기화 스크립트
├── docs/ # 스크린샷
└── public/data/ # CSV 데이터 (별도 다운로드)
| 영역 | 평가 | 비고 |
|---|---|---|
| 코드 품질 | B+ | 구조 좋음, console.log 정리 필요 |
| 보안 | B+ | SQL Injection 방어 우수 |
| 성능 | B | 기본 최적화 적용됨 |
| 아키텍처 | A- | 명확한 분리, 확장 가능 |
- SELECT/WITH/DESC/SHOW 쿼리만 허용
- 시스템 테이블 접근 차단
- 위험 키워드 (DROP, DELETE 등) 차단
- 자동 LIMIT 100 적용
MIT License
버그 리포트, 기능 제안, PR 환영합니다!