SQLize Embed로 기술 튜토리얼을 인터랙티브하게 만들기

Source: Dev.to

SQL 튜토리얼이나 데이터베이스 문서를 작성해 본 적이 있다면 그 어려움을 잘 알고 있을 겁니다. 아름다운 코드 스니펫을 제공하더라도 독자들이 실제로 동작을 보려면 다음 과정을 거쳐야 합니다:

• 코드를 복사하고
• 로컬 터미널이나 무거운 IDE를 열고
• 데이터베이스 스키마를 설정하고
• 코드를 실행하기

대부분의 독자는 이 과정을 하지 않고 그냥 스크롤을 계속합니다.

오늘은 SQLize Embed를 소개하게 되어 기쁩니다 — 가볍고 반응형이며 강력한 방법으로 실시간 SQL 샌드박스를 블로그, 문서, 교육 사이트에 직접 삽입할 수 있습니다.

SQLize Embed란?

SQLize Embed는 정적인 “ 요소를 완전한 기능을 갖춘 SQL 편집기로 변환하는 클라이언트‑사이드 라이브러리입니다. SQLize.online 엔진을 기반으로 하며, 사용자가 페이지를 떠나지 않고 실제 데이터베이스 인스턴스에 대해 SQL을 작성하고 실행할 수 있게 해줍니다.

주요 기능

• 20개 이상의 데이터베이스 엔진: MySQL 8.0/9.3, PostgreSQL (14‑18), SQLite 3 같은 클래식부터 MS SQL Server (2017‑2025), Oracle 23ai 같은 엔터프라이즈까지 모두 지원합니다.
• 즉시 사용 가능한 데이터셋: JOIN을 시연하고 싶나요? Sakila (MySQL/MariaDB), OpenFlights, AdventureWorks (MS SQL) 같은 사전 로드된 데이터베이스를 활용하세요.
• 현대적인 편집기 경험: Ace Editor 기반으로 구문 강조, 자동 들여쓰기, 전문적인 코딩 느낌을 제공합니다.
• 반응형 & 가벼움: 모바일과 데스크톱 모두에서 매끄럽게 작동합니다.
• 읽기 전용 모드: 사용자가 실행은 할 수 있지만 수정은 할 수 없도록 예시를 보여줄 때 완벽합니다.

30초 만에 시작하기

실시간 SQL 샌드박스를 사이트에 추가하는 것은 YouTube 영상을 삽입하는 것만큼 간단합니다.

1. 스크립트 포함하기

사이트의 또는 닫는 태그 바로 앞에 다음 스크립트 태그를 추가하세요:

<!-- Insert the SQLize Embed script here -->

2. 샌드박스 추가하기

data-sqlize-editor 속성을 가진 div를 만들고, 원하는 데이터베이스 버전과 초기 코드를 지정합니다:

-- Create a sample table
CREATE TABLE dev_to_fans (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100)
);

-- Insert data
INSERT INTO dev_to_fans (username) VALUES ('awesome_dev'), ('sql_ninja');

-- Run it!
SELECT * FROM dev_to_fans;

고급 설정

간단한 HTML 속성을 사용해 샌드박스의 외관과 동작을 맞춤 설정할 수 있습니다:

활용 사례

• 인터랙티브 학습: 사용자가 브라우저에서 직접 과제를 해결하는 “SQL 101” 코스를 구축합니다.
• 문서화: 테이블 스크린샷 대신 사용자가 직접 DESCRIBE table을 실행하도록 합니다.
• 기술 블로그: 복잡한 PostgreSQL 윈도우 함수나 새로운 MariaDB Vector 타입을 실시간 예제로 보여줍니다.

실시간 데모 체험

다양한 예시와 실시간 문서를 확인해 보세요:

• 👉 SQLize Embed Documentation
• 👉 SQLize Embed Showcase

커뮤니티에 참여하세요!

우리는 지속적으로 새로운 데이터베이스 버전을 추가하고 있습니다 (이미 MS SQL Server 2025 지원!). 보고 싶은 특정 데이터베이스나 데이터셋이 있다면 댓글로 알려 주세요!

행복한 코딩 되세요! 💻

Tags: sql database webdev tutorial productivity programming