[SVELTEKIT] 스벨트킷을 시작해보자! (youtube)

svelte kit은 공식 홈페이지의 자료와 youtube 강의를 참고했습니다.

우선 youtube 강의 내용을 정리한 것부터!

 

 

1. 레이아웃

src/+page.svelte 파일 내에서 html 문법 그대로 작성하면됨
- css 디자인이나 html 레이아웃 작성, 기능을 넣고 싶을 때에는 script tag 열어서 js 코드 작성

 

2. 라우팅

1) "/about 접속 시 다른 페이지를 보여주고 싶다?"

-> src/routes 내에 about 이라는 이름의 폴더 생성
-> about 폴더 하위에 +page.svelte 이름의 파일을 만든 후 작성하면 http://localhost:5173/about 주소로 접근 시 about 화면 출력된다

2) "메뉴바 등과 같이 모든 페이지에서 보여지는 contents를 하나하나 하드코딩 해야할까?"

-> src/routes 하위에 +layout.svelte 파일을 생성해 작성하면 모든 하위페이지에 자동으로 보여진다
- <slot> 태그의 사용 : page.svelte 파일의 내용을 이자리에 보여줄 것
= layout.svelte 파일 안에서 page.svelte 파일이 동작하기 때문에 slot 태그로 위치 설정 가능

 

3. server에서 user에게 data 전송

1) "user가 page를 방문했을 때 server에서 data 를 가져와서 보여주고 싶다?"

-> src/routes/about 내에 +page.js 라는 이름을 가진 예약 파일 생성
-> load 함수 불러오기

export async function load({ fetch }) {
    let res = await fetch('https://dummyjson.com/products/1');
    let result = await res.json();
    return result
    //결과 뱉어내기
}

-> 이렇게 하면 +page.svelte 파일이 로드될 때 함께 실행된다

 

그리고, +page.svelte 파일에는 아래의 코드를 작성한다

<script>
    export let data
</script>

<h1>about 페이지임 {data.title}</h1>

 

2) 파일명을 +page.server.js 한다면?

작성한 코드가 서버에서만 실행되기 때문에 server side rendering 을 하고 싶을 때에 사용!
-> db에서 데이터를 꺼내 보여주고 싶다 할때 사용하면 된다 (DB입출력)

 

4. user 에서 server date 전송

+page.svelte 파일에 form 태그 사용하면 된다!

<form method ="POST" action ="/어쩌구">
    <input name = "email">
    <input name ="password">
    <button> Log In </button>
</form>

 

5. 서버기능 만들기

1) src/routes 내에 api1 이름의 폴더를 만들고 +server.js 파일을 생성

 

2) GET 함수 입력

export async function GET({ fetch, request }){
    // 누군가가 /api1 으로 GET 요청시 여기의 코드가 실행된다
    return new Response(JSON.stringify({name : 'kim'}))
    // -> {name : 'kim'} 을 보내주세요! 라는 내용의 코드임
};

-> http://localhost:5173/api1 로 접속하면 {"name" : "kim"} 라고 응답이 오는 것을 볼 수 있다.

 

2-1) POST 는?
-> 사용방법 동일, GET자리에 POST 사용하면 됨

 

3) DB 입출력도 가능하다

 

* 참고한 youtube 강의 

https://youtu.be/o1Hy7cpSXjA