요즘 핫한 svelte 가지고 1분만에 로그인 웹사이트 만들기

안녕하세요!

오늘은 요즘 핫한 svelte 가지고 간단한 로그인 페이지를 만들어볼게요!

( 아 물론 디자인 [ css ]는 귀찮았기에(?) 기능만 넣었.. )

 

 

목표

일단 목표부터 정하자면 svelte 는 컴파일러 언어라서 state 선언 그런게 필요 없으니까 인풋 박스에 넣은 정보와 데이터베이스랑 비교해서 일치하면 Success 문자를, 실패시 재확인 문자를 보내고자 했어요

 

코드

( 아 db 비교의 경우에는 제 키 정보를 노출시킬 수 있는 위협이 된다고 판단해서 삭제를.. )

그리고 이거 실행해보고 싶으면 .. src / routes / +page로 시작하고 svelte 파일에 복붙한 다음 npm run dev

( 패키지 이런거 필요 없어요 )

 

아 테스트 이메일 / pw는 test@test.com / test

 

<script>

    let authid = "test@test.com"

    let authpw = "test"

    let prid = ""

    let prpw = ""

    function fca(){

        console.log(prid)

        console.log(prpw)

        if(prid == authid){

            alert("Login Success")

        }

        else{

            alert(" Login Failure : please re:check your PW / ID")

        }

    }

   

</script>

<h1>로그인 하기!</h1>

<form>

    <input maxlength="50" type="email" placeholder="이메일 입력!" bind:value={prid} id="sel1">

    <input placeholder="PW입력!" type="password" bind:value={prpw} id="sel2">

    <button on:click={fca}>Login</button>

</form>

간단하죠? 저는 이런식으로 구현했는데

진짜 이것만 있는 간단한 웹페이지! ( svelte 재미있.. )

 

여기에서 제일 중요한 함수는 2개인데

1. on:click={} ( 여러분이 아는 그거 맞아요 , 그냥 온클릭 대신.. ()이거 필요 없는 )

2. bind:value={} 

이건데 원래 js에서 인풋 박스 안의 데이터는 

document.getElementById( id ).value

를 통해서 가져와야 하지만 svelte에서는 이거 쓰면 오류나고 bind:values로 쉽게 가져올 수 있어요

 

이걸로 유저의 입력값을 prid/prpw에 나누어 집어넣고 Login 버튼을 누르면 이 2개의 값이 기존에 선언되거나 데이터베이스에서 가져온 authid/authpw 와 비교를 하는 거죠 ( 근데 실제로 이걸로 만들면 큰일나요 )

백엔드로 따로 만들어야 하고.. 이건 스크립트 태그 내에 유저의 id / pw가 그대로 보여지기 때문에 파일 백엔드로 보내는 게 훨씬 안전하답니다 >_<