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 이런 파일만 접근할 수 있는것임