스벨트킷(SvelteKit) 프로젝트 시작하기 - 02

스벨트킷(SvelteKit)을 사용해 애플리케이션을 처음부터 만드는 과정을 알아보겠습니다. 이 과정에서는 개발 환경을 설정하는 방법부터 기본적인 애플리케이션을 실행하고 수정하는 방법까지 다룹니다.

1. 개발 환경 설정하기

스벨트킷을 사용하기 위해선 두 가지가 필요합니다:

1. Node.js 설치
2. 개발툴(IDE) 선택

1.1 Node.js 설치

Node.js는 스벨트킷을 실행하는 데 필수적입니다. Node.js를 설치하려면 nodejs.org로 가서 최신 안정 버전을 다운로드하고 설치하세요.
이미 설치되어 있다면 최신 버전으로 업데이트하는 것이 좋습니다.

1.2 개발툴(IDE) 선택

텍스트 에디터로는 VS Code를 추천합니다. code.visualstudio.com에서 VS Code를 다운로드하고 설치하세요.

2. 프로젝트 폴더 생성하기

개발을 시작하기 위해서 먼저 폴더를 하나 만드세요. 여기서는 "sveltekit"이라는 폴더를 만들고 VS Code에서 해당 폴더를 열었습니다. 이 폴더가 앞으로 애플리케이션 개발을 위한 작업 공간이 됩니다.

3. 스벨트킷 프로젝트 생성

스벨트킷 프로젝트를 생성하기 위해선 단 한 줄의 명령어만 필요합니다. VS Code의 터미널을 열고 다음 명령어를 실행하세요.

npm create svelte@latest hello-world

여기서 "hello-world"는 프로젝트의 이름입니다. 명령어를 실행하면 몇 가지 질문이 나옵니다.

엔터를 치면 설치가 시작됩니다.

3.1 템플릿 선택

첫 번째로 선택해야 할 템플릿은 세 가지가 있습니다:

• 스벨트킷 데모 앱: 스벨트킷의 기능을 보여주는 간단한 게임 앱.
• 스켈레톤 프로젝트: 기본적인 스벨트킷 앱을 위한 최소한의 구조.
• 라이브러리 스켈레톤 프로젝트: 스벨트 라이브러리를 위한 최소한의 구조.

여기서 우리는 스켈레톤 프로젝트를 선택합니다.

3.2 타입스크립트 추가 여부

두 번째로 타입스크립트를 사용할지 물어봅니다. 여기서는 No를 선택해 자바스크립트로 진행하겠습니다. 타입스크립트를 모르는 분들도 쉽게 따라할 수 있도록 하려는 목적입니다.

3.3 ESLint와 Prettier 설정

다음으로는 코드 린팅을 위한 ESLint와 코드 포맷팅을 위한 Prettier를 추가할지를 묻습니다. 둘 다 Yes를 선택하는 것이 좋습니다.

3.4 브라우저 테스트 도구와 유닛 테스트

Playwright나 Vitest 같은 테스트 도구를 추가할지를 묻는 질문도 나옵니다. 여기서는 둘 다 No를 선택하여 넘어갑니다.

4. 프로젝트 실행

이제 스벨트킷 프로젝트가 생성되었습니다. 생성된 "hello-world" 폴더로 이동하여 다음 명령어들을 실행해 프로젝트를 실행할 수 있습니다.

cd hello-world 
npm install 
npm run dev -- --open

 

이 명령어는 프로젝트 폴더로 이동한 뒤 필요한 종속성을 설치하고, 개발 서버를 실행하여 브라우저에서 애플리케이션을 확인할 수 있게 해줍니다.

5. 프로젝트 수정하기

애플리케이션이 성공적으로 실행되면 브라우저에서 기본적으로 "Welcome to SvelteKit"이라는 문구가 나타날 것입니다. 이를 수정해봅시다.

5.1 기본 파일 수정

VS Code에서 src/routes/+page.svelte 파일을 찾아 "Welcome to SvelteKit"을 "Hello SvelteKit "로 변경하세요. 파일을 저장하면 브라우저가 자동으로 업데이트되며, 새로운 텍스트가 표시될 것입니다.

6. 다음 단계

이제 스벨트킷 애플리케이션이 성공적으로 실행되었습니다. 이 과정에서 프로젝트 생성, 수정 및 실행 방법을 배웠습니다. 다음 단계에서는 생성된 프로젝트의 폴더 구조에 대해 더 깊이 알아보겠습니다.

스벨트킷을 사용해 애플리케이션을 개발하는 것은 매우 간단하고 빠릅니다. 앞으로 다양한 기능을 추가하고 확장하는 방법을 배워 나가면서 더욱 완성도 높은 애플리케이션을 만들어 나가도록 합시다!

결론

스벨트킷을 처음 접하는 분들을 위한 기본적인 프로젝트 설정 방법을 알아보았습니다. 이 과정을 통해 Node.js와 VS Code를 설치하고, 스벨트킷 애플리케이션을 생성하고 실행하는 방법을 학습했습니다. 이제 기본 설정을 마쳤으니, 차근차근 프로젝트를 확장해 나갈 수 있을 것입니다.