무작정 따라하는 Sveltekit + MongoDB + Vercel. [3] 구현 및 배포

 

 

 

스벨트킷 설치와 데모앱 등을 아직 만들지 못했다면? 1편 읽기

무작정 따라하는 Sveltekit + MongoDB + Vercel. [1] 설치 및 데모앱

 

스벨트킷에서 몽고DB Atlas와 연동하고 싶다면? 2편 읽기

무작정 따라하는 Sveltekit + MongoDB + Vercel. [2] DB 연동

 

 

 

클릭 이벤트로 상태를 변경하기

버튼을 구현하고 있으니 클릭 이벤트도 만들어보자. 클릭 이벤트를 구현하는 방법은 여러가지인데 이 경우에는 이벤트 발생과 함께 상태도 변경되어야 한다. 이를 염두해서 Actions를 사용해보았다.

import { tutorials } from '$db/tutorials';
import type { Actions, PageServerLoad } from './$types';
import { ObjectId } from 'mongodb';

// 일부 생략

export const actions: Actions = {
	editUser: async ({ request }: any) => {
		console.log('>>>> editUser start');
		const values = await request.formData();
		
		const state = Number.parseInt(values.get('state'));
		const newState = state > 1 ? 0 : (state + 1)
		
		const _id: string = values.get('id');
		const objectId = new ObjectId(_id);
		
		await tutorials.updateOne(
			{ _id: objectId },
			{
				$set: {
					state: newState
				}
			}
		);

		return { success: true };
	}
};

 

상태를 수정할 준비는 되었으니 이제 UI에서 클릭을 할 수 있도록 변경해보자. 먼저 CSS에 이벤트가 막혀있던 것을 제거하자.

<!-- styles.css -->
.button--process {
	background-color: MEDIUMSLATEBLUE;
}
.button--success {
	background-color: DARKTURQUOISE;
}

 

이제 UI에서 상태별로 CSS 클래스를 부여받을 수 있으면서, 클릭할 때마다 상태를 바꿀 수 있도록 수정해보자. 이때 +page.svelte를 수정하는데 input 태그에 할당된 값이 form 태그에 지정된 action으로 전달이 된다. 그래서 +page.server.ts를 보면 request 내부에서 "_id"가 아닌 "id"로 값을 받을 수 있는 것이다. 

 

// +page.svelte
<script lang="ts">
	import type { PageData } from './$types';
	import { enhance } from '$app/forms';

	export let data: PageData;
	$: ({ tutorials } = data);

	function defaultButtonState(tutorial: any) {
		if (tutorial.state == 0) {
			return true;
		} else {
			return false;
		}
	}

	function processButtonState(tutorial: any) {
		if (tutorial.state == 1) {
			return true;
		} else {
			return false;
		}
	}

	function successButtonState(tutorial: any) {
		if (tutorial.state == 2) {
			return true;
		} else {
			return false;
		}
	}

	async function editState(index: number) {
		let tutorial = tutorials[index];
		tutorial.state = tutorial.state > 1 ? 0 : tutorial.state + 1;
		tutorials[index] = tutorial;
	}
</script>

<svelte:head>
	<title>Sample App</title>
	<meta name="description" content="Svelte demo app" />
</svelte:head>

<section>
	<div class="wrapper">
		{#each tutorials as tutorial, index}
			<form
				method="POST"
				action="?/editUser"
				use:enhance={() => {
					return async () => {
						editState(index);
					};
				}}
			>
				<input hidden name="id" type="text" value={tutorial._id} />
				<input hidden name="title" type="text" value={tutorial.title} />
				<input hidden name="state" type="number" value={tutorial.state} />
                
                // 이하 생략

 

이렇게 하면 3가지 상태를 가지는 버튼 구현이 완료된 것이다. 클릭을 해보자. 그리고 새로고침을 해보자. 상태가 유지되어 있는 것을 볼 수 있다. 여기까지 코드는 아래 깃헙 링크로 확인해볼 수 있다.

6. 버튼 상태 업데이트 · conquerex/sveltekit-mongodb-vercel-app@3d5ec54

 

 

 

배포 전 환경변수 세팅

정적 페이지 배포 서비스인 Vercel. 스벨트 개발자가 Vercel로 가면서 Vercel은 스벨트 친화적인 회사가 되었다. 그러니 여기에 배포를 해보자. 물론 Vercel 회원가입 과정은 생략한다.

 

가장 간단한 방식인 Github repository를 통한 배포 방식을 취하겠다. 배포전에 환경변수인 env 파일에 대한 조치를 취할 필요가 있다. Vite를 통해 빌드되고 있기 때문에 Vite에 맞게 세팅할 필요가 있다.

// .env
// 변수명에 'VITE_'를 추가
VITE_MONGO_URL=mongodb+srv://admin:1q2w3e4r@myfirstdb.n7dljwk.mongodb.net/?retryWrites=true&w=majority

// src/lib/Env.js (새로 생성)
export const MONGO_URL = import.meta.env.VITE_MONGO_URL;

// mongo.ts
// MONGO_URL의 from 수정
import { MongoClient } from 'mongodb';
import { MONGO_URL } from '$lib/Env';

 

배포 준비까지 완료했다. 아래 깃헙 코드가 최종본이다. 당연하지만 env 파일은 보이지 않는다. 환경변수는 Vercel에서 세팅한다.

7. Final · conquerex/sveltekit-mongodb-vercel-app@ace82f1

 

 

Vercel로 배포

깃헙 레포지토리로 배포한다는 가정하에서 설명을 이어가겠다. Vercel에 들어가서 로그인을 하고 New 버튼을 눌러서 본격적인 배포 세팅을 시작한다. "Continue with Github" 버튼을 클릭하면 Import Git Repository 화면이 나타난다. 본인의 Github 계정 정보가 나타나면 정상이고 그렇지 않으면 "Add github account" 버튼을 클릭해서 연동시켜야 한다. 원하는 깃헙 레포지토리의 Import 버튼을 클릭한다.

 

 

원한다면 Project 이름 정도 변경하고 프레임워크 프리셋은 자동으로 SvelteKit으로 되어 있을 것이다. 만약 그렇지 않다면 SvelteKit으로 바꿔준다. 그리고 무엇보다 중요한 환경변수 입력!!! 접혀있는 Environment Variables를 클릭하고 Name에 VITE_MONGO_URL을, Value에는 env 파일에 있던 URL값을 넣는다. 입력 후 반드시 ADD 버튼을 눌러서 아래처럼 보여야 한다.

 

 

Deploy 버튼을 클릭하면 끝. 순식간에 배포가 완료되는 것을 확인할 수 있다. 이제 Vercel에서 제공되는 도메인을 통해 브라우저에서 화면 만든 것을 확인해보자. 뿌듯 뿌듯 뿌드듯. 여러분과 나는 SvelteKit과 MongoDB, Vercel. 이 세가지만으로 하나의 화면을 만들어냈다. 간단한 화면을 만들고 싶다면 SvelteKit을 활용해보도록 하자.

 

.