SvelteKit로 당신의 첫 번째 날씬한 앱을 만듭니다

Svelte는 웹 응용 프로그램을 구축하는 데 사용되는 경량급 프레임워크입니다.그것을 사용할 때, 그 외관과 느낌은 다른 전단 프레임 (예: React, Vue) 과 매우 비슷하지만, 가상 DOM을 잊어버린다.이것은 다른 최적화 조치와 함께 브라우저에서 하는 일이 훨씬 적고 사용자 체험과 불러오는 시간을 최적화시켰다는 것을 의미한다.
이 설명서에서는 SvelteKit를 사용하여 첫 번째 Svelte 응용 프로그램을 설정하는 방법에 대해 설명합니다.Svelte는 여러 가지 신청 방식이 있는데 SvelteKit는 Svelte의 공식 소프트웨어 패키지 중의 하나이다.만약 다른 프레임워크에 관심이 있다면, 저희가 making your first Vue application 에서 제공한 유사한 안내서를 좋아할 수도 있습니다.

첫 번째 날씬한 응용 프로그램 만들기
우선 새 터미널 창을 열고 날씬한 프로그램을 시작하려면 아래 명령을 사용하십시오.참고: 설치되지 않은 경우npm 설치가 필요합니다.노드를 설치하여 설치할 수 있습니다npm.JSvia the link here.
노드가 생기면JS 및 NPM을 설치한 후 다음 명령을 실행합니다.그러나 이 작업을 수행하기 전에 cd를 사용하여 새 슬림한 응용 프로그램을 만들 폴더로 이동해야 합니다.

npm init svelte@next my-svelte-app

이 명령을 실행하면 내 슬림한 응용 프로그램이라는 폴더에 슬림한 템플릿이 자동으로 생성됩니다.Svelte는 다양한 선택을 안내합니다.당신의 선호를 선택하세요.다음 그림은 내가 선택한 것 중 하나를 보여 준다.이 설명서에서는 뼈대 항목을 사용합니다.

마지막으로 다음 명령을 실행하여 svelte 디렉토리에 cd를 넣습니다.

cd my-svelte-app

그런 다음 다음 다음 다음 행을 사용하여 모든 종속성을 설치합니다.

npm i

세밀한 파일 구조
다른 프레임에 익숙해지면 Svelte가 익숙해집니다.다음은 방금 완료한 프로젝트의 Svelte 파일 구조에 대한 개요입니다.

static                 <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png         <-- our favicon
tests                  <-- a folder to store our tests
|- test.js             <-- an example test using @playwright
src                    <-- our main Svelte app files
|- routes              <-- a folder to store all of our routes in
|-- index.svelte       <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts            <-- our core Svelte app file
|- app.html            <-- our main index file where the app will appear
.gitignore             <-- files we wish to ignore for git
.npmrc                 <-- config file for npm
.prettierrc            <-- config file for prettier
.eslintrc.cjs          <-- config file for eslint
package.json           <-- our NPM installed packages
playwright.config.js   <-- config file for playwright
svelte.config.js       <-- config file for svelte itself
tsconfig.json          <-- config file for typescript

우리의 기본적인 날씬한 응용 프로그램은 이미 준비가 다 되었다.모양을 보려면 로컬 컴퓨터의 URLhttp://localhost:3000에서 Svelte 응용 프로그램 폴더에서 다음 명령을 실행하여 사용할 수 있습니다.

npm run dev

브라우저http://localhost:3000에 액세스하면 다음과 같은 내용이 표시됩니다.


Svelte에서 새 페이지 또는 경로 만들기
Sveltekit에서 새 루트를 만들려면routes 폴더에 새 파일을 만듭니다.예를 들어,about이라는 파일을 만들었다면.날씬한 다음에 http://localhost:3000/about에 나타난다.다른 방법은about이라는 새 폴더를 만들고 색인을 놓는 것입니다.그 폴더의 날씬함http://localhost:3000/about은 사용할 수 있다.

너 혼자 해봐.
/src/routes 폴더에about이라는 새 페이지를 만듭니다.날씬했어이제 http://localhost:3000/로 이동하면 페이지에 액세스할 수 있습니다.유사하게, index라는 파일을 포함하는 about이라는 폴더를 만들 수 있습니다.날씬하다

노드에서 SvelteKit 응용 프로그램을 실행하는 방법JS
서버나 로컬 노드에서 날씬한 프로그램을 실행합니다.JS 서버, 어댑터를 사용해야 합니다.노드 서버에서 Svelte 프로그램을 실행하려면 @sveltejs/adapter를 설치하십시오 -node@next다음 회선을 통과합니다.

npm i @sveltejs/adapter-node@next 

지금 우리는 svelte.config.js 파일을 변경해야 한다.새 어댑터를 사용하고 설정 파일에서 대상을 변경해야 합니다.다음 코드로 kit.adapter의 내용을 바꿀 수 있지만 어댑터 가져오기 두 줄만 변경하고 구성에 구축 디렉토리를 추가합니다.

// We have changed the adapter line to use adapter-node@next
import adapter from '@sveltejs/adapter-node@next';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // We have changed this to point to a build directory
        adapter: adapter({ out: 'build' })
    }
};

export default config;

추가 SvelteKit 어댑터
Cloudflare, Netlify, Vercel에서 날씬한 프로그램을 실행하려면, 이 어댑터 중 하나를 사용해야 합니다. 아무런 조작도 하지 않아도 됩니다.기본적으로 이것들은 모두 adapter auto에 포함되어 있기 때문에 날씬함만 바꾸면 됩니다.배치하다.노드를 사용하지 않으려면 js 파일을 사용하십시오.JS 서버.

생산용 SvelteKit 응용 프로그램을 구축하는 방법
현재 우리는 응용 프로그램을 구축하기 위해 어댑터를 설정했다.SvelteKit에서는 응용 프로그램이 생산 환경에서 실행될 준비를 하기 쉽다.다음 명령만 실행하면 라는 새 폴더가 생성됩니다.날씬한 공구 꾸러미에 생산에 사용할 수 있는 모든 서류가 들어 있다.

npm run build

이제 제품 구성을 미리 보려면 다음 명령을 실행하십시오.

npm run preview

노드에서 프로그램을 실행하면JS 서버는 이전 섹션과 같이 어댑터를 업데이트하고 Svelte 디렉토리에서 다음 명령을 실행하여 로컬에서 새 Svelte 응용 프로그램을 실행할 수 있습니다.

node build/index.js

현재, 내비게이션 http://localhost:3000/ 을 찾았을 때, 날씬한 응용 프로그램이 나타날 것입니다. 단 한 번만 생산에 들어갈 수 있습니다.

결론
이 설명서에서, 우리는 SvelteKit를 사용하여 첫 번째routes가 있는 Svelte 프로그램을 만드는 방법을 소개했다.우리가 무엇을 배웠는지 봅시다.

SvelteKit를 설정하고 Svelte 응용 프로그램의 기본 구조를 만드는 방법.

응용 프로그램에 여러 페이지가 있을 수 있도록 SvelteKit에서 루트를 사용하는 방법입니다.

정확한 어댑터를 사용하기 위해 프로그램의 배치 위치에 따라 프로필을 업데이트하는 방법.

노드에서 응용 프로그램을 로컬로 구축하고 실행하는 방법.JS 서버.

그런 다음 Svelte를 사용하여 사용자 정의 응용 프로그램을 시작할 수 있습니다.더 많은 인터넷 내용을 알고 싶으면 잊지 마세요.