[Sveltekit] API 서버 생성 후 통신하기

Sveltekit은 프론트와 서버 모두 개발할 수 있는 풀스택 프레임워크입니다. 그래서 이번 포스팅에서는 Rest API로 프론트에서 요청을 받고 응답을 주는 서버를 만들어보도록 하겠습니다.

 

핸들러가 들어갈 파일의 이름은 +server.js 라고 설정해주어야 합니다.

api라는 디렉토리를 하나 생성합니다. 디렉토리 이름은 아무거나 하셔도 무방합니다.

그 디렉토리 아래에 +server.js 파일을 생성해주었습니다.

 

// +server.js

export function GET() {
    return new Response("Hello, World!");
}

그리고 GET 요청을 받을 수 있는 핸들러를 만들어줍니다. (함수명은 고정입니다)

참고로 위 내용이 +server.js 코드의 전문입니다. 보일러플레이트가 하나도 없는 게 굉장히 깔끔합니다.

 

// +page.js

export async function load() {
    await fetch("http://192.168.0.75:5173/api")
        .then((response) => response.text())
        .then((data) => {
            console.log(data);
        });
}

프론트에서 요청할 땐 프론트와 호스트 주소는 같고, 폴더 라우팅 하듯이 뒤에 디렉토리 이름(여기서는 api)을 붙여서 요청하면 됩니다.