SvelteKit에서 설정하기

작성자: Mike Neumegen

SvelteKit용 Git 기반 CMS인 CloudCannon에서 제공했습니다.

튜토리얼 시리즈의 나머지 부분에서 SvelteKit을 설정하고 설치하는 방법을 알아보세요.

이 시리즈에서는 웹 프레임워크SvelteKit 학습의 기본 사항을 살펴봅니다. SvelteKit을 설치하고 몇 개의 페이지와 블로그를 만들고 마지막으로 데이터 파일을 살펴보겠습니다. 우리가 하는 모든 일은 처음부터 만들어질 것이므로 이전 Svelte 또는 SvelteKit 지식이 필요하지 않습니다. 기본 HTML, CSS 및 JavaScript만 있으면 됩니다. 이 시리즈를 통해 자신만의 SvelteKit 프로젝트를 구축할 수 있는 기술과 지식을 갖게 될 것입니다.

시작하자!

SvelteKit이란 무엇입니까?

기본부터 시작하겠습니다. Svelte는 무엇입니까? Svelte는 고도로 최적화된 바닐라 JavaScript를 생성하는 데 뛰어난 프런트 엔드 컴파일러입니다. React 및 Vue와 같은 다른 JavaScript 프레임워크와 달리 Svelte에는 Svelte 코드를 바닐라 JavaScript로 변환하는 컴파일 단계가 있습니다.

반면에 SvelteKit은 Svelte로 구동되는 웹 프레임워크입니다. 전체 웹 페이지 또는 앱을 만들기 위한 라우팅, 레이아웃 및 콘텐츠 가져오기와 같은 Svelte의 프런트 엔드 렌더링에 대한 도구를 제공합니다.

SvelteKit은 단순한 정보 제공 웹사이트에서 완전한 웹 앱에 이르기까지 광범위한 애플리케이션을 처리할 수 있습니다. 이 튜토리얼에서는 블로그가 있는 정보 제공 웹사이트를 만들고 SvelteKit을 정적 사이트 생성기로 취급하여 스펙트럼의 단순한 측면에 초점을 맞출 것입니다.

SvelteKit 설치

SvelteKit은 npm을 사용하여 설치됩니다. npm이 설치되어 있지 않으면 have a look at their installation guide .

npm이 설치된 상태에서 터미널에서 단일 명령을 실행하여 첫 번째 SvelteKit 애플리케이션을 설정할 수 있습니다.

    npm init svelte my-first-svelte-app

<
그러면 앱 템플릿을 선택하라는 메시지가 표시됩니다. "스켈레톤 프로젝트"를 사용합시다.



나머지 질문에는 '아니오'로 답하십시오.

Svelte는 첫 번째 Svelte 앱의 스켈레톤 코드를 설정했습니다. 한 번 보자. 먼저 cd 디렉토리에:

    cd my-first-svelte-app/

스켈레톤 코드에 필요한 npm 패키지(Svelte + SvelteKit)를 설치합니다.

    npm install

마지막으로 SvelteKit 서버를 실행합니다.

    npm run dev

브라우저를 열고 http://localhost:3000/으로 이동하면 SvelteKit에 오신 것을 환영하는 기본 페이지가 표시됩니다. 축하해요! 이제 SvelteKit이 설치되었습니다.

정적 실행

기본적으로 SvelteKit은 페이지 렌더링에 자동 어댑터를 사용합니다. 이 어댑터는 가능한 경우 사전 렌더링하고 동적 콘텐츠에 대한 에지 기능으로 폴백합니다. 이 자습서를 간단하게 유지하기 위해 모든 페이지에 대해 정적 HTML을 렌더링하는 정적 어댑터로 전환합니다.

먼저 정적 어댑터를 설치해야 합니다.

    npm i -D @sveltejs/adapter-static@next

그런 다음 SvelteKit을 사용하도록 구성합니다. 열기svelte.config.js 및 교체:

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

와 함께:

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

디렉토리 개요

Skeleton 프로젝트에 있는 모든 파일이 무엇인지 궁금할 것입니다. 다음은 그들이 하는 일에 대한 간략한 개요입니다. 이 튜토리얼 전체에서 대부분을 사용할 것이므로 지금 이해가 되지 않더라도 걱정하지 마십시오.

.svelte-kit — SvelteKit이 빌드 중에 생성된 파일을 추가하는 기본 위치입니다.

src — SvelteKit 사이트의 소스 파일인 이 디렉토리를 주로 다룹니다.

src/app.html — HTML 응답의 기본 템플릿입니다. 다른 모든 HTML 레이아웃은 이 레이아웃에서 확장됩니다.

src/routes — SvelteKit은 이 디렉토리의 파일을 기반으로 사이트에 페이지를 만듭니다.

static — SvelteKit이 필요하지 않은 자산입니다. 이미지, 글꼴, PDF 등

package.json - 사이트 실행을 위한 npm 종속성 및 명령을 나열합니다.

svelte.config.js - Svelte에 대한 구성 설정입니다.

무엇 향후 계획?

다음 강의에서는 첫 번째 페이지를 만들고 레이아웃을 설정합니다.