[Web] - 7편 (1) Svelte 시작 및 초기 세팅(routing, auth) 소감

Svelte

Svelte인 이유는 없다. 여기저기서 스벨트가 좋다길래 일단 프레임워크부터 못박아 놓고 뭘 만들지 고민했다.

복잡한걸 만들기보다, 어떤 느낌인지 찍먹 해보고 싶어져서 네이버 클라우드에서 지원하는 sms, mms API를 활용하는 페이지를 만들어보려한다.

로고는 마음에 들었다.

Svelte는 프론트엔드 프레임워크다. 슥보니 프론트엔드에서 JS를 좀 더 쉽고, 빠르게 쓸 수 있게 해주는 라이브러리라고 한다. 어떤 언어인지는 여기저기 유튜브 등등에 잘 설명되어 있고, 2021년 스택오버플로우에서 발표한 '가장 사랑받는 프론트엔드 프레임워크' 1위, '가장 원하는 프레임워크' 5위를 달성했다고 한다. 

---

1. 설치 & 라우팅 세팅

npm install -g degit
npx degit sveltejs/template svelte-app
cd svelte-app
npm install
npm run dev

순서대로 쭉 실행해주면 8080포트(본인기준)로 아래와 같은 화면이 열린다.

 

아주 심플하고, 좋군요. 아래와 같은 폴더 구조로 생성된다. 리액트를 해봤기에 느낌적인 느낌으로 src 안에 있는 파일을 잘 수정해서 index.html에 쏴주는 느낌인듯하다.

이전의 랜딩 페이지처럼 한페이지에서 끝나는게 아니라 인증 등등이 필요하기에 routing 할 수 있는 것도 설치해준다.

npm install --save svelte-routing

이후 src 폴더 안에 routes 폴더를 만들고, 페이지들을 svelte 파일로 만들어준다.

 

App.svelte를 기본 예시는 지우고 svelte-routing 안에서 필요한 모듈을 가져온다.

위에서 만든 파일을 다음과 같은 문법으로 가져올 수 있다.

<script>
	import {Route, Link, Router} from "svelte-routing";
	import Login from './routes/Login.svelte';
	import Join from './routes/Join.svelte';

	export let url = "";
</script>

<Router {url}>
	<nav>
		<Link to="/">Login</Link>
		<Link to="join">Join</Link>
	</nav>
	<div>
		<Route path="/"><Login /></Route>
		<Route path="join" component={Join}></Route>
	</div>
</Router>

<main>
</main>

<style>
</style>

그리고 index.html로 와서 body 안에 <div id="app"></div> 를 선언하고, main.js의 target을 아래와 같이 고친다.

target: document.getElementById("app"),

 

---

2. 로그인 페이지 만들기 (가져오기)

npm install --save svelte-use-form

npm -> https://www.npmjs.com/package/svelte-use-form 

 

svelte-use-form을 설치해준다. svelte Login Example을 기반으로 세팅해준다.

https://svelte.dev/repl/ca967b45a5aa47b2bb2f9118eb79eefe?version=3.47.0 

<script>
    import { useForm, validators, HintGroup, Hint, email, required } from "svelte-use-form";
  
    const form = useForm();
</script>
  
<form use:form>
    <h1>Login</h1>

    <input type="email" name="email" use:validators={[required, email]} placeholder="Email"/>
        <HintGroup for="email">
        <Hint on="required">이메일은 필수 항목입니다.</Hint>
        <Hint on="email" hideWhenRequired>유효하지 않은 이메일입니다.</Hint>
    </HintGroup>

    <input type="password" name="password" use:validators={[required]} placeholder="Password"/>
    <Hint for="password" on="required">비밀번호는 필수 항목입니다.</Hint>

    <button disabled={!$form.valid}>로그인</button>
</form>

아래와 같은 로그인 화면을 구성할 수 있었다.

 

3. 회원가입 페이지 만들기 (가져오기)

끙끙 거리며 개발할 것 없이 회원가입 정도는 예시가 아주 잘 나와있었다. 항목만 나에게 필요한 것들로 바꾸고 다음 포스팅엔 DB와 연결해보겠다.

https://svelte.dev/repl/a6665267d7d0435ebc7921a250552a25?version=3.34.0 

 

<script>
	import { useForm, Hint, HintGroup, validators, required, minLength,maxLength, email } from "svelte-use-form";
	import { passwordMatch } from "./js/customValidators";
	
	const form = useForm();
	
	const requiredMessage = "이 필드는 필수 항목입니다.";
</script>
<main>
	<form use:form>
		<h1>
			Join
		</h1>
		<label for="email">이메일</label>
		<input type="email" name="email" use:validators={[required, email]} />
		<HintGroup for="email">
			<Hint on="required">{requiredMessage}</Hint>
			<Hint on="email" hideWhenRequired>유효한 이메일을 입력해야합니다.</Hint>	
		</HintGroup>

		<label for="phone">전화번호(01012347777)</label>
		<input type="text" name="phone" use:validators={[required, minLength(11),maxLength(11)]}/>
        <HintGroup for="phone">
			<Hint on="required">{requiredMessage}</Hint>
			<Hint on="minLength" hideWhenRequired let:value>전화번호는 {value}자리 숫자로 구성되어야 합니다.</Hint>
            <Hint on="maxLength" hideWhenRequired let:value>전화번호는 {value}자리 숫자로 구성되어야 합니다.</Hint>
		</HintGroup>

		<label for="password">비밀번호</label>
		<input type="password" name="password" use:validators={[required, minLength(6)]} />
		<HintGroup for="password">
			<Hint on="required">{requiredMessage}</Hint>
			<Hint on="minLength" hideWhenRequired let:value>비밀번호는 최소 {value}자리 이상으로 구성되어야 합니다.</Hint>
		</HintGroup>

		<label for="passwordConfirmation">비밀번호 확인</label>
		<input type="password" name="passwordConfirmation" use:validators={[required, passwordMatch]} />
		<HintGroup for="passwordConfirmation">
			<Hint on="required">{requiredMessage}</Hint>
			<Hint on="passwordMatch" hideWhenRequired>비밀번호가 일치하지 않습니다.</Hint>	
		</HintGroup><br />

		<button disabled={!$form.valid} on:click|preventDefault>
			가입하기
		</button>
	</form>
</main>

 

비밀번호 비교를 위한 js 파일

// customValidators.js

export function passwordMatch(value, form) {
	if (value !== form.values.password) {
			return { passwordMatch: true };
	}
}

---

중간 소감

일단 다들 왜 스벨트 스벨트 하는지 알겠다. 타 프레임워크에 비해서 가독성이 굉장히 좋고, 처음 뵙는 프레임워크임에도 가이드만 봐도 어떻게 활용하면 되는지 직관적이었다. 최근에 만난 프론트엔드 개발자분은 리액트 아니면 뷰가 대부분이었는데, 비교적 최근?(알고보니 5년이나된)에 나온 언어인 Svelte를 프로젝트에 도입해보는 것도 좋은 것 같다. 리액트에 비해 훨씬 가볍다는 느낌은 들었지만, 한국어로 된 자료, 커뮤니티는 부족했으며 대부분 영어로 된 자료에 기대야한다는 단점은 있었다. 대규모 웹에는 적합하지 않다고는 하는데 IT 스타트업 등에서 MVP를 빠르게 찍어내기에는 꽤나 매력적인 언어가 아닌가 생각된다.

여러 토이프로젝트에 계속 써보며 손에 익혀보려한다.

https://massivepixel.io/blog/svelte-vs-react/

 

https://github.com/wq0212/naver-sms-api-svelte

GitHub - wq0212/naver-sms-api-svelte: Development of SMS transmission system using Naver SMS transmission api. Use 'Svelte'.