❗️본 글은 기존에 라이브러리 코드를 추출하여 RN 코드로 변경하는 과정을 담은 글입니다.
결론만 확인 하실 분은 여기를 눌러주세요!
이번에 회사에서 모바일 쿠폰과 관련된 업무를 맡게 되었다. 자세한 내용을 기술할 수는 없지만, 간략히 말하자면 우리가 흔히 사용하는 기프티콘을 만들 수 있는 모듈을 만들어보라는 업무를 부여받았다. 사실 라이브러리를 검색하여 이용해볼까 싶었지만 React Native와 관련된 바코드 생성 라이브러리가 드물기도하고, 있다고 하여도 사용자가 너무 적거나, 개인 프로젝트성으로 올라온 모듈들이 대부분이라 비즈니스 프로젝트에 넣어서 쓰기에는 부담이 있다고 팀에서 판단하여 직접 만들어볼 것을 제안받았다. 지난번 사내 달력 라이브러리를 만들어본 경험을 살려서 이번에 만드는 것도 npm에 올려서 해봐야겠다고 생각했으나 아쉽게도(?) 이번에는 앱 프로젝트에 직접 주입하는 방식으로 진행하게되었다. 아무래도 React Native가 버전관리가 까다로운 만큼, 외부에서 환경 설정을 따로해서 작업하는 방식이 추후 어떤 문제를 발생시킬지 모르기 때문에, 작업 사이즈대비 효율을 생각했을 때 이 방식이 훨씬 나을 듯 하여 이렇게 작업을 하게 되었다.
본 글은 바코드 코드를 구현하는 과정을 보여주는데 있는것이 아닌 구현하고자 하는 기능의 샘플링을 보고 본인의 입맛에 맡게 변경할 수 있다는 것을 같이 느껴봤으면 좋겠습니다.
이 작업을 진행하기전 아무생각없이 라이브러리를 갖다 쓰던 저의 반성도 같이 느낄 수 있었으면 좋겠습니다.
직접 만들기로 하였지만, 처음부터 끝까지 구현하는 작업은 아니다. 다행스럽게도 Barcode value를 encode해주는 JS 라이브러리(JsBarcode)가 있다.
Commit 기록을 보면 알 수 있듯이 최근까지 꾸준히 관리되고 있으며 npm 사이트에서 확인할 수 있는 것 처럼 꽤나 많은 사용자를 가지고 있다. 지원 중단을 걱정할만한 라이브러리가 아니라 안심하고 사용할 수 있을 것으로 보인다.
내가 할 작업은 해당 라이브러리를 이용해 React Native용 바코드 생성 컴포넌트를 만드는 작업이다. 해당 라이브러리는 아무래도 Web에서 사용할 용도이기 때문에 React Native에서 사용할 수 있도록 따로 작업을 해주어야한다. 그러면 작업을 시작하기에 앞서 JsBarcode가 어떤 구조로 이루어져 있는지 파악해보자. JsBarcode 깃헙을에서 살펴봐도 좋지만 나는 VSC에서 직접 살펴보는 것을 좋아한다. Fork를 찍어서 내 Github에 들고온 후 프로젝트를 클론 받도록하겠다.
$ git clone [email protected]:{본인 깃헙 아이디}/JsBarcode.git