[sveltekit] 1. sveltekit 프로젝트 시작하기

sveltekit

 

1. 서론.

svelte라는 ui 프레임워크를 기반으로한 sveltekit이라는 프레임워크를 사용해서 간단한 TODO-LIST를 만들어보려고합니다.

 

https://svelte.dev/docs/kit/introduction

Introduction • Docs • Svelte

 

공식 사이트에서 말하는 내용으로는 NEXT와 비슷하다고 하는데 그쪽은 제가 해본적이 없어서 뭐라고 못하겠네요 비슷한 자바스크립트 혹은 타입스크립트를 사용하며 폴더 시스템을 이용한 라우팅 개념이 독특한 프레임워크입니다.

공식 사이트의 설명이 조금 부족한 느낌이긴 하지만 사용이 편하기에 작은 프로젝트에서 해당 스벨트킷 프레임워크를 사용해서 개발을 해도 좋다고 생각됩니다.

기본적으로 스크립트 프레임워크이기 때문에 방대한 npm라이브러를 대부분 사용할수 있다는것이 장점이고 프레임워크 구조가 간단하기에 초반에 컨셉만 잘 잡는다면 짧게짧게 치고 갈 수 있는 좋은 프레임워크라고 생각합니다.

 

2. 본론.

2.1. sveltekit 시작

NPM이 기본적으로 모두 설치가 되어있다는 가정하에 처음 시작 하는 방법은 다음과 같습니다.

공식 사이트에서 제공하는 방법으로

npx sv create my-app
cd my-app
npm install
npm run dev

 

위 스크립트를 작업하고자하는 위치에서 터미널을 실행시켜 순서대로 작동시키기만 하면됩니다.

 

저는 기본적으로 windows 11 환경이며 아래와 같이 일반적으로 작업을 하기 위해 c드라이브 밑에 project라는 폴더를 만들어서 작업을 합니다.

 

저는 project 폴더에 sveltekit이라는 폴더를 만들고 해당 폴더에서 vscode로 접속해서 터미널을 열겁니다.

 

작업 위치에서 vscode 실행

작업 폴더에서 우측 마우스 클릭 후 vscode를 실행시킵니다.

혹은 그냥 vscode에서 해당 폴더 열기를 하면됩니다.

 

 

 

해당 위치에 vscode가 열리게됬을 때 저와 같이 vscode 제일 하단에 터미널 창이 없을 경우 상단 메뉴 바에서 터미널 영역에서 [새 터미널]을 실행시킵니다.

 

추가로 하단에 터미널이 뜬 후 우측 하단 터미널이 powerShell로 되어있을 경우 그 좌측 [+] 버튼의 오른쪽 아래방향 표시의 버튼을 누르고 Command Prompt를 선택해줍니다.

 

 

그리고 예시 sveltekit에서 제공하는 기본 명령어를 사용해서 프로젝트를 생성합니다.

 

npx sv create my-app

 

여기서에서 npx sv create [my-app] 에서 my-app 부분은 프로젝트 이름을 뜻 합니다.

저는 기본 프로젝트 명 그대로 생성을 할겁니다.

 

 

설치 프로세스를 시작하냐는 동의로 y를 입력합니다.

 

 

sveltekit에 대한 스켈레톤 소스를 받을 것인지, 데모를 받을것인지 svelte 라이브러리를 받을 것에 선택문입니다.

방향키 위아래로 움직이고 엔터를 누르면 선택이 됩니다.

저는 데모를 받지 않고 스켈레톤 소스를 받아 해당 소스를 기반으로 제가 원하는 대로 수정을 할 것이기에 minimal을 선택합니다.

 

 

타입스크립트와 자바스크립트 중 어느것을 사용하고 체크 방식을 사용할 건지에 대한 선택입니다.

저는 타입스크립트를 선택할 것이기에 첫번째 항목을 선택합니다.

 

 

두번째로 프로젝트에 추가할 라이브러를 선택할 수 있습니다.

prettier, eslint는 문법 체크를 위해 사용을 체크합니다.

스페이스바로 체크하고 엔터로 다음 단계로 넘어갈 수 있습니다.

 

 

마지막으로 패키지 메니저를 선택합니다.

저는 npm을 사용하고 있기때문에 선택합니다.

 

 

약간의 시간이 지나면 다음과 같이 svltekit에 대한 기본 프로젝트가 설치된것을 확인할 수 있습니다.

 

이제 실행까지 시켜보겠습니다.

 

현재 터미널의 위치는 C:\project\sveltekit 이기 때문에 생성한 프로젝트로 터미널을 이동시킵니다.

 

 

다음과 같이 

 

cd my-app

 

명령어를 사용해 프로젝트 내부로 이동합니다.

 

이제 프로젝트 실행에 필요한 패키지를 설치하기 위해 다음과 같이 인스톨 명령어를 사용합니다.

 

 

npm 명령어를 사용해 설치를 완료합니다.

npm install

 

 

install 명령어가 완료된 후 실행 명령어를 실행시킵니다.

 

npm run dev

 

 

해당 단계 까지 왔다면 다음과 같이 터미널창에 링크가 생성되며 컨트롤+마우스 클릭을 하면 브라우저로 해당 링크 따라가기가 됩니다.

 

 

해당 링크를 실행 시키면 다음과 같이 흰 화면에 다음과 같은 내용이 출력됩니다.

이제 svletekit을 사용하기 위한 프로젝트 준비가 완료되었습니다.

 

 

해당 출력 내용은 스벨트킷 소스의 [my-app\src\routes\+page.svelte] 경로에서 확인할 수 있습니다.

 

스벨트킷은 기본적으로 src 폴더의 routes 폴더에서 화면에 출력되는 모든 화면을 확인할 수 있으며 파일의 확장자는 .svelte이며 모든 폴더당 +page.svelte는 하나만 존재할 수 있으며 해당 파일은 index 파일의 기능을 합니다.

 

3. 추후 작업 내용

이제 sveletkit에 대한 기본 프로젝트를 생성했으니 프로젝트를 돌릴때 필요한 기본 설정을 하려고합니다.

저는 docker에 프로젝트를 올려서 개발을 주로 하므로 해당 sveltkit에 대한 docker 설정 등에 대한 내용을 이어서 설정하도록 하겠습니다.