npm-react-inicis 후기

https://www.npmjs.com/package/@hellojh/react-inicis

@hellojh/react-inicis

 

회사 프로젝트에서 이니시스 결제가 있을 때면 팀원들은 제 코드를 그대로 사용했습니다.

단순 한두 줄의 코드가 아니라 모바일 분기 처리까지 합하여 거의 300줄이 되어갔습니다.

 

똑같은 코드, 똑같은 작업...

이런한것들이 비효율적이라고 생각하여 라이브러리를 만들게 되었습니다.

 

만들기 전 몇 가지 계획을 세웠습니다.

* 확장성 좋게 만들기

컴포넌트를 제공하기보다는 실행 조건을 추가하고 싶었습니다.

 

* 쓰기 쉽게 만들기

다수의 개발자가 사용하기 때문에 누가 사용하든 쉽고 빠르고 정확한 코드를 원했습니다.  

 

* 복잡해지지 않기

코드의 양이 길어지고 복잡해진다면 그것은 라이브러리의 의미가 줄어든다고 생각합니다.

 

---

이렇게 큰 방향성을 잡으니 코드 구현은 쉬웠습니다.

단순하게 생각하면 이렇습니다.

"사용자가 결제 데이터를 넘겨주면 그 데이터를 이니시스 측에서 원하는 형태로 바꿔준다."

 

제가 한 작업은 아래와 같습니다.

1. SHA256

2. oid 생성

3. 타임스탬프 생성

4. 모바일 분기 처리

5. 테스트 상황 분기 처리

6. 결제 수단 분기 처리

 

모든 데이터 작업이 끝났다면 결제창을 띄우기만 하면 됩니다.

다른 라이브러리들을 사용하다 보면 컴포넌트를 제공하고 그것을 클릭해야만 이벤트가 일어납니다.

이는 확장성이 떨어진다고 생각합니다.

저는 프로젝트마다 이벤트를 필요로 하는 상황이 다를 것이라 생각하여 count 변수를 만든 후 

증가할 때마다 실행되도록 만들었습니다.

 

---

 

이니시스가 원하는 코드를 이해하고 문서만 잘 읽는다면 누구나 할 수 있는 작업입니다.

하지만 모든 것을 매 프로젝트마다 하기에는 코드의 양이 많고 반복적인 작업입니다.

저는 이러한 모든 것이 자동화되기를 원하여 npm-react-inicis를 만들었습니다.