문제 상황
Swap 기능을 위한 블록체인 트랜잭션 로직을 구현이 필요했습니다.
해결 과정
블록체인 트랜잭션을 발생시키는 로직을 최대한 추상화하여 각 페이지에서 일관되게 사용하도록 커스텀 훅으로 구현할 필요가 있었습니다.
어떻게 구현할까?
우선, 블록체인에 트랜잭션이 발생되는 원리부터 정리했습니다.
트랜잭션이 발생되기 위해서는 크게 이를 쏘는 객체인 client와 protobuf 타입의 message가 필요합니다.
[지갑 연결 시, 생성된 client 활용]
// useSwap.ts
export const useSwap = () => {
const wasmClient = useRecoilValue(getWasmClient);
// ...
return {
swap_실행,
};
};
TypeScript
복사
client는 사용자가 지갑을 연결할 때, 생성되어 Recoil의 atom에 전역 상태로 저장됩니다. Recoil의 useRecoilValue를 사용해서 wasmClient를 불러옵니다.
[supernova.js 라이브러리 활용]
// useSwap.ts
import { contracts } from "supernovajs";
const 메시지_composer = new contracts.Pair.PairMessageComposer(
지갑 주소,
컨트랙트 주소,
);
const swap_메시지 = 메시지_composer.swap(
{
offerAsset: // 바꿀 자산에 대한 정보
to: 지갑 주소, // 스왑된 자산을 받을 주소
},
[], // 바꿀 자산의 수량
);
TypeScript
복사
message는 사용자의 Input 값과 지갑 주소의 상태로 구성된 객체를 supernova.js 라이브러리를 통해Protobuf 형식으로 변환하여 트랜잭션을 보낼 수 있도록 구성됩니다.
코드 구현
// useSwap.ts
import { contracts } from "supernovajs";
export const useSwap = () => {
const wasmClient = useRecoilValue(getWasmClient);
const 지갑_주소 = useRecoilValue(getNovaAddress);
const 스왑_실행 = useCallback(
async (
// 여러 정보들
) => {
const 메시지_composer = new contracts.Pair.PairMessageComposer(
지갑 주소,
컨트랙트 주소,
);
const swap_메시지 = 메시지_composer.swap(
{
offerAsset: // 바꿀 자산에 대한 정보
to: 지갑 주소, // 스왑된 자산을 받을 주소
},
[], // 바꿀 자산의 수량
);
return 트랜잭션_실행_함수(메시지, wasmClient, 지갑_주소);
},
[지갑_주소, wasmClient],
);
return {
스왑_실행,
};
};
TypeScript
복사
구현한 useSwap.ts 를 간단히 적어보자면, 위와 같습니다.
useCallback은 React에서 함수를 메모이제이션하기 위해 사용됩니다. 이 코드에서 useCallback을 사용하는 이유는 executeSwap 함수가 의존성 배열에 있는 값들(지갑_주소, wasmClient)이 변경될 때만 다시 생성되도록 하기 위함입니다.
이는 불필요한 함수 재생성을 방지하여 성능을 최적화하고, 렌더링 사이클에서의 계산 비용을 줄이기 위한 일반적인 React 최적화 방법 중 하나입니다.
클라이언트를 깊은 복사한 이유
해결 결과
Swap 기능을 사용할 때, useSwap 이라는 커스텀 훅을 통해 블록체인 트랜잭션을 쏘게 되어 자산을 스왑할 수 있게 되었습니다.
커스텀 훅 개발 : 재사용성과 코드 가독성을 위해 복잡한 로직을 캡슐화하는 능력 어필
트랜잭션 실행 추상화 : 사용자의 입력을 기반으로 메시지를 구성하고 오류 처리를 통해 트랜잭션을 브로드캐스트하는 것까지 트랜잭션의 여러 단계를 처리하는 원활한 프로세스 추상화
UX를 위한 토스트 알림을 통해 실시간 피드백을 제공
⇒ 기술력 뿐만 아니라, 사용자 친화적인 애플리케이션을 만들기 위한 노력을 보여준다.
자기소개서에서 재사용성과 가독성을 위해 복잡한 로직을 캡슐화하는 능력을 보여주는 커스텀 훅(useSwap)의 개발을 강조하세요. 동적 입력을 기반으로 메시지를 작성하는 것부터 오류 처리를 통해 트랜잭션을 브로드캐스트하는 것까지 트랜잭션의 여러 단계를 처리하는 원활한 프로세스(executeContractTx, executeTx)로 트랜잭션 실행을 추상화한 방법을 강조하세요. 타사 라이브러리(예: 로다쉬, 코스와즘) 통합에 대한 숙련도와 토스트 알림을 통해 실시간 피드백을 제공함으로써 사용자 경험에 대한 관심을 언급하세요. 이는 기술력뿐만 아니라 사용자 친화적인 애플리케이션을 만들기 위한 노력도 보여줍니다.