본문 바로가기
개발/오픈소스

[오픈소스][JS] react-daumpost-hook

by ISA(류) 2021. 11. 20.

나는 오픈소스에 관심이 많다. 개발자라는 직업을 선택하고 장인이라는 것을 목표로 하는 입장에서는 당연히 기존의 구루들의 활동에 대해서 깊이는 아니더라도 자세히 알아볼 필요가 많았고, 그러다보니 그들이 말하는 오픈소스 활동 이라는 것에 많은 공감대를 가지게 되었다. 리액트 같은 멋진 오픈소스들을 접하면서 사용할때 마다 그런 가치들에 대한 긍정이 더욱 강화된 편이다.

 

본질적으로 실력을 키우고 개발자로 성공(실력을 인정받고 그만한 명예와 대우)하는 것을 목표로 삼은 입장에서는  여러 구루들의 활동을 간접적을 접할때 마다 나도 빨리 실력을 키워서 저런걸 하고 싶다 라는 생각을 가지게 되는 건 그렇게 이상한 편이 아니라고 생각한다.

 

실제로 내가 생각하던 수준의 오픈소스 활동은 아니지만 내가 기여 할 수 있는 기회가 있을때 마다 조금씩 기여를 위해서 노력해왔고, 이건 그런 과정 중에서 첫번째 오픈소스 기여였다. 정확히는 내가 만든 코드를 오픈소스로 처음 배포한 패키지였다.

 

react-daumpost-hook 이 패키지를 최초로 개발하고 배포하게 된 계기는 간단하다. 기존 회사의 제이쿼리 + 부트스트랩 코드를 react로 마이그레이션 하면서 해당 회사의 cto분과 논의해보니 ui나 디자인을 최대한 건드리지 않는 선으로 진행했으면 바라는게 은연중 느껴졌다. 그렇기에 마이그레이션을 진행 하면서 기존의 ui를 최대한 유지하기 위해서 노력했다.

 

그러다보니 기존의 다음 카카오 우편번호찾기(주소찾기) api를 활용하는 코드를 제이쿼리에서 리액트로 변경하기 위해서 npm에 배포된 패키지를 살펴보니 거의 유일했던  react-daum-postcode의 경우 패키지 퀄리티는 괜찮았지만 자체 컴포넌트를 제공하는 방식이였기에 내가 원하는 기존 ui 구성을 건드리지 않아서 위화감이 없는 또 삽입과 팝업창 방식이라는 두가지 요구사항을 충족 시킬 수 없었다.

 

거기다가 예전에 배달앱 관련한 프로젝트를 진행한 적이 있었는데 거기서 같이 작업을 진행하던 리액트 개발자가 react-daum-postcode와 비슷한 패키지를 만들어서 배포하는 것을 옆에서 같이 지켜본 적이 있었다.

장기간 중국 생활의 영향으로(사람이 많다보니 그냥 똑같이 생긴사람들이 너무 많다.) 개인적으로 사람 얼굴을 잘 기억못하고 구분 못하는 편이라 react-daum-postcode를 배포한 사람이 같이 개발했던 사람인줄 착각했다. 실제로는 전혀 다른 사람이였다.

 

그때는 별 생각 없이 저런 간단한 소스도 수요가 있을까? 라는 생각으로 넘어갔는데 추후에 필요해서 찾아보니 다운로드수가 몇천 가까이 나오는 것을 보게되니 내생각과 다르게 생각보다 간단한 소스들도 원하는 사람들이 많구나 라는 것을 느꼈고 내가 원하는 실력이 될때까지 미루어 뒀던 오픈소스 활동 기여를 조금 일찍 시작해보자라고 생각했다.

 

기존의 react-daum-postcode와 다르게 컴포넌트 방식이 아닌 기존 ui에 그대로 붙일 간단한 hook이라는 컨셉으로 (기존 오픈소스가 제공하지 못하는 부분) 주말 쉬는시간을 투자하여서 다음 카카오 우편번호 찾기 api를 hook 방식으로 기존 프로젝트에 연결하는 react-daumpost-hook을 만들어서 배포했다. 사실 코드 개발보다는 npm 배포와 오픈 소스 문화에 대해서 공부하는 부분이 더 많았던 프로젝트였다.

 

그렇게 배포한 첫 오픈소스인 react-daumpost-hook

 

관련 링크들은 여기 있다.

 

1. NPM - https://www.npmjs.com/package/react-daumpost-hook

 

react-daumpost-hook

다음 카카오에서 무료로 제공하는 우편번호(주소찾기) API를 쉽게 기존 코드에 연결 할 수 있는 hook 패키지 입니다.

www.npmjs.com

2. Github Repo - https://github.com/yoonjonglyu/react-daumpost-hook

 

GitHub - yoonjonglyu/react-daumpost-hook: daum, react,

daum, react,. Contribute to yoonjonglyu/react-daumpost-hook development by creating an account on GitHub.

github.com

 

반응형