Introduction

안녕하세요! 이 블로그에서는 Svelte와 Svelte Kit을 사용하여 Plus Page.Server에 액션을 추가하는 방법에 대해 알아보겠습니다. Svelte와 Svelte Kit은 다른 프레임워크와 환경에 비해 훨씬 간편하고 직관적인 방식으로 코드를 작성할 수 있도록 도와주는 놀라운 도구입니다. 이번 글에서는 기본 액션과 명명된 액션에 대해 알아보고, 어떻게 이를 활용하여 폼을 만들고 데이터를 처리하는지 살펴보겠습니다.

기본 액션 (Default Action)

기본 액션은 Plus Page.Server에서 설정하는 가장 간단한 액션입니다. 기본 액션은 폼 데이터를 처리하는데 사용되며, 폼에 입력한 데이터를 서버로 전송합니다. 기본 액션을 설정하려면 다음과 같이 코드를 작성하면 됩니다.

export const actions = async (event) => {
  const data = await event.request.formData();
  console.log(data);
}

위의 코드에서는 폼 데이터를 받아와서 콘솔에 출력하는 간단한 예시를 보여주고 있습니다. 이제 실제로 폼을 만들어서 데이터를 전송해보겠습니다.

<form method="post">
  <label for="firstName">이름</label>
  <input type="text" id="firstName" name="firstName">
  <button type="submit">전송</button>
</form>

위의 코드에서는 POST 메소드를 사용하는 폼을 만들고, 이름을 입력받는 input 필드와 전송 버튼을 추가하였습니다. 이제 이 폼을 제출하면 Plus Page.Server의 기본 액션으로 데이터가 전송됩니다.

명명된 액션 (Named Action)

명명된 액션은 Plus Page.Server에서 여러 개의 액션을 설정할 때 사용됩니다. 명명된 액션은 각각의 이름을 가지고 있으며, 필요한 경우 해당 액션을 호출할 수 있습니다. 명명된 액션을 설정하려면 다음과 같이 코드를 작성하면 됩니다.

export const actions = {
  register: async (event) => {
    const data = await event.request.formData();
    console.log(data);
  },
  login: async (event) => {
    const data = await event.request.formData();
    console.log(data);
  }
}

위의 코드에서는 ‘register’와 ‘login’이라는 두 개의 명명된 액션을 설정하였습니다. 각각의 액션은 폼 데이터를 받아와서 콘솔에 출력하는 예시를 보여주고 있습니다. 이제 실제로 폼을 만들어서 각각의 액션을 호출해보겠습니다.

<form method="post" action="?/register">
  <label for="firstName">이름</label>
  <input type="text" id="firstName" name="firstName">
  <button type="submit">회원가입</button>
</form>

<form method="post" action="?/login">
  <label for="firstName">이름</label>
  <input type="text" id="firstName" name="firstName">
  <button type="submit">로그인</button>
</form>

위의 코드에서는 ‘register’ 액션을 호출하는 회원가입 폼과 ‘login’ 액션을 호출하는 로그인 폼을 만들었습니다. 액션을 호출하기 위해 ‘action’ 속성에 ‘?/액션명’ 형태로 설정하였습니다. 이제 각각의 폼을 제출하면 해당 액션이 호출되고 폼 데이터가 전송됩니다.

결론

이번 글에서는 Svelte와 Svelte Kit을 사용하여 Plus Page.Server에 액션을 추가하는 방법을 알아보았습니다. 기본 액션과 명명된 액션을 통해 폼 데이터를 간편하게 처리할 수 있습니다. Svelte와 Svelte Kit은 개발자들에게 매우 편리하고 직관적인 개발 환경을 제공해주는 훌륭한 도구입니다. 이제 여러분도 Svelte와 Svelte Kit을 사용하여 자유롭게 웹 애플리케이션을 개발해보세요!