본문 바로가기

DEV/React, Next

[React, Node] Crypto를 통한 sha256해시 생성

thumbnail

 

이전에 프로젝트에 결제모듈을 연동하면서 해시 생성이 필요했는데

그 부분을 프론트엔드 파트에서 처리하게 되어 잊기 전에 적어보려 합니다!

 

example
예시

 

사실 이건 Next.js나 react에서 별도의 로직을 통해 생성하는 것이 아닌

node.js의 내장함수인 crypto를 이용하는 방법입니다.

 

사용하기에 앞서 우리는 crypto라는 친구를 import 해야 합니다!

import_crypto


import를 하고 마우스오버 해보면 아래와 같이 나오게 되는데,

crypto의 간단한 사용방법을 알려줍니다.

crypto_docs


저는 SHA256해시를 생성하길 원했고, 아래와 같은 간단한 로직으로 해시를 생성하였습니다. 

 

crypto_example
생성 로직

 

간략하게 설명하자면..

base_str : 해시를 생성할 문장 또는 단어를 입력하는 부분
crypto.createHash("sha256") : 크립토를 이용해 sha256해시를 생성하겠다는 뜻

 

나는 결제모듈 회사에서 지정한 대로 청구서ID와 전화번호, 가격을 base_str에 넣어주었고
그걸 토대로 sha256해시를 만들었습니다.

 

input_ value


위의 사진처럼 인풋박스로 값을 입력 받게 되고

결제 요청 버튼을 눌러 해시를 생성함과 동시에 결제요청이 날아가게 로직을 구현 하였습니다. 

 

그럼 console.log를 통해 SHA256해시가 잘 만들어 졌는지 확인해 보겠습니다!

 

result


콘솔창을 확인해보니 위와같이 해시가 생성되었습니다!

 

간단하지만 생소한 개념인데 부족함이 많은 글이지만.. 

이 글이 누군가에게도 도움이 되면 좋겠습니다! 

 

 

 

 

 

이 글은 이전 블로그에서 옮겨 온 글입니다. 

 

 

같이보면 좋은글

 

[DEV] 암호화? 단방향 그리고 양방향?

블로그를 운영하면서 가장 조회수가 높은 글이 하나 있는데... React 환경에서 sha256 해시 생성에 대한 내용을 적은 아티클 입니다. 그래서 좀더 알아보고자 하는 생각으로 암호화에 대해 알아보려

takd.tistory.com

 

반응형