우리밋 백엔드 맛보기 정리 [로그인, 회원가입 로직]

서론

 

유튜브를 통해 우연히 정말 좋은 양질의 강의를 찾게 되었다. woorimIT님이 올려주신 백엔드 맛보기라는 주제의 강의인데, 사소한 것부터 정말 체계적이고 실전에서 쓰이는 형식 그대로 알려주셔서 많은 도움을 받았다.

nodejs를 이용해 로그인 기능을 백엔드로 어떻게 구현하는지 알고 싶으신 분들은 참고하시면 좋을 것 같다. 강의 바로가기

 

본 게시물은 강의를 들으면서 알게 된 내용들을 메모하면서 정리한 내용이다.

 

ejs란?

ejs는 Embedded JavaScript Template의 약자로 nodejs 진영에서 많이 사용하는 템플릿 엔진이다.

html 파일과 거의 유사하다고 생각하면 되나, 자바스크립트가 내장되어 있는 html 파일이다.

여기서는 ejs파일의 강점을 크게 이용하지는 않았다.

 

ejs에 js파일 연결하기

프런트를 위한 JS 파일을 만들 때 ejs 파일에서 JS 파일의 경로를 추적하지 못하기 때문에 추가적으로 연결 작업을 필요로 한다.

 

ejs 파일의 head 부분에 다음을 추가하고,

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

app.js에서 정적 경로를 접근할 수 있게 세팅한다.

app.use(express.static(`${__dirname}/src/public`));

 

라우팅

주소 연결을 좀 더 깔끔하게 하기 위한 작업이다.

 

app.js에서 use를 이용해 다음과 같이 미들웨어를 등록한다.

const home = require("./src/routes/home");
app.use("/", home);

그리고 index.js

"use strict";

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

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

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

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

module.exports = router;

 

nodemon

서버 파일의 코드를 수정할 때마다 서버를 재시작해주는 번거로움이 있다. 이 번거로움을 해결할 유용한 도구가 바로 nodemon이다. 코드 변화를 감지하고 자동으로 재시작을 해준다.

npm을 이용하여 글로벌로 설치를 해주어야 한다.

npm i nodemon -g

 

단, 나의 경우 vsc에서 wsl2을 이용해 코드를 작성하고 있는데 이 환경에서 잘 되지 않았다.

구글링을 해보니 wsl에서 충돌이 있는 것으로 파악이 되었다. 그 뒤로 powershell에서 진행하니 문제없이 진행이 된다.

 

DOM으로 HTMl 객체 제어하기

DOM? Document Object Model

→ 일종의 인터페이스. JS에서 html에 존재하는 데이터를 가져와서 제어할 수 있다.

 

html 태그에 id 선택자를 추가 한 뒤에, js 파일에서 querySelector를 이용해 가져올 수 있다.

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

loginBtn.addEventListener("click", login);

 

주의할 점은, js파일에서 console.log를 했을 때 제대로 출력되지 않는 것을 확인할 수 있다.

이는 데이터를 가져오기 전에 출력하기 때문에 그런 것이다.

어떻게 해결하냐? script파일을 가져올 때 defer 옵션을 줘야 한다.

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

 

json 통신

프런트 단에서 json 전송 :: fetch

브라우저에서 작성한 id, psword를 서버로 전달하는 네트워크 통신을 도와주는 함수

 

프런트 단에서 fetch를 이용해 전송할 때, 먼저 전송할 데이터는 json 형태로 보낼 것이기 때문에 JSON.stringify로 감싸준다. 문자열 형태로 전달된다.

 

서버에서 응답 json을 읽기 위해서 then을 통한 추가적인 작업이 필요하다.

function login() {
  if (!id.value) return alert("아이디를 입력해주십시오.");
  if (!psword.value) return alert("비밀번호를 입력해주십시오.");

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

  fetch("/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(req),
  })
    .then((res) => res.json())
    .then((res) => {
      if (res.success) {
        location.href = "/";
      } else {
        if (res.err) return alert(res.err);
        alert(res.msg);
      }
    });
  }

 

서버 단에서 json 수신 API

서버 단에서 이 json을 받으려면 API를 구성해야 한다.

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

 

프런트에서 body로 보낸 데이터를 서버에서 req.body를 읽어 보면 제대로 읽어지지 않는 것을 확인할 수 있다.

이를 제대로 해석하기 위해서 "body-parser"라는 모듈을 사용해야 한다. 또한, 관련 미들 웨어를 등록해주어야 한다.

const bodyParser = require("body-parser");

app.use(bodyParser.json());
// URl을 통해 전달되는 데이터에 공백, 한글 등과 같은 문자가 포함될 경우 제대로 인식되지 않는 문제 해결
app.use(bodyParser.urlencoded({ extended: true }));

 

메모

package-lock.json

이 파일은 왜 필요하냐? 좀 더 명확한 버전 관리를 위함이다. package.json 보다 더 자세한 정보들과 버전 정보들이 담겨 있다.

 

.gitignore

node_modules 앞에 **를 추가해야 모든 폴더를 탐색해서 무시해 준다.

 

pending

데이터를 전부 읽어오지 못했다는 뜻

 

promise를 반환하는 것은 시간이 다소 소요된다. (비동기적으로 동작하는 nodejs의 특징으로, 장점으로 불린다.)

따라서 먼저 실행되지 않게 하기 위해서 기다리라는 await를 붙여주어야 한다.

 

promise를 반환하는 애한테만 await를 옵션으로 부여할 수 있고, 비동기 함수를 뜻하는 async라는 함수 안에서만 사용이 가능하므로 await 옵션을 주려면 해당 함수에 async 옵션도 주어야 한다.

 

postman

서버 API 테스트 도구이다.

curl도 쓰이는 도구이기는 하지만 postman을 더 자주 쓴다.

 

Web Server ↔ WAS

일반적으로 웹서버라고 하면 WAS (Web Application Server)를 의미한다. 우리가 구현한 것들도 WAS이다.

 

Web Server?

클라이언트에서 요청이 오면 단순히 서버에서 정적 데이터를 전달만 해준다.

 

WAS?

요청을 받아서 데이터를 가공하고 로직이 처리된 후 그 결과를 응답한다.

 

결국 데이터를 가공하는지 안 하는지의 차이이다.

 

dotenv

이것을 사용하면 운영체제(os)에 상관없이 환경변수를 등록하고 가져올 수 있다.

파일명은 ".env"이다.

환경 변수 중 NODE_ENV로 실제 서비스 서버인지 개발용 서버인지 구분하기도 한다.

 

로그 관리 모듈

1. morgan - 사용하기 제일 쉽다.

2. winston - 제일 대중적이다.

 

해당 모듈들을 사용할 때 npmjs.com에서 검색해서 참고하면 좋다.

 

http 상태 코드

• 200번대 : 정상응답
• 300번대 : 페이지가 이동됐을 때
• 400번대 : 클라이언트에서 실수했을 때
• 500번대 : 서버에서 실수 했을 때

자세한 내용은 http 상태 코드 mdn이라고 구글링 하면 나온다.

 

 

참조

woorimIT - 백엔드 맛보기