이전에 프로젝트에 결제모듈을 연동하면서 해시 생성이 필요했는데
그 부분을 프론트엔드 파트에서 처리하게 되어 잊기 전에 적어보려 합니다!
사실 이건 Next.js나 react에서 별도의 로직을 통해 생성하는 것이 아닌
node.js의 내장함수인 crypto를 이용하는 방법입니다.
사용하기에 앞서 우리는 crypto라는 친구를 import 해야 합니다!
import를 하고 마우스오버 해보면 아래와 같이 나오게 되는데,
crypto의 간단한 사용방법을 알려줍니다.
저는 SHA256해시를 생성하길 원했고, 아래와 같은 간단한 로직으로 해시를 생성하였습니다.
간략하게 설명하자면..
base_str : 해시를 생성할 문장 또는 단어를 입력하는 부분
crypto.createHash("sha256") : 크립토를 이용해 sha256해시를 생성하겠다는 뜻
나는 결제모듈 회사에서 지정한 대로 청구서ID와 전화번호, 가격을 base_str에 넣어주었고
그걸 토대로 sha256해시를 만들었습니다.
위의 사진처럼 인풋박스로 값을 입력 받게 되고
결제 요청 버튼을 눌러 해시를 생성함과 동시에 결제요청이 날아가게 로직을 구현 하였습니다.
그럼 console.log를 통해 SHA256해시가 잘 만들어 졌는지 확인해 보겠습니다!
콘솔창을 확인해보니 위와같이 해시가 생성되었습니다!
간단하지만 생소한 개념인데 부족함이 많은 글이지만..
이 글이 누군가에게도 도움이 되면 좋겠습니다!
이 글은 이전 블로그에서 옮겨 온 글입니다.
같이보면 좋은글
[DEV] 암호화? 단방향 그리고 양방향?
블로그를 운영하면서 가장 조회수가 높은 글이 하나 있는데... React 환경에서 sha256 해시 생성에 대한 내용을 적은 아티클 입니다. 그래서 좀더 알아보고자 하는 생각으로 암호화에 대해 알아보려
takd.tistory.com
'DEV > React, Next' 카테고리의 다른 글
[Next] 정적 라우팅과 동적 라우팅 (0) | 2023.03.07 |
---|---|
[React/Next] NextJS의 장점 (0) | 2023.02.27 |
[Next] next/legacy/image 사용해보기 (1) | 2023.02.27 |
[React] JSX는 무엇일까? (0) | 2023.02.13 |
[React] 라이프 사이클(클래스형) (0) | 2023.02.13 |