SQL 연습장 만들기 with codex

https://hibot-docu.com/sql

SQL 연습장을 만들어봤습니다. 실제 테이블 구조와 샘플 데이터를 보면서 문제를 풀고, 직접 작성한 SQL을 실행해 결과를 확인할 수 있는 실습 공간입니다.

핵심 기능 목록:

1. 난이도별 SQL 문제 풀이

2. 직접 작성한 SQL 실행 및 결과 확인

3. 정답 확인 및 제출 채점

4. 풀이 히스토리 확인

5. ERD 및 테이블 스키마 확인

6. 모바일 반응형 연습 화면

SQL 문법만 외우는 방식이 아니라, 테이블 구조와 샘플 데이터를 함께 보면서 쿼리를 작성할 수 있게 구성했습니다. 모바일에서는 파일 선택, 문제 선택, 테이블 정보, 입력/실행 흐름을 세로형으로 정리해 작은 화면에서도 바로 문제를 고르고 쿼리를 실행할 수 있습니다.

개발 기술/스택:

React, TypeScript, Vite, Tailwind CSS 기반으로 프론트엔드를 구성했고, TanStack Query/Router로 데이터 요청과 라우팅을 관리했습니다. 백엔드는 NestJS 기반이며, SQL 연습장은 SQLite seed 데이터를 활용해 문제별 테이블 구조와 샘플 데이터를 불러오고 실행 결과를 확인할 수 있도록 만들었습니다.

그 외 기능:

이 사이트는 SQL 연습장 외에도 개발/업무용 콘솔 형태로 구성되어 있습니다. AI 개발 방법론 정리, 회의실, 프로토타입 관리, 업무 관리, Postman 스타일 API 테스트, SQL 예제, Study Diary, Dev Challenge, 게시판, 관리자 메뉴 등을 한 화면에서 이동하며 사용할 수 있습니다.

감사합니다