[포스코x코딩온] 'async'와 'await'을 활용한 회원가입

2023.08.09 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] MySQL과 연동하고 MVC 패턴을 적용하여 회원가입, 로그인, 회원정보 수정 및 탈퇴 기능구현

[포스코x코딩온] MySQL과 연동하고 MVC 패턴을 적용하여 회원가입, 로그인, 회원정보 수정 및 탈퇴

이전글과 다른 코드를 보여드리겠습니다.

 

mysql2/promise 모듈을 사용하여 콜백을 사용하지 않고 'async'와 'await'을 사용하겠습니다.

---

• mysql2 패키지를 사용하기 위한 준비
  • 패키지 다운로드

npm install mysql2

mysql2 패키지 자체는 콜백 기반의 API를 가지고 있다. 그러나 mysql2/promise 모듈은 promise를 지원하며 비동기적인 코드를 보다 간결하게 작성할 수 있게 도와준다. 이 모듈을 사용하면 콜백을 사용하지 않고도 'async'와 'await'을 사용하여 데이터베이스 쿼리를 처리할 수 있다.
따라서 mysql2/promis를 사용하면 데이터베이스 쿼리를 비동기적으로 실행하고 결과를 프로미스로 처리할 수 있으며 코드를 더 쉽게 읽고 유지보수에 용이하다.

ejs에 대한 코드는 동일하니 생략하겠습니다.

---

async/await

• JS에서 'async'와 'await'은 비동기 코드를 더 쉽게 작성하고 관리할 수 있게 도와주는 문법
• async: 함수 선언 앞에 'async' 키워드를 붙이면 해당 함수는 비동기 함수가 된다. 비동기 함수는 내부에 'await' 키워드를 사용하여 프로미스가 해결될 때까지 기다릴 수 있다.
• await: 비동기 함수 내에서 사용되며, 프로미스가 해결될 때까지 함수의 실행을 일시 중단한다. 프로미스가 해결되면 그 결과를 반환하고 함수 실행을 계속한다.

try/catch

• try: 'try'블록 내에는 예외가 발생할 수 있는 코드를 작성한다. 이 블록 내에서 예외가 발생하면 프로그램의 제어가 'catch'블록으로 전달된다.
• catch: 예외가 발생한 경우 실행되는 블록이다. 'try'블록 내에서 발생한 예외를 'catch' 블록에서 잡아서 처리할 수 있다.

---

controller/Cuser.js

• 이전 코드

const User = require("../model/User");

exports.postSignUp = (req, res) => {
  console.log("회원가입 Brower 데이터 받아옴req1: ", req.body);
  User.postSignUp(req.body, (result) => {
    console.log("회원가입 정보3: ", req.body);
    res.send({ result: result, msg: "회원가입 완료" });
  });
};

• 적용 코드
  • post_signup함수를 비동기 함수로 정의
  • 먼저 'try'블록에 있는 코드부터 실행이 된다.
  • /model/User.js에 있는 post_signup 함수가 실행될때까지 기다리고 오류 없이 실행되면 res.send({result: true})가 실행된다. 오류가 발생되었다고 오면 'catch' 블록에 있는 코드가 실행된다.

import * as User from "../model/User.js";
export const post_signup = async (req, res) => {
  try {
    await User.post_signup(req.body);
    res.send({ result: true });
  } catch (error) {
    console.log(error);
    res.send({ result: false });
  }
};

---

model/User.js

• 이전 코드

exports.postSignUp = (data, callback) => {
  console.log("회원가입 Controller에서 받아옴 data2:", data);
  const query = `INSERT INTO login (userid, name, pw) VALUES ('${data.userId}','${data.name}','${data.pw}')`;
  conn.query(query, (err, rows) => {
    console.log("signup", rows);
    if (err) {
      console.log(err);
      return;
    }
    callback(rows);
  });
};

• 적용 코드
  • 여기서도 마찬가지로 conn.query가 실행될 때까지 기다린다.

export const post_signup = async (data) => {
  try {
    const query = `INSERT INTO user1 (userid, pw, name) VALUES (?, ?, ?)`;
    const rows = await conn.query(query, [data.userid, data.pw, data.name]);
    return rows;
  } catch (error) {
    console.log(error);
  }
};

※ query문에 "?"을 사용한 이유

• SQL 쿼리의 매개변수를 동적으로 설정하고, SQL 인젝션 공격을 방지하기 위해서 사용
• 동적으로 매개변수 설정
  • "?"는 SQL 쿼리의 매개변수를 대체하는데 사용된다. 코드에서 '[data.userid, data.pw, data.name]'와 같이 배열로 매개변수를 전달한다. conn.query 함수는 query 문자열 내의 각 "?"를 배열의 값으로 대체하여 실제 데이터를 쿼리에 삽입한다. 이를 통해 데이터베이스 쿼리를 안전하게 실행할 수 있으며, 데이터 값에 따라 동적으로 쿼리를 생성할 수 있다.
• SQL 인젝션 방지
  • SQL 인젝션을 악의적인 사용자가 입력 데이터를 조작하여 데이터베이스에 대한 해로운 작업을 실행하는 공격이다. 이를 방지하기 위해 매개변수화된 쿼리를 사용하는 것이 좋다. "?"를 사용하여 데이터를 쿼리에 삽입하면 데이터 값이 이스케이프 되어 SQL쿼리로 해석되지 않는다.

※이스케이프(escape)

• 특수 문자나 예약어를 문자열 안에서 특별한 의미로 해석되지 않도록 하기 위해 사용되는 기술
• 특정 문자나 문자열을 이스케이프하면 해당 문자는 원래의 의미 대신 문자 그대로 처리된다.

---

이처럼 코드를 구성함으로써 코드 실행 중에 예외가 발생하더라도 전체 프로그램이 크게 중단되지 않고, 오류를 적절하게 처리할 수 있다.

 

https://github.com/DongHo-Kang/KDT-8-web/tree/597e317ff4bd41e9c3a8f8033336a8ba6c8b25d3/230809_mvc_result2