[sveltekit] sveltekit typescript로 생성하기

SvelteKit이란?

SvelteKit은 svelte 프레임워크를 기반으로 한 현대적인 웹 애플리케이션 프레임워크입니다.

 

svelte의 장점인 반응성을 유지하면서도 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등의 기능을 통합하여 개발자에게 보다 강력하고 유연한 도구를 제공합니다.

 

이번에 개인 프로젝트를 진행하면서 Frontend 프레임 워크로 선정하여 프로젝트를 진행하며 공부한 내용을 기록하려고 합니다.

---

sveltekit create

sveltekit을 생성하는 방법을 공식문서에서 참고하였습니다.

https://svelte.dev/docs/svelte/getting-started

Getting started • Docs • Svelte

 

프로젝트 생성 명령은 아래와 같습니다.

npm create vite@latest [프로젝트 폴더명]

저는 프로젝트 명이 bridge이므로 bridge_web이라고 작성하였습니다.

다양한 프레임워크가 나오지만 저는 SvelteKit을 사용할 것이기에 Svelte를 선택하였습니다.

 

Svelte를 선택하면 Svelte를 TypeScript로 생성할 것인지, JavaScript로 생성할 것인지, Sveltekit을 생성할 것인지 물어봅니다.

당연히 Sveltekit을 선택해 줍니다.

 

SvelteKit을 선택하면 어떤 템플릿을 사용할 것인지 나오는데 저는 가장 베이스가 되는 minimal을 선택하였습니다.

그 후 JavaScript를 사용할 것인지 TypeScript를 사용할 것인지 물어보기에 전 TypeScript를 선택하였습니다.

 

Preconditions failed가 출력된다면 continue를 하기 위해 yes를 선택하고 package manager는 npm을 선택했습니다.

 

typescript로 잘 생성된 것을 확인할 수 있습니다.

 

설치 후 프로젝트 폴더로 이동하여 npm install 후 npm run dev를 하면 프로젝트를 열어볼 수 있습니다.

http://localhost:5173/로 접속하면 확인할 수 있습니다.

---

실행 오류

npm install을 하는 과정에서 아래와 같은 오류가 나온다면 node 버전을 확인하여 요구되는 버전으로 맞추어줍니다.

 

저는 아래의 명령어로 node를 18.18.0 버전으로 맞추었습니다.

nvm install 18.18.0

nvm use 18.18.0