Node-js-3

Node-js - Log in 기능 만들기

---

로그인에서 아이디, 패스워드를 받았을 때, 서버에서 입력값 비교, 처리 DOM, fetch, Restful API bodyParser, .then —

DOM으로 HTML 객체 제어하기 | 프런트 기능 구현

로그인 화면에서 아이디와 비밀번호 정보를 ‘로그인’ 버튼 누를 때, 서버로 옮기는 작업
DOM을 이용해서 한다. (document.queryselector) html 값을 이용한다.

js에서 ejs 내에 있는 값에 접근 불가.. 왜냐하면 js가 먼저 실행되기 때문이다.
-> script에 ‘defer’를 이용해서 접근 가능하도록 하자. (async?)

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

로그인 버튼 클릭 시 아이디와 비밀번호를 객체로 받는다.

fetch | 프런트에서 서버로 데이터 보내기

경로는 보통 백엔드 개발자가 서버 경로 개발 그리고 해당 경로를 요청하는 데 그 해당 경로에는 이미 API가 만들어져 있어야 한다.
API 만들어져있다는 가정을 하고 전달 과정 개발.

fetch를 통해 로그인 경로에 전달을 해준다.

fetch("/login", {
  method: "POST", //restful API? -> 메서드 이용
  header: {
    "Content-Type": "apaplication/json",
  },

  body: JSON.stringify(req), // 데이터
});

body에 데이터를 실어서 보내는데 method와 header가 필요하다.
-> method, header는 RESTful API를 따른다.

REST API(RESTful API, 레스트풀 API)란?
REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻합니다. REST는 Representational State Transfer의 줄임말입니다.

API(Application Programming Interface)란?
애플리케이션 소프트웨어를 구축하고 통합하는 정의 및 프로토콜 세트입니다.
때때로 API는 정보 제공자와 정보 사용자 간의 계약으로 지칭되며 소비자에게 필요한 콘텐츠(호출)와 생산자에게 필요한 콘텐츠(응답)를 구성합니다. 예를 들어 날씨 서비스용 API에서는 사용자는 우편번호를 제공하고, 생산자는 두 부분(첫 번째는 최고 기온, 두 번째는 최저 기온)으로 구성된 응답으로 답하도록 지정할 수 있습니다.

출처: Redhat-Restful API

자세한 설명. 출처:link

Rest : 쉽게 말하자면, 사이트 구성 원리, 사이트를 어떻게 구성할 것인가?
즉, Restful API는 Rest방식을 따르는 API를 의미

(REpresntatiional : 표현, State : 상태, Transter : 전송) : 자원의 표현을 가지고 자원을 전송한다.

자원(Resource) : URI

• /feed/subscriptions

표현(Representational) : Header ex) 받고 싶은 응답 타입, 클라이언트가 전달하는 응답 타입

• “Content-Type” : “text/html”, “image/gif”
• “Accept” : “text/html”, “image/png”

상태(State) : Method (HTTP method)

• GET 조회, POST 생성, PUT 수정, DELETE 삭제, PATCH 자원의 일부 수정..etc

Restful API 설계 원칙 : 1번만 설계해주면 된다. 2~6번은 알아서 설계가 되어있다.

1. Uniform Interface
2. StateLess
3. Cacheable
4. Code on demand
5. Layered System
6. Client / Server

출처: woorimIT

로그인 API 만들기 in 서버 | 프런트의 요청데이터 파싱

rendering 해주는 함수를 output 객체로 넣어 분리해준다.

const output = {
home: (req, res) => {
res.render("home/index");
},

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

login.js에서 request해주는 데이터를 home.ctrl.js에서 처리할 수 있게 만들어주기 그리고 index.js에서 데이터를 처리할 수 있는지 본다.

login.js

function login() {
const req = {
id: id.value,
pwd: pwd.value,
};

fetch("/login", {
method: "POST", //restful API? -> 메서드 이용
header: {
"Content-Type": "application/json",
},
body: JSON.stringify(req), // 데이터
});
}

home.ctrl.js

const process = {
login: (req, res) => {
console.log(req.body);
},
};

index.js

router.post("/login", ctrl.process.login);

하지만 아직 받을 수 없다. -> body parsing 해주는 모듈 설치

app.js
const bodyParser = require("body-parser");

terminal npm i body-parser -s ( -s : save라는 의미로 packages안에 dependencies안에 명시된다. )

그래도 안된다. -> 미들웨어 등록해줘야한다.

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

-> deprecated 오류 : 사용하지 않는다라는 뜻으로, express 모듈을 사용하면 해결된다.

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

**데이터를 출력할 때, 저장버튼 연속으로 누르지 말기 -> 이거 때문에 잠시 오류 생긴듯 ?

로그인 인증 기능 만들기 in 서버 | 유저 데이터 만들기

로그인 시에 서버에 있는 정보와 로그인 정보가 일치하는지 확인하는 함수를 만든다.
확인할 users 객체를 만들어주고 req가 왔을 때 이 요청을 처리하는 객체인 process에 user와 비교하는 함수와 response를 return 하는 함수를 만들어준다.

home.ctrl.js

const users = {
id: ["hyunsoo", "rlagustn", "gustn"],
pwd: ["1234", "5678", "9012"],
};

const process = {
login: (req, res) => {
const id = req.body.id,
pwd = req.body.pwd;

    if (users.id.includes(id)) {
      const idx = users.id.indexOf(id);
      if (users.pwd[idx] === pwd) {
        return res.json({
          success: true,
        });
      }
    }

    return res.json({
      success: false,
      msg: "로그인에 실패했습니다.",
    });

},
};

res.json을 통해 응답을 날렸을 때, req했던 함수(fetch)에서 응답함수를 받으려면 다음과 같이 .then 매서드를 이용한다.

login.js

fetch("/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(req),
}).then((res) => console.log(res.json()));

여기서 console을 통해 응답함수의 json값이 도착하는데, 다음과 같이 Promise 객체가 도착하게 된다.

설명 : res.json()의 반환 값은 Promise다. 기본 res의 반환 값은 Response 스트림인데, “.json()” 매서드를 통해 Response(응답) 스트림을 읽을 수 있다.
Response는 데이터가 모두 받아진 상태가 아니다. “.json()”으로 Response 스트림을 >가져와 완료될 때까지 읽는다. 다 읽은 body의 텍스트를 Promise 형태로 반환한다.
-> 개인적으로 공부하기..

then을 한번써서 res를 보이게 하면 객체 안에 값이 나오게된다.

.then((res) => res.json())
.then(console.log);

서버의 응답데이터 처리

then후 응답 값에 따른 조건을 설정해준다.

.then((res) => res.json())
.then((res) => {
if (res.success) {
location.href = "/";
} else {
alert(res.msg);
}
})
.catch((err) => {
console.error(new Error("로그인 중 에러 발생"));
});

---