[sveltekit] +page.js가 필요한 이유
기존에 만들었던 프로그램에서는 +page.svelte파일에서 onMount시 서버에서 필요한 데이터를 가져오도록 만들었다.
하지만 sveltekit에 보면 +papge.js나 +page.server.js를 사용하는 예를 볼 수 있다.
간단하게 위의 코드를 설명하자면 /** @type {import('./$types').PageLoad} */ 부분은 JSDoc이다. 공식문서를 보면 javaDoc과 비슷하다고 하는데 자바는 안해봐서 모르겠지만 JSDoc의 @type 통해서 타입 체킹을 할 수 있다고 한다.
(스벨트킷은 자동으로 $types.d.ts를 생성하며 거기서 load되는 파라매터의 타입을 만들고 그 타입을 import하는 것)
타입체킹을 하고 싶지 않으면 저 라인을 무시하면 된다. 자세한 내용은 여기 보시면 된다. (https://kit.svelte.dev/docs/types#app)
어째튼 용도는 폴더의 이름으로 url이 리퀘스트 되면 +page.js이 먼저 실행되어 화면에 들어가는 데이터를 +page.svelte파일에 전달해주고 그걸 가지고 랜더링을 한다.
아래는 +page.svelte에서 onMount시 화면에 필요한 데이터를 받아오는 코드이다.
<script>
import {onMount} from 'svelte'
let datas=[];
onMount(async()=>{
let res = await fetch('https://api.fake-rest.refine.dev/posts')
datas = await res.json()
console.log(datas)
})
</script>
{#each datas as data}
<div>{data.title}</div>
{/each}
페이지 소스를 봤을때 div안이 비어 있다.
다음은 +page.js와 +page.svelte를 나누어서 +page.js에서 데이터를 요청하여 +page.svelte에 전달 하는 경우이다.
+page.js
export async function load() {
let res = await fetch('https://api.fake-rest.refine.dev/posts')
let posts = await res.json()
return {
posts
};
}
+page.svelte
<script>
import { error } from '@sveltejs/kit';
export let data;
</script>
{#each data.posts as post}
<div>{post.title}</div>
{/each}위에 보듯이 전달은 data 변수를 통해 전달된다. 전의 예제와 다르게 리퀘스트 된 데이터가 페이지 소스에 랜더링 되어 추가된 것을 볼 수있다.
이를 통해 서버사이드랜더링을 할 수 있다! 또한 +page.server.js를 사용하면 서버로서 코드가 실행되며 필요에 따라 클라이언트에 넣지 못하는 민감한 정보를 넣을 수도 있다.
'Computer 관심 > Svelte' 카테고리의 다른 글
| 1. [스벨트킷모바일앱개발] capacitor Ionic SvelteKit 실행해보기 (0) | 2023.04.23 |
|---|---|
| sveltekit을 vercel에 올리기(엄청 쉬움) (0) | 2023.01.08 |
| [svelte] svelte 버전 업그레이드 (0) | 2022.06.25 |
| [svelte] 서버 포트 열기 (0) | 2022.06.25 |
| 웹프레임웍 추천 (vue.js, reactjs, futterweb, sveltejs) (0) | 2022.05.11 |
