[Node.js] fetch를 이용해 프런트의 정보를 서버로 보내기

·로그인 페이지에서 입력한 아이디와 비밀번호 받아오기

1) login.js파일에서 로그인 버튼을 눌렀을 때 동작하는 함수에 fetch 기능 추가하기

// login.js

function login() {
  const req = {
    id: id.value,
    pw: pw.value,
  };
  
  // login 경로에서 / http 메소드 중 POST 메소드를 사용하여 / 전달하는 데이터가 json형식임을 명시
  fetch("/login", {
    method: "POST"
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(req) // JSON 객체는 문자열로 감싸져서 출력됨
                                         // 그냥 req는 {id: "id", pw: "pw"} 형식
                                         // JSON.stringify(req)는 {"id": "id", "pw":"pw"}
  });
}

 

2) home.ctrl.js파일 원래는 경로에 따라 화면만 렌더링해주는 명령어만 있었지만 login에 대한 동작도 추가

// home.ctrl.js

"use strict";

// 화면 렌더링(지정된 경로의 주소로 접속했을 때 보이는 화면)
const output = {
    hello: (req, res) => {
        res.render('home/index');
    },
    login: (req,res) => {
        res.render('home/login');
    }
}

// 로그인 프로세스
const process = {
    login: (req, res) => {
        console.log(req.body) // 일단은 제대로 받아와지는지 확인을 위해 login.js 파일에서 body로 준 부분(id와 pw 값) console에 출력
    }
}

// 위의 모듈들을 index.js 파일에서 사용할 수 있도록 오브젝트로 빼주기
module.exports = {
    output,
    process,
}

 

3) index.js파일에서도 login 프로세스를 post를 사용할 수 있도록 코드 추가 및 home.ctrl.js에서 output으로 묶은 hello, login 모듈 에 대한 코드 변경

// index.js

"use strict"

const express = require('express');
const router = express.Router();

// home.ctrl.js에서 넘겨준 오브젝트 받기
const ctrl = require("./home.ctrl");

///////////////// 여기까지는 그대로 ////////////////////////////////

router.get('/', ctrl.output.hello); // output.hello로 변경하여 output안의 hello 모듈 사용할 수 있도록 변경
router.get('/login', ctrl.output.login); // output.login으로 변경하여 output안의 login 모듈 사용할 수 있도록 변경
router.post('/login', ctrl.process.login); // get이 아닌 post로 동작

module.exports = router; // 외부 파일(메인 파일인 app.js)에서 사용할 수 있도록 내보내기

 

4) app.js 파일에서 fetchdml body를 사용할 수 있도록 bodyParser를 등록

// app.js

const bodyParser = require("body-parser"); // home.ctrl.js 파일에서 login.js의 fetch함수에서 body로 넘겨준 것을 잘 받기 위한 모듈 설치

app.use(bodyParser.json()); // bodyParser 미들웨어 등록
app.use(bodyParser.urlencoded({extended: true})); // url을 통해 전달되는 한글, 공백 등의 문자가 포함될 경우 제대로 인식되지 않는 문제 해결

 -터미널에서 "npm install body-parser -s" 명령어로 body-parser 모듈 설치

 

5) 서버 가동 후 동작 확인

  -id와 pw를 입력하고 로그인 버튼을 누르면 터미널에 다음과 같이 id와 pw 값이 출력됨을 알 수 있음

  -id와 pw값 서버로 받기 성공