비밀번호 암호화 with crypto-js

실무에서 회원을 생성할 때 비밀번호를 백엔드 측에서 암호화해서 보내달라고 요청을 해서 선임에게 여쭤보았더니 우리 회사는 crypto-js를 활용해서 암호를 해쉬화 해서 넘겨준다고 들어서 집에 와서 실습을 다시 한번 해보았다.

먼저 아래의 코드를 실행해준다.

bash

1npm install crypto-js

bash

1npm install --save @types/crypto-js

다음으로 실습 코드는 아래와 같다.

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21import React, { useState } from "react";

import { SHA256 } from "crypto-js";

export default function HashPwd() {
  const [pwd, setPwd] = useState("");
  const password = pwd;
  const hashedPassword = SHA256(password).toString();

  const handleSubmit = () => {
    console.log(hashedPassword);
  };
  return (
    <>
      <input type="password" onChange={(e) => setPwd(e.target.value)} />
      <button type="submit" onClick={() => handleSubmit()}>
        제출
      </button>
    </>
  );
}

실무에서는 yarn을 통해서 설치해 주었는데 집에서는 vite로 만든 리액트 프로젝트여서 javascript 버전 차이가 발생하였다. require문 대시 import문을 사용하였다.

오늘도 또 하나 배웠다!

비밀번호 암호화 with crypto-js

기술 정리의 다른 글