이제 login 페이지에서 프론트를 만져야하는데..

HTML에 입력된 값을 어떻게 이용하지?

JS가 받아 올수 있나?

DOM을 이용하자! ⇒ 일종의 인터페이스, 이것을 이용해 JS에서 HTML의 데이터를 제어하자

대한민국에서 1등한 개발자의 놀라운 발표 | 심사위원 전원 만점!? | Javascript와 DOM

DOM을 이용해 접근하기

"use strict";

const id = document.querySelector("#id"), // id태그의 이름이 id여서 겹치니 , 태그에 id로 부여되어 있는 "id"를 가져오기 위해 #을 씀
    password = document.querySelector("#password"),
    loginBtn = document.querySelector("button"); // button 태그는 1개이니깐 id 설정 안해도 될듯

console.log(id) // 비동기처리 되기전에 먼저 가져오기때문에 null이 뜸, 그래서 defet나 asycn를 이용해야함 || defer 하니 잘됨

loginBtn.addEventListener("click", login)

function login() {
    const req = {
        id: id.value, // 해당 id의 값을 가져오자
        password: password.value,
    }
    console.log(req);
}

이런식으로 HTML 태그에 접근할수 있다.

하지만, 비동기 처리를 늘 생각해한다

데이터가 오기전에 코드를 실행할수 있기 때문이다

데이터가 올때까지 기다려 defer (= asycn)

login.ejs

<!-- 동기 처리 하기 위해서 defer 사용-->
    <script src="/js/home/login.js" defer></script>

defer을 이용해 동기 처리를 해주자

"use strict";

const id = document.querySelector("#id"),
    password = document.querySelector("#password"),
    loginBtn = document.querySelector("button");

console.log(id)

loginBtn.addEventListener("click", login)

function login() {
    const req = {
        id: id.value,
        password: password.value,
    }
    // 어떤 경로로 통신을 할지 정해야함 = 백엔드가 해줌, index.js api 만들어 줘야함, 지금은 안만들었는데, 만들었다고 치자
    fetch("/login", {
        method: "POST", // REST API에 맞춰 보냄
        headers: {
            "Content-Type": "application/json" // json으로 보낸다고 말해줌
        },
        body: JSON.stringify(req) // JSON 형태로 바꿔서 body에 실어 보내자
    })
}

하지만 지금은 백엔드가 fetch에대해 API를 구성하지 못했다고 가정하자

이제 그럼 백엔드에서 API를 만들어주자

라우터에서 연결해주면

"ues strict"

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

const ctrl = require("./home.ctrl")

router.get("/", ctrl.output.home); // 보기 훨씬 좋아 졌다. 해당 url로 들어온 요청을 보여준다는 느낌을 준다

router.get("/login", ctrl.output.login);

router.post("/login", ctrl.procces.login); // 수행한다는 느낌으로 procces라 지어주자 , 이제 ctrl 에 가서 추가해주자

//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄

컨트롤러에서

const output = {
    home: (req, res) => {
        res.render("./home/index") // views는 지정했기땨문
    },

    login: (req, res) => {
        res.render("./home/login")
    }
}

const procces = {
    login: (req, res) => {
        console.log(req.body); // 이렇게 하면, req의 body를 볼 수잇는데 모듈 없이는 해석을 하지 못한다. 
    },
}

module.exports = {
    output,
    procces
};

이쁘게 포장을 해서 연결해주면 된다?

왜 undefined가 나올까?

body를 파싱할려면 모듈이 필요해서 다운 받는다

bodyParser 추가해주고, 다운

const bodyParser = require("body-parser") // npm i body-parser -s로 다운 받아주자

"use strict"

//모듈
const express = require("express");
const app = express();
const bodyParser = require("body-parser") // npm i body-parser -s로 다운 받아주자

//라우팅
const home = require("./src/routes/home")

//맵 세팅
app.set("views", "./src/views")
app.set("view engine", "ejs")
app.use(express.static(`${__dirname}/src/public`)) // __dirname은 app.js의 위치를 반환함, 그 위치에서 public 폴더를 정적 경로로 추가하겠다는 뜻 / js를 publicdmfh 이동
app.use(bodyParser.json()); // body를 json으로 해석 가능
app.use(bodyParser.urlencoded({ extended: true })); // url들이 한글, 주석 같은 문제를 해결함
app.use("/", home);

module.exports = app;

이렇게 app.js까지 세팅을 해주면

body가 잘 파싱되는걸 알수있다