본문으로 건너뛰기

2. 개발 환경 설정

Svelte 개발을 위한 완벽한 환경을 구축하는 방법을 단계별로 알아보겠습니다. 현대적인 개발 도구들을 설정하여 생산성을 극대화하고 코드 품질을 보장합니다. 실무에서 바로 사용할 수 있는 최적화된 개발 워크플로우를 구성해보겠습니다.

2.1 Node.js 설치 및 설정​

Node.js란 무엇인가?​

Node.js는 Chrome V8 엔진을 기반으로 하는 JavaScript 런타임 환경으로, 서버 사이드에서 JavaScript를 실행할 수 있게 해줍니다. Svelte 개발을 위해서는 Node.js가 필수이며, 패키지 관리, 빌드 도구, 개발 서버 실행 등에 사용됩니다. npm(Node Package Manager)이 함께 설치되어 수천만 개의 오픈소스 패키지를 쉽게 관리할 수 있습니다.

LTS vs Current 버전 선택 기준​

LTS(Long Term Support) 버전 선택을 권장하는 이유

특징LTS 버전Current 버전
안정성30개월 장기 지원 보장6개월 후 지원 종료
보안 업데이트정기적인 보안 패치 제공제한적인 보안 업데이트
프로덕션 적합성운영 환경에서 검증됨실험적 기능 포함 가능
생태계 호환성대부분의 패키지가 지원일부 패키지 호환성 문제

2025년 현재 권장 버전

# 현재 활성 LTS 버전들
Node.js 18 (Hydrogen): 2025년 4월까지 지원
Node.js 20 (Iron): 2026년 4월까지 지원
Node.js 22 (Jod): 2027년 4월까지 지원 (최신 LTS)

권장: Node.js 22 LTS 사용 (가장 최신 기능과 장기간 지원)

운영체제별 설치 방법​

Windows 설치​

방법 1: 공식 인스톨러 사용 (초보자 추천)

  1. Node.js 공식 사이트에서 LTS 버전 다운로드
  2. 다운로드한 .msi 파일 실행
  3. 설치 마법사 따라하기 (모든 기본 옵션 그대로 사용)
  4. 설치 완료 후 재부팅

방법 2: Chocolatey 사용

# Chocolatey로 설치 (관리자 권한 필요)
choco install nodejs-lts

# 버전 확인
node --version
npm --version

macOS 설치​

방법 1: 공식 인스톨러 사용

  1. Node.js 공식 사이트에서 LTS 버전 다운로드
  2. 다운로드한 .pkg 파일 실행하여 설치

방법 2: Homebrew 사용 (개발자 추천)

# Homebrew 미설치시 먼저 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.js LTS 설치
brew install node@22

# 환경변수 설정
echo 'export PATH="/opt/homebrew/opt/node@22/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Linux (Ubuntu/Debian) 설치​

방법 1: NodeSource 저장소 사용 (권장)

# NodeSource 저장소 추가
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

# Node.js 설치
sudo apt-get install -y nodejs

# 빌드 도구 설치 (일부 npm 패키지에 필요)
sudo apt-get install -y build-essential

방법 2: Snap 사용

# LTS 버전 설치
sudo snap install node --classic

# 버전 확인
node --version
npm --version

NVM으로 여러 버전 관리하기​

Node Version Manager(NVM)를 사용하면 여러 Node.js 버전을 쉽게 관리할 수 있습니다. 프로젝트별로 다른 Node.js 버전이 필요한 경우나 새 버전을 테스트할 때 매우 유용합니다. 팀 프로젝트에서 특정 Node.js 버전을 통일해야 할 때도 NVM이 필수적입니다.

Windows (nvm-windows)​

# nvm-windows 설치 후
nvm list available              # 사용 가능한 버전 확인
nvm install 22.15.0            # 특정 버전 설치
nvm install --lts              # 최신 LTS 설치
nvm use 22.15.0                # 사용할 버전 전환
nvm list                       # 설치된 버전 목록

macOS/Linux​

# nvm 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

# 터미널 재시작 또는 다음 실행
source ~/.bashrc  # 또는 ~/.zshrc

# LTS 버전 설치 (npm 최신 버전 포함)
nvm install --lts --latest-npm

# 기본 버전으로 설정
nvm alias default 22.15.0

# 프로젝트별 .nvmrc 파일 사용
echo "22.15.0" > .nvmrc
nvm use  # .nvmrc 파일 기준으로 자동 전환

설치 확인​

# Node.js 버전 확인
node --version
# 출력 예시: v22.15.0

# npm 버전 확인
npm --version
# 출력 예시: 10.9.0

# npm 글로벌 패키지 경로 확인
npm config get prefix

# npm 설정 확인
npm config list

npm 업데이트​

# npm을 최신 버전으로 업데이트
npm install -g npm@latest

# 특정 버전으로 설치
npm install -g npm@10.9.0

# npm 캐시 정리 (문제 발생시)
npm cache clean --force

2.2 Svelte 프로젝트 생성​

SvelteKit vs Vanilla Svelte 선택 가이드​

Svelte로 프로젝트를 시작할 때는 용도에 맞는 도구를 선택하는 것이 중요합니다. SvelteKit은 풀스택 웹 애플리케이션을, Vanilla Svelte는 단순한 프론트엔드 컴포넌트나 위젯에 적합합니다. 대부분의 웹 프로젝트에서는 라우팅, SEO, 서버사이드 렌더링이 필요하므로 SvelteKit을 권장합니다.

특징SvelteKitVanilla Svelte
사용 목적풀스택 웹 앱컴포넌트, 위젯
라우팅파일 기반 라우팅 내장별도 라이브러리 필요
SSR/SSG기본 지원수동 설정 필요
SEO최적화됨추가 작업 필요
API 라우트내장별도 백엔드 필요
배포다양한 어댑터 제공정적 파일만 가능

SvelteKit 프로젝트 생성​

create-svelte 사용법​

# SvelteKit 프로젝트 생성
npm create svelte@latest my-svelte-app

# 생성 과정에서 나오는 옵션들
┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  › Skeleton project
│
◇  Add type checking with TypeScript?
│  › Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  ✔ Add ESLint for code linting
│  ✔ Add Prettier for code formatting
│  ✔ Add Playwright for browser testing
│  ✔ Add Vitest for unit testing
│
└  Your project is ready!

# 프로젝트 폴더로 이동
cd my-svelte-app

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev -- --open

템플릿 옵션 설명​

템플릿설명적합한 용도
Skeleton빈 프로젝트처음부터 구축
Demo app예제 코드 포함학습용, 프로토타입
Librarynpm 패키지 제작용재사용 가능한 라이브러리

생성된 프로젝트 구조​

my-svelte-app/
├── src/
│   ├── lib/                 # 재사용 컴포넌트
│   ├── routes/             # 페이지들 (파일 기반 라우팅)
│   │   ├── +layout.svelte  # 공통 레이아웃
│   │   └── +page.svelte    # 홈페이지
│   ├── app.d.ts            # TypeScript 타입 정의
│   └── app.html            # HTML 템플릿
├── static/                 # 정적 파일들
├── package.json           # 프로젝트 설정
├── svelte.config.js       # Svelte 설정
├── vite.config.js         # Vite 설정
└── tsconfig.json          # TypeScript 설정

Vanilla Svelte 프로젝트 생성​

임베드된 위젯이나 기존 프로젝트에 Svelte 컴포넌트를 추가하고 싶을 때 사용합니다.

# Vite로 Svelte 프로젝트 생성
npm create vite@latest my-svelte-widget -- --template svelte-ts

cd my-svelte-widget
npm install
npm run dev

프로젝트 설정 파일 이해하기​

package.json 분석​

{
  "name": "my-svelte-app",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite dev", // 개발 서버 실행
    "build": "vite build", // 프로덕션 빌드
    "preview": "vite preview", // 빌드 결과 미리보기
    "test": "vitest", // 단위 테스트 실행
    "lint": "eslint .", // 코드 품질 검사
    "format": "prettier --write ." // 코드 포맷팅
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "svelte": "^5.0.0",
    "vite": "^5.0.0"
  }
}

svelte.config.js 설정​

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),

    // 별칭 설정 (경로 단축)
    alias: {
      $components: 'src/lib/components',
      $utils: 'src/lib/utils',
    },

    // 환경변수 설정
    env: {
      publicPrefix: 'PUBLIC_',
    },
  },
};

export default config;

vite.config.js 커스터마이징​

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],

  // 개발 서버 설정
  server: {
    port: 3000,
    host: true, // 네트워크에서 접근 가능
    open: true, // 자동으로 브라우저 열기
  },

  // 빌드 설정
  build: {
    sourcemap: true,
    minify: 'terser',
  },
});

2.3 SvelteKit을 위한 VS Code 확장 프로그램 소개​

VS Code는 SvelteKit 개발에 가장 적합한 에디터입니다. 올바른 확장 프로그램 설정으로 개발 생산성을 크게 향상시킬 수 있습니다.

1. Svelte for VS Code (공식)​

  • 마켓플레이스: svelte.svelte-vscode
  • GitHub: sveltejs/language-tools
  • 기능:
    • 문법 하이라이팅
    • prettier-plugin-svelte를 통한 코드 포맷팅
    • 자동완성 및 IntelliSense
    • CSS 색상 하이라이팅
    • 오류 검사 및 호버 정보
    • TypeScript 플러그인 번들 포함

2. SvelteKit Snippets​

  • 기능: SvelteKit 개발에 필수적인 코드 스니펫 제공
  • 사용법: kitComp와 같이 "kit" 키워드를 사용한 명령 패턴
  • 포함 내용: 컴포넌트 생성, 로직 블록, 조건문, 엔드포인트, 로드 함수 등

3. Svelte 5 Snippets (kit, runes, superform ...)​

  • 마켓플레이스: thonymg.svelte-5-kit-snippets
  • GitHub: thonymg/svelte-5-kit-snippets
  • 기능: Svelte 5와 SvelteKit 2를 위한 최신 스니펫 컬렉션
  • 사용법:
    • 기본 Svelte: sv 또는 sv- 접두사
    • SvelteKit: sk 또는 sk- 접두사
    • Svelte Runes: sr 또는 sr- 접두사
    • Svelte Stores: ss 또는 ss- 접두사
  • 포함 내용: Runes ($state, $derived, $effect), Superform, TypeScript 지원

4. Awesome Svelte 5 Snippets​

  • 마켓플레이스: j13n.awesome-svelte-snippets
  • 기능: Svelte 5 Runes 지원을 포함한 포괄적인 스니펫 컬렉션
  • 특징: Svelte와 SvelteKit을 위한 awesome 스니펫들 제공
  • 장점: Svelte 5의 최신 기능들을 완벽 지원

5. Path Intellisense​

  • 마켓플레이스: christian-kohler.path-intellisense
  • 기능: 파일 경로 자동완성 및 IntelliSense 제공
  • 장점: SvelteKit에서 에셋 파일 import 시 경로 오류 방지
  • 설정: Svelte 확장과 함께 사용 시 svelte.enable-ts-plugin을 false로 설정 권장

6. Svelte Radar (최신 추가)​

  • 기능: 프로젝트의 라우팅 구조 시각적 개요 제공
  • 출시: 2025년 2월 신규 추가

7. Tailwind CSS IntelliSense​

  • 마켓플레이스: bradlc.vscode-tailwindcss
  • 기능: Tailwind CSS 문법 하이라이팅, 린팅, 자동완성
  • 장점: 문서 참조 없이도 유틸리티 클래스명 지능적 제안

8. GitLens​

  • 마켓플레이스: eamodio.gitlens
  • 기능: Git 변경사항 추적 및 시각화
  • 제공:
    • 커밋 작성자, 날짜, 메시지 표시
    • 커밋 히스토리 관리
    • 직접 Git 작업 수행 가능

9. Better Comments​

  • 마켓플레이스: aaron-bond.better-comments
  • 기능: 시각적으로 구분되는 주석 생성
  • 용도: 질문, 실수, 사실, 할 일 목록 등

10. CodeSnap​

  • 마켓플레이스: adpyke.codesnap
  • 기능: 선택된 코드 블록의 스크린샷 생성 및 저장
  • 장점: 코드 공유 시 편의성 향상

11. Auto Import - ES6, TS, JSX, TSX​

  • 마켓플레이스: steoates.autoimport
  • 기능: TypeScript/JavaScript 파일에서 자동 import 기능
  • 장점: Svelte 컴포넌트와 유틸리티 함수 import 자동화

2.4 첫 번째 Svelte 앱 실행​

개발 서버 시작하기​

생성한 Svelte 프로젝트를 실제로 실행해보겠습니다. 개발 서버는 파일 변경을 감지하고 자동으로 브라우저를 새로고침하는 Hot Module Replacement(HMR) 기능을 제공합니다. 실시간으로 변경사항을 확인하며 빠른 개발 사이클을 경험할 수 있습니다.

# 프로젝트 폴더로 이동
cd my-svelte-app

# 개발 서버 실행 (기본 포트 5173)
npm run dev

# 포트 지정해서 실행
npm run dev -- --port 3000

# 네트워크에 노출하여 실행 (모바일에서 접근 가능)
npm run dev -- --host

# 실행 후 자동으로 브라우저 열기
npm run dev -- --open

실행 결과 확인

> my-svelte-app@0.0.1 dev
> vite dev

  VITE v5.0.0  ready in 543 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/
  ➜  press h to show help

기본 앱 구조 살펴보기​

홈페이지 (src/routes/+page.svelte)​

<script>
  import Counter from '$lib/Counter.svelte';

  let name = $state('Svelte');
</script>

<svelte:head>
  <title>Welcome to SvelteKit</title>
  <meta name="description" content="Svelte demo app" />
</svelte:head>

<section>
  <h1>Welcome to <span class="welcome">SvelteKit</span></h1>

  <h2>
    Try editing <strong>src/routes/+page.svelte</strong>
  </h2>

  <Counter />
</section>

<style>
  .welcome {
    color: #ff3e00;
    text-transform: uppercase;
    font-weight: 100;
  }

  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0.6;
  }

  h1 {
    width: 100%;
  }
</style>

카운터 컴포넌트 (src/lib/Counter.svelte)​

<script>
  let count = $state(0);

  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>
  clicks: {count}
</button>

<style>
  button {
    font-family: inherit;
    font-size: 1.4rem;
    padding: 1rem 2rem;
    color: #ff3e00;
    background-color: rgba(255, 62, 0, 0.1);
    border-radius: 2rem;
    border: 2px solid rgba(255, 62, 0, 0.2);
    outline: none;
    width: 200px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }

  button:focus {
    border: 2px solid #ff3e00;
  }

  button:active {
    background-color: rgba(255, 62, 0, 0.2);
  }
</style>

실습해보기: Svelte REPL에서 이 코드를 직접 실행해보세요!

첫 번째 수정해보기​

1. 제목 변경하기​

src/routes/+page.svelte 파일을 열고 다음과 같이 수정해보세요:

<script>
  import Counter from '$lib/Counter.svelte';

  let name = $state('나의 첫 Svelte 앱');
</script>

<svelte:head>
  <title>{name}</title>
  <meta name="description" content="Svelte 학습 프로젝트" />
</svelte:head>

<section>
  <h1>
    안녕하세요! <span class="welcome">{name}</span>입니다
  </h1>

  <p>실시간으로 변경사항이 반영되는 것을 확인해보세요!</p>

  <Counter />
</section>

2. 새로운 컴포넌트 만들기​

src/lib/Greeting.svelte 파일을 생성하고 다음 코드를 입력하세요:

<script>
  let { name = '사용자' } = $props();
  let currentTime = $state(new Date().toLocaleTimeString());

  // 1초마다 시간 업데이트
  setInterval(() => {
    currentTime = new Date().toLocaleTimeString();
  }, 1000);
</script>

<div class="greeting">
  <h2>안녕하세요, {name}님!</h2>
  <p>현재 시간: <strong>{currentTime}</strong></p>
</div>

<style>
  .greeting {
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    text-align: center;
    margin: 1rem 0;
  }

  h2 {
    margin: 0 0 0.5rem 0;
  }

  p {
    margin: 0;
  }
</style>

3. 메인 페이지에 추가하기​

src/routes/+page.svelte에 새로운 컴포넌트를 추가하세요:

<script>
  import Counter from '$lib/Counter.svelte';
  import Greeting from '$lib/Greeting.svelte';

  let name = $state('나의 첫 Svelte 앱');
</script>

<svelte:head>
  <title>{name}</title>
  <meta name="description" content="Svelte 학습 프로젝트" />
</svelte:head>

<section>
  <h1>
    안녕하세요! <span class="welcome">{name}</span>입니다
  </h1>

  <Greeting name="개발자" />

  <Counter />
</section>

HMR (Hot Module Replacement) 체험하기​

파일을 저장하는 즉시 브라우저가 자동으로 업데이트되는 것을 확인해보세요:

  1. CSS 변경: 색상이나 크기를 변경하면 즉시 반영됩니다
  2. JavaScript 로직 변경: 함수나 상태를 수정해도 페이지 새로고침 없이 적용됩니다
  3. 컴포넌트 추가/제거: 새로운 컴포넌트도 바로 확인 가능합니다

프로덕션 빌드 테스트​

# 프로덕션용 빌드 생성
npm run build

# 빌드 결과물 미리보기
npm run preview

빌드 결과 분석

✓ building client (vite)
✓ building server (vite)

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto

  ✔ done

Build output:
├─ client: 45.2 kB
├─ server: 12.8 kB
└─ total: 58.0 kB

기본 명령어 정리​

명령어기능사용 시기
npm run dev개발 서버 실행개발 중
npm run build프로덕션 빌드배포 전
npm run preview빌드 미리보기배포 테스트
npm run lint코드 품질 검사코드 정리
npm run format코드 포맷팅코드 정리
npm run test테스트 실행테스트 시

정리​

개발 환경 설정이 완료되었습니다! 이제 다음과 같은 도구들이 준비되었습니다:

핵심 요약

  • Node.js 22 LTS: 최신 기능과 장기 지원 보장
  • SvelteKit: 풀스택 웹 앱 개발 도구
  • VS Code + 확장 프로그램: 최적화된 개발 환경
  • 필수 VS Code 확장: Svelte 공식 확장 및 생산성 도구들

다음 단계: 3장 "Svelte 컴포넌트 기초"에서는 Svelte의 핵심인 컴포넌트 구조와 기본 문법을 자세히 알아보겠습니다. 실제 개발에 필요한 모든 기초를 탄탄히 다져보겠습니다!