로그인 / 회원가입 구현해보기 (3) 객체 제어, 로그인 API 만들어서 서버로 데이터 보내기

아이디와 비밀번호를 값들을 버튼을 누르면 서버로 전송해주어야 한다.

 

서버는 이 값들을 받아 로직을 처리하게 된다.

 

먼저 HTML 값들을 자바스크립트에서 제어하기 위해 DOM 객체를 사용해야한다.

 

id, psword => id와 psword의 값들을 가져오고 DOM객체로 받아들여주고

 

버튼은 이벤트리스너로 클릭 시 함수(로그인 함수)를 실행시켜주도록 한다.

 

const id = document.querySelector("#id"),

  psword = document.querySelector("#psword"),

  loginBtn = document.querySelector("button");

loginBtn.addEventListener("click", login);

 

 

이제 login 함수를 만들어 주어야 한다. (아이디와 패스워드 값을 가져와주는 함수)

 

요청 변수인 req를 오브젝트로 생성해준다. id와 psword 이고,

그 후 fetch 를 통해 서버로 전달해주어야 한다.

 

요청 전에 해당 경로에 API가 만들어져있어야 한다.

 

이를 라우터 쪽에 router.post 로 이를 만들어줘야한다.

 

먼저 경로가 있따고 가정하고, fetch 부터 제작해보도록 하자,

 

body를 JSON.stringify를 통해 req 데이터를 string으로 바꿔준다.

 

메서드는 "GET" 이 아닌 "POST" 로 전달해주어야 한다.

 

내가 전달하는 데이터가 제이슨 임을 알려주기 위해 헤더를 통해

 

타입을 명시해 주면 최종적으로 이런 코드가 완성된다.

 

fetch("/login", {

    method: "POST",

    headers: {

      "Content-Type": "application/json",

    },

    body: JSON.stringify(req),

  });

 

이제 API 만 제작을 해주면 된다.

 

라우팅 기능을 담당하는 home.ctrl.js 에서 process를 생성해주고

 

이 안에 로그인을 담당해주는 login 함수를 제작해준다.

 

const process = {

  login: (req, res) => {

    console.log(req.body);

  },

};

 

 

 

그 후 router.post("./login", ctrl.process.login); 을 통해 내가 입력한 

 

아이디와 비밀번호가 잘 출력 되는지 확인해보자,

 

 

이렇게 문제 없이 내가 입력한 아이디와 비밀번호 값을 req.body에 넣어서 출력할 수 있었다.

 

여기까지 대략 로그인 / 회원가입 구현의 반정도 했다고 볼 수도 있을것 같다.