VSCode를 DB 툴처럼! SQLTools 익스텐션 설치 및 도커 연결 가이드

오늘의 포스트는 이전 포스트에서 설치한 Laravel Breeze로 회원가입을 해보겠다.

그리고 가입한 회원의 정보가 DB(데이터베이스)에 제대로 잘 들어갔는지 확인해 볼 건데, 이 과정에서 VSCode에 SQLTools라는 익스텐션을 설치할 거다.

이전 포스트

Windows 도커 환경에서 Laravel Breeze CSS 깨짐 해결법 (WSL2에서 Vite 개발 서버를 실행할 때)

Windows 도커 환경에서 Laravel Breeze 설치 후 CSS 스타일이 깨지는 현상을 해결하는 가이드입니다. WSL2 환경의 Vite 개발 서버가 브라우저와 정상적으로 통신할 수 있도록 파일들을 수정하는 구체적인 방법을 정리했습니다.

이전 포스트에서 설치한 Laravel Breeze 덕분에 웹사이트 상단에 Log in과 Register 버튼이 생겼었는데, 먼저 Register 버튼을 클릭해서 회원가입을 한다.

아직은 이메일 인증 기능 등을 구현하지 않은 상태이기 때문에 이메일은 아무렇게나 넣어도 된다.

회원가입을 하면 자동으로 로그인이 되면서 대시보드 화면으로 넘어가게 된다.

이제 가입한 회원의 정보가 데이터베이스에 제대로 저장되었는지 확인해 보겠다.

SQLTools 익스텐션

VSCode의 익스텐션 검색창에 SQLTools를 입력한다.

Install 버튼을 클릭하자.

설치 전에 뭔가 메시지가 뜬다.

이 'Matheus Teixeira'라는 제작자를 신뢰하는지 묻는 것이다.

설치하려면 Trust Publisher & Install 버튼을 누르면 된다.

설치 후에는 VSCode의 좌측에 SQLTools의 아이콘이 생긴다.

이 아이콘을 클릭한 후에 Add New Connection 버튼까지 클릭하자.

그러면 SQLTools Settings로 들어가게 되는데, 화살표로 표시한 Search VS Code Marketplace를 클릭한다.

본인이 사용하는 DB에 맞는 드라이버의 익스텐션을 추가로 설치한다.

나는 MariaDB를 설치했기 때문에 SQLTools MySQL/MariaDB/TiDB를 설치했다.

설치 후 다시 SQLTools Settings로 가서 본인이 사용하는 DB를 클릭한다.

DB 연결을 위해서 입력해야 하는 폼이 뜬다.

각 항목이 무엇을 의미하는지, docker 환경에 맞춰 어떻게 설정해야 하는지 짚어보겠다.

• Connection name: 이 연결의 이름이다. "laravel13"처럼 본인이 알아보기 쉬운 이름을 자유롭게 적으면 된다.
• Connection group: 여러 프로젝트를 할 때 그룹별로 묶어주는 기능이다. 비워둬도 무방하다.
• Connect using: 접속 방식이다. Server and Port가 기본이며, docker 환경에서도 이 방식을 사용한다.
• Server Address: docker가 실행 중인 주소다. localhost나 127.0.0.1을 입력하면 내 PC의 포트를 타고 컨테이너로 연결된다.
• Port: 3306 (단, docker-compose.yml이나 .env에서 호스트 포트를 다른 번호로 바꿨다면 그 번호를 적어야 한다.)
• Database: 접속할 데이터베이스 이름이다.
• Username: DB 접속 계정을 입력한다.
• Password mode: 4가지 선택지가 있는데, 처음부터 선택되어 있는 SQLTools Driver Credentials는 VSCode 설정 파일 내부에 비밀번호를 저장한다. 매번 입력할 필요가 없어 가장 편리하다. Ask on connect는 보안을 위해 연결할 때마다 비밀번호를 직접 입력한다.
• Authentication Protocol: DB 서버가 사용자를 인증하는 방식이다. 최신 MySQL은 보안이 강화된 방식을 쓰는데, 가끔 구형 클라이언트와 충돌이 날 때 이 옵션을 바꾼다. docker의 최신 MariaDB라면 기본값인 default로 두면 된다.
• SSL: 데이터를 암호화해서 주고받을지 결정한다. 로컬 개발 환경(docker)에서는 내 컴퓨터 안에서만 데이터가 오가므로 보안 위험이 적어 Disabled로 두는 것이 일반적이다.
• Over SSH: 원격 서버(예: AWS EC2)에 있는 DB에 접속할 때 보안 터널을 통과할지 묻는 것이다. 지금은 내 PC의 docker에 접속하는 것이므로 반드시 Disabled여야 한다.
• Connection Timeout: 접속을 시도할 때 얼마나 기다릴지 설정한다. 비워두면 기본값이 적용된다.
• Show records default limit: 데이터를 조회(SELECT)할 때 한 번에 몇 줄까지 보여줄지 정한다. 데이터가 수만 건일 때 한꺼번에 불러오면 VSCode가 멈출 수 있기 때문에 50~100 정도로 제한을 둔다.

보통은 다 기본값이나 비워둔 상태로 두면 되고, Connection name과 Database와 Username만 입력하면 된다.

Password mode는 기본값이 SQLTools Driver Credentials인데, 나는 Ask on connect을 선택했다.

스크롤을 내려서 SAVE CONNECTION 버튼을 클릭한다.

확인 후 CONNECT NOW 버튼을 클릭한다.

DB의 비밀번호를 입력한다.

docker로 Laravel 개발 환경 구축 3편 (MariaDB 컨테이너 생성)

Docker Laravel 개발 환경 구축 3편에서는 MariaDB 컨테이너를 생성합니다. 데이터 영속화를 위한 설정과 .env 파일에 데이터베이스 환경 변수를 추가합니다. my.cnf 설정과 함께 DB 접속을 확인하는 방법까지 정리합니다.

이때 설정했었던 비밀번호를 입력하면 된다.

SQLTools에 DB를 연결한 직후에 VSCode에서 'DB이름.session.sql'이라는 파일이 열린다.

그냥 닫아버리자.

캡처 이미지처럼 저장할 것인지 묻는데, 저장할 필요도 없다.

이 파일은 실제 내 프로젝트 폴더에 저장되는 물리적인 파일이 아니라, VSCode 메모리상에 임시로 만들어진 세션 전용 쿼리 편집기다.

SELECT * FROM users; 같은 SQL 문을 연습 삼아 써보거나, 테이블의 데이터를 조회해 보기 위해 준비된 공간이다.

이제 SQLTools로 확인하고 싶은 테이블을 확인해 보자.

확인할 테이블을 선택해서 마우스 오른쪽 클릭을 하고, 'Show Table Records'를 선택한다.

그러면 DB의 테이블에 들어간 데이터가 표로 표시된다.

그런데 너무 공간이 좁다.

파랗게 표시한 부분을 클릭한 채로 화살표로 표시한 부분에 끌어다 놓자.

그러면 이렇게 데이터를 크게 볼 수 있다.

아까 전에 만든 회원의 계정이 잘 저장된 것을 확인할 수 있다.

SQLTools 설치 후에 프로젝트의 최상위 디렉터리에 .vscode라는 디렉터리가 생긴다.

이 폴더는 SQLTools 때문만이 아니라, VSCode를 제대로 활용하기 위해 꼭 필요한 '설정 저장소'다.

보통 .vscode/settings.json 파일이 들어있을 텐데, 파일을 열어보면 방금 만든 DB 연결 정보(호스트 주소, 포트, 유저명 등)가 코드로 작성되어 있는 것을 볼 수 있다.

이 폴더가 생기면 한 가지 주의할 점이 있다.

바로 "깃허브에 올려도 괜찮은가?"라는 문제다.

보통 팀 프로젝트에서는 launch.json(디버깅)은 공유하지만, 개인적인 DB 접속 정보가 담긴 settings.json은 공유하지 않는 편이다.

그러니 .gitignore 파일에 .vscode/를 추가하도록 하자.

docker로 Laravel 개발 환경 구축 2편 (NGiNX 컨테이너 생성)

Docker Laravel 개발 환경 구축 2편에서는 NGiNX 컨테이너를 생성합니다. docker-compose.yml에 NGiNX 서비스를 추가하고, default.conf를 설정하여 NGiNX와 php 컨테이너를 연동합니다.

.gitignore에 대한 내용은 이 포스트에서 정리했었다.

그리고 마지막으로 한 가지!

SQLTools는 테이블의 데이터를 표에서 바로 삭제하거나 수정할 수 없다.

이 부분이 SQLTools를 쓰면서 가장 아쉽게 느껴질 수 있는 점이다.

SQLTools의 기본 표(Table View)는 'Read-Only(읽기 전용)'이다.

즉, 데이터를 눈으로 확인하는 용도이지 엑셀처럼 칸을 더블 클릭해서 내용을 바로 수정하거나 행을 삭제하는 기능은 기본적으로 포함되어 있지 않다.

그런 기능을 원한다면 Database Client 익스텐션을 설치하는 게 좋다.

그런데 이 익스텐션은 무료 버전에서 연결 가능한 데이터베이스 개수에 제한을 두는 방식으로 유료 결제를 유도한다. (아마 2개까지는 무료였을 거다.)

하지만 SQLTools는 완전 무료이며 연결 개수에 제한이 없다.

그리고 표에서 직접 데이터를 수정이나 삭제하는 기능이 없는 대신에 용량이 더 작아서 가볍고 안정적이다.

이전에는 Database Client를 사용했었는데, 2개까지만 무료였던 점이 불편했어서 이번에는 SQLTools를 설치해 보았다.

혹시 나중에 '역시 표에서 직접 데이터를 수정하거나 삭제하는 기능이 필요할 것 같다' 싶으면 Database Client 익스텐션의 사용법도 올려보도록 하겠다.

다음 포스트

라라벨(Laravel) 초기 세팅: 타임존 설정 및 한글화

라라벨 애플리케이션의 타임존을 'Asia/Seoul'로 변경하고 전체 웹사이트를 한글화하는 상세 가이드입니다. laravel-lang/lang 패키지를 활용해 한국어로 자동 번역하는 명령어 단계를 정리했습니다. chown 명령어로 소유자를 변경하는 것도 잊지 마세요.