설치 없이 SQL 연습! NULL지마 개발기
SQL 학습 시 겪는 DBMS 설치 및 데이터셋 준비의 어려움을 해결하기 위해 기획됨
sql.js와 WebAssembly를 활용하여 브라우저에서 DB 설치 없이 SQL 실행 환경 제공
체계적인 로드맵, 단계별 문제 풀이, 정답 채점 시스템으로 실습 중심 학습 지원
커뮤니티 게시판을 통해 질문 및 풀이 공유 기능으로 학습 동기 부여
브라우저 기반 SQL 실행 환경 구축: sql.js 활용
NULL지마의 핵심은 별도 DB 설치 없이 브라우저에서 SQL을 실행하는 환경입니다. 이를 위해 sql.js 라이브러리를 도입했습니다. sql.js는 SQLite를 WebAssembly로 컴파일한 것으로, 사용자의 브라우저 내에서 직접 SQL 쿼리를 처리합니다. 이 아키텍처는 로컬 DB 설치의 번거로움을 제거하고, 서버 비용 부담을 줄이며, 학습용 서비스에 적합하다는 장점이 있습니다. 또한, 사용자별 독립적인 SQL 실행 환경을 제공하여 동시 접속자 증가에도 유연하게 대처할 수 있습니다.
SQL 학습 장벽 해소를 위한 기획 의도
개발자는 SQL 학습 초기에 겪는 DBMS 설치의 어려움, 실습 데이터셋 부족, 테이블 구조 설계 부담, 오류 분석의 어려움 등 여러 장벽을 해결하고자 NULL지마를 기획했습니다. 특히 책으로만 공부할 때 부족한 실무 감각을 익힐 수 있도록 실제 데이터와 유사한 환경을 제공하는 데 초점을 맞췄습니다. 체계적인 학습 로드맵과 단계별 문제 풀이를 통해 사용자가 SQL 문법을 단순히 암기하는 것을 넘어 직접 실행하고 이해하도록 유도합니다.
React와 CodeMirror를 활용한 인터랙티브 SQL 에디터
프론트엔드 개발에는 React와 Vite를 조합하여 빠른 개발 환경을 구축했습니다. SQL 에디터 구현에는 CodeMirror 라이브러리를 채택하여 풍부한 기능을 제공합니다. CodeMirror는 SQL 문법 하이라이팅, 자동완성, 포맷터 기능을 지원하며, 사용자에게 스키마 확인 툴바와 쿼리 실행 결과 테이블 출력 기능을 제공하여 초급자도 쉽게 쿼리를 작성하고 결과를 확인할 수 있도록 돕습니다. 이는 직관적인 사용자 경험(UX) 제공에 기여합니다.
자기주도 학습을 위한 문제 풀이 및 채점 시스템
NULL지마는 직접 문제를 풀어보며 SQL 실력을 향상시키는 데 중점을 둡니다. 난이도별 SQL 문제 제공과 함께 사용자가 작성한 쿼리를 실행하고, 정답 결과와 비교하여 채점하는 시스템을 갖추었습니다. 또한, 힌트 보기, 오답 분석, 최근 작성 코드 자동 저장, 즐겨찾기 기능 등을 통해 사용자가 틀린 부분을 스스로 확인하고 복습할 수 있도록 지원합니다. 이는 자기주도 학습 경험 강화에 목적을 둡니다.
Firebase 기반 인증 및 커뮤니티 기능 구현
사용자 인증 및 커뮤니티 게시판 데이터 관리를 위해 Firebase BaaS(Backend as a Service)를 적극 활용했습니다. Firebase Authentication을 통해 간편하게 사용자 인증을 처리했으며, Firestore 데이터베이스를 사용하여 게시글, 댓글, 추천 등의 데이터를 효율적으로 관리했습니다. 서비스 배포는 Firebase Hosting을 통해 이루어졌습니다. 이 구조는 별도의 백엔드 서버 구축 없이 프론트엔드 중심으로 빠르게 서비스를 개발하고 운영할 수 있게 합니다.
