소개
학습이나 코딩 중에 간단히 코드를 테스트하고 싶을 때, 로컬 개발 환경을 설정하는 것이 번거롭다고 느낀 적이 있나요? 초보자들에게는 코딩 연습을 위해 개발 환경을 구축하려다가 그 과정에서 막히는 일이 흔한 경험일 것입니다. 이러한 상황에서 추천할 만한 도구가 바로 StackBlitz입니다. StackBlitz는 웹 기반 도구로, 개발 환경 설정 없이도 웹사이트에 접속하기만 하면 프런트엔드 기술을 활용해 코드를 테스트할 수 있습니다. 이번 기사에서는 이 편리한 도구인 StackBlitz의 기본 사용 방법을 설명합니다.
이 기사에 대하여
기사의 목적
- StackBlitz가 무엇인지 이해하기.
- StackBlitz를 사용하는 이점을 배우기.
- StackBlitz를 활용하여 코드를 테스트할 수 있게 되기.
대상 독자
- 초보자.
- StackBlitz 사용 방법을 알고 싶은 사람.
StackBlitz란?
StackBlitz는 웹 브라우저에서 직접 작동하는 온라인 코드 편집기이자 통합 개발 환경(IDE)입니다. 주로 JavaScript, TypeScript, React, Angular, Vue.js 등 프런트엔드 프레임워크와 라이브러리 개발에 사용됩니다. 프런트엔드 기술 외에도 Python, WordPress와 같은 다른 기술도 지원합니다.
IDE란?
IDE(통합 개발 환경)는 개발자가 소프트웨어 코드를 효율적으로 개발할 수 있도록 도와주는 도구입니다. StackBlitz 같은 서비스는 이러한 IDE 기술을 활용해 제공됩니다. IDE는 애플리케이션을 개발하는 데 필요한 도구를 하나로 통합한 환경을 제공하며, 개발 환경 설정 없이 바로 개발을 시작할 수 있습니다. StackBlitz 외에도 CodeSandBox나 AWS의 Cloud9과 같은 유명한 IDE 서비스가 있습니다. 이러한 도구를 사용하면 어디서든 손쉽게 개발이 가능합니다.
사용 요금
요금이 궁금하다면, 개인 플랜은 무료로 이용 가능합니다. 프로젝트 생성 수에는 제한이 없습니다(2024년 7월 기준). 개인 프로젝트나 외부 API 사용을 위해서는 업그레이드가 필요하지만, 학습 목적이라면 무료 플랜으로 충분할 것입니다.
StackBlitz의 주요 특징
즉각적인 개발 환경 구축 및 라이브 미리보기
브라우저에서 바로 프로젝트를 시작할 수 있으며, 환경 설정이나 설치가 필요 없습니다. 프로젝트 내에서 코드를 편집하면 핫 리로드 기능을 통해 즉시 결과를 미리볼 수 있어 빠르게 피드백을 받을 수 있습니다.
GitHub와의 연동
프로젝트를 GitHub 저장소와 연동하여, 웹상에서 코드를 간편하게 푸시하거나 클론할 수 있습니다.
클라우드 기반 환경
코드가 클라우드에 저장되므로 어디서든 접근이 가능하며, 팀과의 공유가 원활합니다.
NPM 지원
NPM 패키지를 설치하고 프로젝트에 통합할 수 있습니다.
사용의 장점
간편한 시작
환경 설정이 필요 없어 초보자부터 전문가까지 누구나 쉽게 프로젝트를 시작할 수 있습니다.
시간과 리소스 절약
설정이나 설치 과정이 없으므로 웹에서 바로 환경을 구축할 수 있어 시간을 절약하고, 로컬 저장소의 용량을 아낄 수 있습니다.
어디서든 접근 가능하며 프로젝트 공유가 쉬움
인터넷에 접속 가능한 환경만 있다면 어디서든 개발이 가능합니다. 약간 불편하긴 하지만 스마트폰에서도 조작할 수 있습니다. 자신의 프로젝트를 다른 사람과 쉽게 공유할 수도 있습니다. 예를 들어, 팀 멤버에게 코드 리뷰를 요청할 때 프로젝트 URL만 공유하면 팀원이 브라우저에서 바로 확인할 수 있습니다. 로컬 코드의 GitHub 푸시 작업 없이도 코드를 간편히 확인할 수 있습니다.
※ 팀 작업 등 StackBlitz를 팀 단위로 사용하려면 유료 구독이 필요합니다.
프로젝트 생성 무제한
2024년 7월 기준으로 공개 프로젝트 생성에 제한이 없습니다. 비슷한 서비스인 CodeSandBox는 프로젝트 생성 수에 제한이 있지만, StackBlitz는 제한이 없습니다.
로컬 개발 환경과 유사한 사용성
StackBlitz는 로컬 VSCode처럼 콘솔에서 npm 명령을 실행하여 패키지를 설치할 수 있습니다. CodeSandBox에서는 종속성 관리 화면을 통해 패키지를 설치하지만, StackBlitz는 로컬 개발 환경과 유사한 경험을 제공합니다.
계정 생성 방법
StackBlitz는 GitHub 계정을 통해 계정을 생성합니다. GitHub 계정을 준비한 후 아래 절차를 따르세요.
-
StackBlitz 웹사이트에 접속
StackBlitz 웹사이트에 접속한 후, "Create your first project" 또는 "Get started"를 클릭합니다.
-
GitHub 연동 선택
다음 화면으로 이동하여 "Continue with GitHub"를 클릭합니다.
-
GitHub에 로그인
GitHub에 로그인하지 않은 경우, 아래 페이지가 열리므로 로그인합니다.
-
GitHub과 연동
GitHub에 로그인한 후, 아래 화면으로 이동하므로, "Authorize StackBlitz"를 클릭하여 GitHub과 연동합니다.
-
무료 플랜 선택
무료 계정을 만들려면, "Personal projects as a hobby"를 선택하고, "Go to StackBlitz"를 클릭합니다.
-
대시보드로 이동
계정이 생성되면 대시보드로 이동합니다. 이 일련의 과정을 통해 계정을 만들 수 있습니다.
StackBlitz 사용법
그럼 실제로 어떻게 사용하는지, React 애플리케이션을 예로 들어 사용법을 설명하겠습니다. 이 핸즈온에서는 TailwindCSS를 사용하여 간단한 카운트업 애플리케이션을 만들 것입니다. 핸즈온을 통해 로컬에서 개발할 때와의 차이점이 무엇인지 살펴보겠습니다.
이번 핸즈온에서는 아래와 같은 카운트업 애플리케이션을 만들 것입니다.
프로젝트 만들기
-
새 프로젝트 만들기
StackBlitz 대시보드에서 "New project"를 클릭합니다.
-
프로젝트 선택
모달 창이 열리면 프로젝트 목록이 표시됩니다. 'Frontend' 탭을 선택하고 'React'를 클릭합니다.
-
프로젝트 생성
통신 상태에 따라 다르지만, 잠시 후 프로젝트가 생성됩니다. 로컬에서 프로젝트를 만들 때보다 React가 더 빠르게 시작되는 것을 실감할 수 있습니다.
-
화면 각 부분 설명
화면의 각 부분은 아래와 같습니다. UI는 VSCode와 거의 동일하며, 사용감이나 기능 면에서 몇 가지 공통점이 있습니다. 평소에 VSCode를 사용하고 있는 분들은 바로 사용을 시작할 수 있을 것입니다.
코드 편집
-
App.jsx 편집
App.jsx를 열고, 아래와 같이 코드를 편집합니다.
// App.jsx
import React, { useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
return (
<div className="flex justify-center items-center">
<div className="bg-white p-10 rounded shadow-lg text-center">
<h1 className="text-2xl font-bold mb-4">Counter App</h1>
<p className="text-4xl mb-4">{count}</p>
<button
onClick={() => setCount(count + 1)}
className="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition duration-300"
>
Increment
</button>
</div>
</div>
);
}
export default App;-
TailwindCSS 추가
다음으로, TailwindCSS SDK를 추가합니다.
<script src="https://cdn.tailwindcss.com"></script>를<head>태그 안에 작성합니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>이제 아래와 같이 카운터 앱이 표시될 것입니다. 코드 편집 결과가 오른쪽 화면에 즉시 반영되므로 학습 효율이 향상되며, 매우 유용하게 사용할 수 있습니다.
기타 기능
개발자 도구에서 확인하기
프리뷰 창의 아래 아이콘을 클릭하면 새 탭에서 프리뷰를 열 수 있습니다. 새 프리뷰 화면에서 개발자 도구를 열면 console 등을 확인할 수 있습니다.
로컬에서 개발하는 것과 동일하게 console 등을 확인하면서 웹에서 작업할 수 있습니다.
GitHub과의 연동
GitHub과 StackBlitz를 연동하면 StackBlitz에서 Git 작업을 할 수 있습니다. 코드를 편집하고 리모트 리포지토리로 git push하거나, StackBlitz 프로젝트에서 Git clone 등의 일련의 작업을 웹상에서 완료할 수 있습니다.
-
리포지토리 생성
아래의 "Create a repository" 버튼을 클릭하면 진행 중인 프로젝트의 GitHub 리포지토리를 생성할 수 있습니다.
-
GitHub 앱 설정
StackBlitz에서 처음으로 GitHub 리포지토리를 만들 경우, GitHub 앱과 관련된 아래 화면이 표시됩니다. 이때 "Configure App"을 클릭합니다.
-
GitHub 앱 적용 대상
"for these repositories:"에서 모든 리포지토리 또는 선택한 리포지토리에 설치할지를 선택한 후, "Install & Authorize"를 클릭합니다.
-
리포지토리 생성
이 일련의 절차는 StackBlitz에서 Git 작업을 수행할 수 있도록 하기 위한 것입니다.
Git Apps 설치가 완료되면 아래 화면으로 이동되며, 원하는 리포지토리 이름을 입력한 후 "Create a repository"를 클릭합니다.
새로운 탭에서 프로젝트가 다시 시작됩니다. GitHub와 연동함으로써 브랜치나 프로젝트 내에 .gitignore 파일이 생성되며, UI도 VSCode와 비슷해져 로컬에서 작업하는 것과 거의 동일한 느낌을 받게 됩니다.
이 상태에서 로컬에서 작업하는 것처럼 git add 등의 Git 작업이 가능합니다. 이처럼 웹 상에서 다양한 작업을 할 수 있다는 점은 매우 편리합니다.
정리
지금까지 StackBlitz의 계정 생성부터 기본적인 사용 방법에 대해 설명했습니다. 간단히 되짚어 보겠습니다.
StackBlitz란?
StackBlitz는 웹 브라우저에서 바로 작동하는 온라인 코드 편집기이자 통합 개발 환경(IDE)입니다. React와 같은 프론트엔드 프레임워크 및 라이브러리 개발에 사용할 수 있습니다. 개인 플랜은 무료로 이용할 수 있으며, 만들 수 있는 프로젝트 수는 무제한입니다(2024년 7월 현재). 개인 학습 목적이라면 무료 플랜으로 충분히 활용할 수 있습니다.
사용하는 이점
환경 설정이나 설치가 필요 없으며, 즉시 웹 상에서 환경을 구축할 수 있습니다. 이를 통해 설정에 드는 시간을 절약하고, 로컬 저장소 용량을 아낄 수 있습니다.
웹에 접속할 수 있는 환경만 있다면 어디서든 개발이 가능합니다. 프로젝트 URL을 공유하기만 하면 다른 사람과 쉽게 프로젝트를 공유할 수 있습니다.
참고 자료
아래 링크는 이 기사에서 설명한 절차와 개념에 관련된 참고 자료입니다. 더 자세히 배우고 싶은 분들은 꼭 참조해 보세요.
- StackBlitz 공식: https://stackblitz.com/
- StackBlitz 문서: https://developer.stackblitz.com/
