개발 환경 만들고 첫 화면 띄우기

먼저 필요한 도구 확인하기

Svelte 코드를 작성하려면 먼저 몇 가지 기본 도구가 필요하다. 복잡한 프로그램을 많이 설치하는 것은 아니다. 핵심은 세 가지다.

• Node.js: 브라우저 밖에서 JavaScript를 실행하게 해 주는 도구

• npm: Svelte와 관련 라이브러리를 내려받고 실행 명령을 관리하는 도구

• VS Code: 코드를 편하게 작성하기 위한 편집기

Node.js를 설치하면 보통 npm도 함께 설치된다. 처음 설치한다면 Node.js 공식 사이트에서 LTS 버전을 고르면 된다. LTS는 Long Term Support의 줄임말로, 오래 안정적으로 지원되는 버전이라는 뜻이다.

설치가 끝났다면 터미널에서 다음 명령을 실행해 보자.

node -v
npm -v

각각 버전 번호가 보이면 준비가 된 것이다. 예를 들어 v로 시작하는 Node 버전이 나오고, 그 아래 npm 버전이 나오면 정상이다. 만약 명령을 찾을 수 없다는 메시지가 나온다면 터미널을 새로 열거나 Node.js 설치가 제대로 되었는지 다시 확인해야 한다.

VS Code를 사용한다면 확장 프로그램에서 Svelte for VS Code를 설치하자. .svelte 파일의 문법 강조, 자동 완성, 오류 표시를 도와준다. Prettier나 ESLint 같은 도구도 유용하지만, 처음에는 필수로 이해할 필요는 없다. 코드를 쓰고 화면이 바뀌는 흐름을 먼저 익히는 것이 더 중요하다.

AI 생성 이미지

새 Svelte 프로젝트 만들기

이 책에서는 SvelteKit으로 프로젝트를 시작한다. SvelteKit은 Svelte로 실제 앱을 만들 때 필요한 라우팅, 데이터 로딩, 서버 기능, 배포 구조를 함께 제공하는 공식 앱 프레임워크다. 다만 이번 장에서는 그중 대부분을 잠시 미뤄 둔다. 지금 목표는 "프로젝트를 만들고 첫 화면을 수정하는 것"이다.

빈 폴더에서 터미널을 열고 다음 명령을 실행하자.

npx sv create my-svelte-app

npx는 npm 패키지를 임시로 내려받아 실행할 때 쓰는 명령이다. 여기서는 sv라는 Svelte CLI를 실행해 새 프로젝트를 만든다. 공식 문서의 기본 생성 흐름도 npx sv create로 시작한 뒤 프로젝트 폴더로 이동하고 개발 서버를 실행하는 방식이다.¹

명령을 실행하면 몇 가지 선택지가 나온다. 처음에는 다음처럼 고르면 충분하다.

• 템플릿: SvelteKit minimal 또는 가장 단순한 SvelteKit 템플릿

• 타입 검사: 아직 TypeScript가 익숙하지 않다면 JavaScript/JSDoc 쪽을 고르거나 타입 검사를 추가하지 않아도 됨

• 추가 도구: 처음에는 필요한 것만 선택하거나 기본값 유지

• 패키지 매니저: npm

선택지가 조금 달라도 당황하지 않아도 된다. CLI는 버전에 따라 문구가 조금 바뀔 수 있다. 중요한 것은 "SvelteKit 프로젝트를 만들고 npm으로 실행한다"는 흐름이다.

프로젝트 생성이 끝나면 새 폴더로 이동한다.

cd my-svelte-app

프로젝트를 만들 때 npm으로 의존성 설치까지 진행했다면 바로 개발 서버를 실행할 수 있다. 설치를 건너뛰었거나 확실하지 않다면 다음 명령을 실행한다.

npm install

이 명령은 package.json에 적힌 라이브러리 목록을 보고 필요한 파일을 내려받는다. 설치가 끝나면 개발 서버를 실행한다.

npm run dev

터미널에 http://localhost:5173 같은 주소가 보이면 브라우저에서 열어 보자. 직접 주소를 입력해도 되고, 다음처럼 실행해서 자동으로 브라우저를 열 수도 있다.

npm run dev -- --open

여기서 npm run dev는 프로젝트의 개발 서버를 켜는 명령이다. 뒤의 -- --open은 개발 서버에 "브라우저도 같이 열어 달라"고 전달하는 옵션이다.

개발 서버를 끄고 싶다면 터미널에서 Ctrl + C를 누르면 된다.

첫 화면은 어디서 바꿀까

프로젝트가 실행되면 이제 가장 중요한 질문이 생긴다.

"어떤 파일을 고치면 브라우저 화면이 바뀔까?"

SvelteKit 프로젝트에서 첫 화면, 즉 / 주소에 보이는 페이지는 보통 다음 파일이다.

src/routes/+page.svelte

이 파일을 열고 내용을 간단히 바꿔 보자.

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

<h1>안녕하세요, Svelte!</h1>
<p>버튼을 누른 횟수: {count}</p>

<button onclick={() => count += 1}>
  클릭
</button>

<style>
  h1 {
    color: royalblue;
  }

  button {
    padding: 0.6rem 1rem;
    border: 0;
    border-radius: 8px;
    background: royalblue;
    color: white;
    cursor: pointer;
  }
</style>

파일을 저장하면 브라우저 화면이 곧바로 바뀐다. 버튼을 누르면 숫자도 올라간다. 여기서 이미 Svelte의 중요한 흐름을 경험했다.

• <script>에는 상태와 JavaScript 코드를 쓴다.

• HTML처럼 보이는 영역에는 화면에 보여 줄 구조를 쓴다.

• <style>에는 이 컴포넌트에 적용할 CSS를 쓴다.

• $state(0)으로 만든 값이 바뀌면 {count}가 표시된 화면도 함께 갱신된다.

아직 $state를 깊게 이해하지 않아도 괜찮다. 지금은 "값을 바꾸면 화면도 바뀐다"는 감각만 잡으면 된다. 반응성은 뒤에서 한 장을 따로 써서 자세히 다룬다.

프로젝트 폴더 구조 살펴보기

처음 만든 SvelteKit 프로젝트에는 여러 파일과 폴더가 있다. 모두 한 번에 외울 필요는 없다. 지금은 자주 보게 될 것만 알면 된다.

my-svelte-app/
├─ src/
│  ├─ routes/
│  │  └─ +page.svelte
│  └─ lib/
├─ static/
├─ package.json
├─ svelte.config.js
└─ vite.config.js

프로젝트 생성 때 고른 옵션에 따라 vite.config.ts처럼 .js 대신 .ts 파일이 보일 수도 있다. 파일 이름이 조금 달라도 역할은 비슷하니 걱정하지 않아도 된다. 공식 문서에서도 src, src/routes, src/lib, static을 SvelteKit 프로젝트의 주요 구조로 설명한다.² 각각의 역할은 다음과 같다.

src

프로젝트의 실제 코드가 들어가는 중심 폴더다. 앞으로 우리가 작성하는 Svelte 컴포넌트, 페이지, 유틸리티 코드 대부분은 src 안에 들어간다.

src/routes

페이지와 주소를 담당한다. SvelteKit은 폴더 구조를 보고 URL을 만든다. 예를 들어 다음 파일을 만들면:

src/routes/about/+page.svelte

브라우저에서는 보통 다음 주소로 접근한다.

/about

지금 당장은 src/routes/+page.svelte가 첫 화면이라는 것만 기억하자. 라우팅은 뒤에서 본격적으로 다룬다.

src/lib

여러 곳에서 재사용할 코드를 넣는 폴더다. 예를 들어 상품 카드 컴포넌트, 버튼 컴포넌트, 가격 계산 함수처럼 여러 페이지에서 함께 쓸 수 있는 코드를 여기에 둘 수 있다.

나중에는 다음처럼 $lib라는 별칭으로 가져올 수 있다.

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

처음부터 src/lib를 꼭 써야 하는 것은 아니다. 같은 코드가 여러 곳에서 필요해질 때 옮겨도 늦지 않다.

static

이미지, 아이콘, robots.txt처럼 그대로 제공할 정적 파일을 넣는 폴더다. 예를 들어 static/logo.png를 넣으면 브라우저에서는 /logo.png처럼 접근할 수 있다.

컴포넌트 코드 안에서 import해서 처리할 파일과, 주소로 바로 제공할 파일은 성격이 다르다. 처음에는 "바뀌지 않는 공개 파일은 static" 정도로 이해하면 된다.

package.json

프로젝트의 이름, 사용 중인 라이브러리, 실행 명령이 적힌 파일이다. npm run dev가 동작하는 이유도 이 파일 안에 dev 스크립트가 있기 때문이다.

대략 이런 형태를 볼 수 있다.

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  }
}

여기서 Vite는 개발 서버와 빌드 도구 역할을 한다. SvelteKit 프로젝트를 실행하면 내부적으로 Vite 개발 서버가 켜지고, 파일 변경을 감지해 브라우저에 빠르게 반영한다.

저장하면 왜 바로 바뀔까

예전 방식으로 웹 페이지를 만들 때는 파일을 저장한 뒤 브라우저를 새로고침해야 했다. 큰 프로젝트에서는 빌드 명령을 다시 실행해야 하는 경우도 있었다.

SvelteKit 개발 서버는 이 반복을 줄여 준다. npm run dev로 서버를 켜 두면 Vite가 프로젝트 파일을 지켜본다. +page.svelte를 저장하면 변경된 부분을 다시 처리하고 브라우저에 알려 준다. 그래서 개발자는 다음 흐름으로 작업할 수 있다.

1. .svelte 파일을 수정한다.

2. 저장한다.

3. 브라우저에서 결과를 확인한다.

4. 다시 수정한다.

이 빠른 반복이 개발 서버의 핵심이다. 배포된 실제 사이트가 매번 이렇게 동작한다는 뜻은 아니다. 개발 중에만 파일 변경을 빠르게 확인하도록 도와주는 기능이다.

App.svelte와 +page.svelte의 차이

Svelte 자료를 찾다 보면 src/App.svelte를 수정하라는 설명도 자주 볼 수 있다. 틀린 설명은 아니다. Svelte만 Vite로 시작한 프로젝트에서는 App.svelte가 앱의 시작 컴포넌트인 경우가 많다.

하지만 이 책은 SvelteKit을 기준으로 진행한다. 그래서 첫 화면을 수정할 때는 주로 다음 파일을 고친다.

src/routes/+page.svelte

둘 다 Svelte 컴포넌트라는 점은 같다. 차이는 앱을 구성하는 방식이다.

• Svelte 단독 프로젝트: 보통 App.svelte에서 시작

• SvelteKit 프로젝트: src/routes 안의 파일이 페이지가 됨

Svelte 공식 시작 문서도 실제 앱을 만들 때 SvelteKit을 출발점으로 안내한다. 다만 처음부터 SvelteKit의 모든 기능을 배울 필요는 없다.³

지금은 서버 기능을 몰라도 된다

SvelteKit이라는 이름 때문에 처음부터 서버, 라우팅, 데이터 로딩, 배포까지 모두 알아야 할 것처럼 느껴질 수 있다. 하지만 학습 순서를 나누면 훨씬 쉽다.

지금은 다음 세 가지만 익히면 충분하다.

• 프로젝트는 npx sv create로 만든다.

• 개발 중에는 npm run dev로 실행한다.

• 첫 화면은 src/routes/+page.svelte에서 수정한다.

서버 기능, API, 인증, 배포는 뒤에서 필요해지는 순간에 다룬다. 먼저 작은 화면을 만들고, 그 화면을 컴포넌트로 나누고, 상태를 바꾸며 동작하게 만드는 것이 순서다.

이번 장에서 만든 프로젝트는 앞으로 계속 사용할 수 있는 실습 공간이다. 다음 장에서는 .svelte 파일 하나가 어떤 구조로 이루어지는지 더 자세히 살펴본다.

참고

¹Creating a project • SvelteKit Docs

²Project structure • SvelteKit Docs

³Getting started • Svelte Docs