728x90
SvelteKit 공식 사이트의 튜토리얼을 번역한 내용입니다 :)
원본은 아래 링크를 참고해주세요
https://kit.svelte.dev/docs/project-structure
start
npm create svelte@latest my-app
cd my-app
npm install
npm run dev
Project Structure (프로젝트 구조)
my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [서버전용 lib 파일]
│ │ └ [작성한 lib 파일] ex.image라는이름의 폴더 생성 후 이미지 요소를 저장할 수 있음
│ ├ params/
│ │ └ [작성한 파라미터 매칭]
│ ├ routes/
│ │ └ [앱의 구현, url과 일치하는 폴더 생성]
│ │ │ └ [+page.js]
│ │ │ └ [+page.svelte]
│ │ └ +page.svelte : 최초 접속 시 노출되는 페이지
│ │ └ +layout.svelte : 페이지 설계도. 헤더, 바디, 푸터로 설계한 경우 여기 작성됨
│ ├ app.html
│ ├ error.html
│ └ hooks.js
├ static/
│ └ [로고 등의 static 요소]
├ tests/
│ └ [테스트코드]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js
src
src 프로젝트의 핵심
- lib에는 $lib 별칭을 통해 가져오거나 svelte-package를 사용하여 배포용으로 패키지화할 수 있는 라이브러리 코드가 포함되어 있습니다.
- server contains your server-only library code. It can be imported by using the [$lib/server](<https://kit.svelte.dev/docs/server-only-modules>) alias. SvelteKit will prevent you from importing these in client code.
- server에는 서버 전용 라이브러리 코드가 포함되어 있습니다. $lib/server 별칭을 사용하여 가져올 수 있습니다. SvelteKit은 클라이언트 코드에서 이러한 항목을 가져오는 것을 방지합니다.
- params는 앱에 필요한 모든 param matchers(파라미터 매칭)를 포함합니다.
- route에는 애플리케이션의 경로(routes)가 포함됩니다.
- app.html은 아래의 내용들을 포함하는 페이지 템플릿입니다.
- %sveltekit.head% — 앱에 필요한 <link> 및 <script> 요소와 모든 svelte:head 콘텐츠
- %sveltekit.body% — 렌더링된 페이지의 마크업입니다. 일반적으로 이것은 <body> 내부가 아니라 <div> 또는 다른 요소 내부에 존재합니다. 브라우저 확장으로 인한 버그를 방지합니다.(원문 : to prevent bugs caused by browser extensions injecting elements that are then destroyed by the hydration process)
- %sveltekit.assets% — either [paths.assets](<https://kit.svelte.dev/docs/configuration#paths>), if specified, or a relative path to [paths.base](<https://kit.svelte.dev/docs/configuration#paths>)
- %sveltekit.nonce% — 한번만 사용되는 CSP . 링크나 스크립트가 포함되어있음
- error.html (선택사항) 에러가 발생했을 때 띄울 html 페이지. 아래 요소를 포함함
- %sveltekit.status% — HTTP 상태
- %sveltekit.error.message% — 에러메시지
- hooks.js (선택사항) 앱의 후크를 포함 : hooks
- service-worker.js (선택사항) service worker를 포함함
TypeScript를 사용하고 싶으면 .js 대신 .ts 를 사용할 수 있음
static
robots.txt 또는 favicon.png와 같이 있는 그대로 제공되어야 하는 모든 정적 자산은 여기로 이동합니다.
tests
npm create svelte@latest을 실행중일 때, 테스트를 해보고 싶다면 이 폴더에 생성하여 해보면 됨
package.json
jsconfig.json나 package.json은 npm create svelte@latest 중에 typecheck를 추가한 경우 TypeScript를 구성합니다. SvelteKit은 특정 방식으로 설정되는 특정 구성에 의존하므로 자체 구성이 확장되는 .svelte-kit/tsconfig.json 파일을 생성합니다.
vite.config.js
SvelteKit 프로젝트는 실제로 다른 Vite 구성과 함께 [@sveltejs/kit/vite](<https://kit.svelte.dev/docs/modules#sveltejs-kit-vite>) 플러그인을 사용하는 Vite 프로젝트입니다.
Other files
- .svelte-kit
- 프로젝트 생성 시 제공되는 .svelte-kit 폴더( [outDir](<https://kit.svelte.dev/docs/configuration#outdir>)로 구성 가능). 원하면 지워버려도 됨. (다음 dev 나 build 를 진행하면 재생성 될 것임).
728x90
'자바스크립트 > Svelte' 카테고리의 다른 글
| [간단] 스벨트에서 localStrorage 안될 때 (0) | 2022.12.04 |
|---|---|
| [번역] setContext and getContext (0) | 2022.11.23 |
| [번역] svelteKit -fetch requests (0) | 2022.11.11 |
| [svelteKit] 상위 레이아웃 무시하기 (0) | 2022.11.11 |
| 스벨트 공식 튜토리얼 (0) | 2022.10.27 |
댓글