처음부터 차근차근
svelte 정리2 본문
routes
스벨트는 file-based routing 프레임워크이다.
즉 routing을 따로 해줄 필요가 없고 routes 폴더 아래에 파일을 생성하면 그것이 곧 경로가 된다.
+page.svelte
루트 페이지(메인 페이지)이다.
login 폴더 밑에 이 페이지를 만들면
도메인/login 이라고 쳤을 때 페이지가 나온다.
id로 routing 할 때
book/{id}이런식으로 할려면
폴더이름을 [id]이렇게 만들어야한다.
+page.js
-data 가져와서 page에 전달하는 역할을 한다
-서버와 브라우저 모두 작동
-ssr, csr 모두 지원
-구현 방법
1. +page.js
export const load = async () => {
const posts = await fetch('https://jsonplaceholder.typicode.com/posts');
return {posts: await posts.json()};
};
2. +page.svelte
<script>
export let data;
</script>
<h1>{data.posts}</h1>
+page.server.js
-db에서 데이터가져올때 사용
-서버에서만 작동
- ssr만 지원
-사용방법
1. +page.server.js
export const load = async ({params}) => {
const post = await getPost(params.postId);
return {post};
};
const getPost = async(id) =>{
const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
return await post.json();
}
2. +page.svelte
<script>
export let data;
</script>
<h1>{data.post.title}</h1>
+page.server.js의 두번째 기능
form 태그 처리(사용자 입력 처리)
->스벨트에서는 actions라는 함수가 처리함
- 사용법
1. +page.svelte
<script>
export let form; // resp 받음
</script>
<form action='~~/createPost' method='POST'>
<input name='title' value='김나나'>
</form>
여기서 acrtions을 정의하지 않으면 아래에서 default라는 이름으로 받음
2. +page.server.js
export const actions = {
createPost: async({request})=>{
const body = await request.formData(); // 클라이언트 데이터를 가져옴
const title = body.get('title');
const resp = await createPost({
title : title
});
return resp;
}
};
const createPost = await ({ title }) => {
const posts = await fetch('https://jsonplaceholder.typicode.com/posts');
return {posts: await posts.json()}; // 이런거 작성
}
//crud 구현할 수 있음
+server.js
특정 route에 한 api endpoint
-http 메소드(get, post, patch, put, delete)와 똑같은 이름의 함수를 만들면 됨
-사용법
1. +server.js
export const POST = ({request}) => {
}
2. +page.svelte
<form action='/logout' method='POST'> // 이렇게하면 위의 함수에서 처리함
</form>
네브바 만들기
-> 레이아웃 사용
-공통된 ui 부분 생성
-사용법
+layout.svelte
코드 짜고 <slot /> 넣기
그러면 slot 부분에 page 코드가 들어감
+layout.js 또는 +layout.server.js
data를 layout을 포함한 모든 페이지에 전달함
-사용법
1. +layout.server.js
export const load = () => {
return {
user : {
name : '김나나',
email : '뿌우'
}
}
}
2. +layout.svelte
<script>
export let data;
</script>
<h1>{data.user.name} 안녕?</h1>
$lib
라이브러리 폴더 경로
src / lib에 자동 연결됨
라이브러리 폴더 안에는 컴포넌트, 유틸리티 함수, db관련 정보 등이 들어감
lib / server / 파일
server 관련 파일만 접근할 수 있음
예를들어 +page.server.js 이런 파일만 접근할 수 있는것임
'프로그래밍 > Svelte Kit' 카테고리의 다른 글
svelte 정리 (0) | 2023.05.15 |
---|