공대생

로그인 페이지 아이디, 비밀번호 받아와서 처리하기 본문

한이음/웹페이지 제작

로그인 페이지 아이디, 비밀번호 받아와서 처리하기

상수나무 2021. 12. 30. 22:42

1. Login.ejs

이전 포스트에 이어서 Login.ejs 코드는 다음과 같다. 이제 사용자가 로그인을 하기 위한 껍데기를 모두 구현하였으니 사용자가 입력한 아이디와 비밀번호를 받아와서 처리하는 과정을 구현할 차례이다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .mytitle {
            color: black;
            width: 300px;
            height: 150px;
            background-color: gold;
            background-position: center; /*텍스트정렬*/
            background-size: cover;

            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }

        .insert {
            padding-top: 20px;
            padding-left: 65px;
        }

        .button {
            margin: 10px auto; /*화면 양쪽 여백 동등하게 맞춰짐(센터로감)*/
            width: 80px;
            height: 30px;
            font-size: 15px;
        }

        .login_style {
            width: 80px;
            height: 30px;
            font-size: 15px;
        }

        .register_style {

            width: 80px;
            height: 30px;
            font-size: 15px;
        }

        .wrap {
            margin: 10px auto; /*화면 양쪽 여백 동등하게 맞춰짐(센터로감)*/
            width: 300px;
        }
    </style>
    <link rel="stylesheet" href="/css/home/login.css">
    <script src="/js/home/login.js" defer></script>
</head>

<body>
    <div class="login-page">
        <div class="form">
          <form class="login-form">
            <input id="id" type="text" placeholder="아이디"/>
            <input id="psword" type="password" placeholder="비밀번호"/>
            <p id="button">로그인</p>
            <p class="message">Not registered? <a href="/user/register">Create an account</a></p>
          </form>
        </div>
      </div>
</body>
</html>

<!--Copyright (c) 2021 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy)-->

이 코드에서 아랫부분에 다음과 같이 login.js 파일을 연동한다. 

<script src="/js/home/login.js" defer></script>

login.js 파일은 사용자가 껍데기에 아이디와 비밀번호를 입력하면 해당 문자열을 코드로 받아오는 역할을 한다.

이 ejs코드가 실행되면 login.js도 실행되어 사용자의 아이디와 비밀번호를 받아올 수 있게 되는 것이다. 

<input id="id" type="text" placeholder="아이디"/>

입력받을 부분에 위와 같이 id를 지정하여 처리한다.

 

2. js/home의 login.js

"use strict";

//html에 입력된 아이디와 비밀번호를 js에서 제어해야함
//DOM-> javascript에서 html에 존재하는 데이터들을 기져와 제어할 수 있게하는 인터페이스 
//형식: const id = document.querySelector("선택자");
const id = document.querySelector("#id"),
    psword = document.querySelector("#psword"),
    loginBtn = document.querySelector("#button");

loginBtn.addEventListener("click", login);

function login() {
    const req = {
        id: id.value,
        psword: psword.value,
    };
    
    //아이디, 비밀번호 서버에 전달
    //fetch(전달할 경로, 전달할 데이터)
    fetch("/user/login", {
    
        method: "POST", //body로 데이터 전달할 때는 POST로 전달해야함
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req), //req를 JSON형태로 감싸줌
        
    })
        .then((res) => res.json()) //req해서 서버에서 보낸 res 받기
        .then((res) => {
        
            if(res.success){ //로그인 성공 시 루트로 이동
            
                location.href = "/";
                
            } else { //로그인 실패 시 실패 메세지 띄움
            
                alert(res.msg); 
                
            }
        })
        
        //에러처리
        .catch((err) => {
        
            console.error(new Error("로그인 중 에러 발생"));
            
        });
}

 

ejs파일에서 지정한 아이디에 입력된 값을 가져와 변수에 저장한다.

'button' 으로 id를 지정한 로그인버튼도 제어할 수 있게된다. 

loginBtn.addEventListener("click", login);

로그인버튼이 클릭되었을 때 login이라는 함수를 실행시키는 코드이다. 

login함수를 뜯어서 살펴보면,

const req = {
        id: id.value,
        psword: psword.value,
    };

먼저 input타입 요소(아이디, 비밀번호 입력 칸)에서 사용자가 입력한 value를 가져와 req라는 딕셔너리에 저장한다. 

//아이디, 비밀번호 서버에 전달
    //fetch(전달할 경로, 전달할 데이터)
    fetch("/user/login", {
    
        method: "POST", //body로 데이터 전달할 때는 POST로 전달해야함
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req), //req를 JSON형태로 감싸줌
        
    })

그 뒤에 이 값을 서버로 전달한다. 이때 fetch API를 사용한다. 

body로 데이터를 전달하므로 POST형태로 데이터를 전달하며 body에 위에서 만들어놓은 req딕셔너리를 JSON형식으로 변환하여 서버에 전달한다. 

 

※fetch API란? ajax통신의 기능 중 하나로, 자바스크립트 => 서버로 네트워크 요청(request)을 보내고 응답(response)을 받을 수 있도록 해주는 메서드. Promise 기반으로 이루어져 있다. 

 

이렇게 데이터를 서버에 전달하고 나면 서버에서 여러가지 처리 과정을 거쳐서 { success: true , msg: '로그인에 실패' } 의 형식으로 응답을 보내준다. 다음 코드는 서버에게 이러한 응답을 받고난 뒤에 실행된다. 

 

.then((res) => res.json()) //req해서 서버에서 보낸 res 받기
        .then((res) => {
        
            if(res.success){ //로그인 성공 시 루트로 이동
            
                location.href = "/";
                
            } else { //로그인 실패 시 실패 메세지 띄움
            
                alert(res.msg); 
                
            }
        })
        
        //에러처리
        .catch((err) => {
        
            console.error(new Error("로그인 중 에러 발생"));
            
        });

서버에게 받은 응답이 여기에선 res로 들어온다. 이 응답을 다시 JSON형태로 불러와 처리한다.

만약 res의 success가 true로 오면 로그인이 성공한 것이고 그렇지 않으면 msg 메세지를 웹 알림으로 띄운다.

 

.catch를 사용해 에러를 처리한다. 

 

 

'한이음 > 웹페이지 제작' 카테고리의 다른 글

라우터 연결 및 라우터, 컨트롤러 분리  (0) 2021.12.30
express 서버 실행시키기  (0) 2021.12.30
로그인 구현절차(참고용)  (0) 2021.12.10
환경설정: (1) Nodejs 설치 후 VScode 터미널에서 실행불가 오류  (0) 2021.12.10
웹페이지 기획  (0) 2021.12.10
'한이음/웹페이지 제작' Related Articles more
Comments