DEVOCEAN

안녕하세요, SK C&C 에서 이것 저것? 개발하는 sw 개발자 심재규 입니다.

저는 오늘 오픈소스 라이브러리 개발자가 되는 방법에 대해 경험을 공유하고자 포스팅을 작성하였습니다.

오픈소스 Contributor 가 되는 방법은 대표적으로 2가지 방법이 있습니다.

하나는 오픈소스 사용 시 동작 오류 를 발견하고 이를 git 을 통하여 PR 한 후, 그 공로를 인정 받아 Contributor 로 등록 되는 것 입니다.

하지만 웬만한 오픈소스 라이브러리의 경우, 패치가 적용된 이후 아니고서는 대부분 안정화 버전이 업로드 되기 때문에 오류를 발견하기가 쉽지 않습니다…

하지만! 불가능은 없는법. 바로 오픈소스 라이브러리를 직접 개발하여 배포하면 내가 바로 오픈소스 개발자가 되는것 입니다.

그래서 제가 설명드릴 두번째 방법이 바로, 오픈소스를 직접 만들어보고 배포하는 오픈소스의 주인이 되는 것 입니다.

오픈소스 라이브러리의 개발자가 되는 방법 소개

우선! 여러 성격의 라이브러리가 있을 수 있으니, 저희는 React Component 라이브러리를 배포한다고 가정하고 작업을 수행하도록 하겠습니다.

그럼 React 프로젝트를 생성해보도록 하겠습니다.

아래 명령어를 입력하여 react 프로젝트를 생성하겠습니다.

npx create-react-app do-stack-component

생성 후, 아래 명령어도 같이 입력해줍니다.

npm install cross-env @babel/cli @babel/preset-env @babel/preset-react --save-dev

위 명령어는 컴포넌트 개발 후 컴파일 및 컴파일 결과물을 배포하고자 하는 폴더에 자동으로 복사하기 위해 패키기 설치 용 명령어 입니다.

위 명령어 정상 실행이 완료 되었으면, package.json 과 같은 경로(즉, 최상위 경로)에 babel.config.js 파일을 생성하고, 아래와 같이 기입 해줍니다.

자 이제 위 과정이 마무리 되었으면, src 폴더 아래에 라이브러리를 통해 사용자에게 제공할 컴포넌트들을 정의 할 폴더를 하나 생성해주겠습니다.

src 폴더 아래에 component 라는 폴더를 생성해보겠습니다.

component 폴더 아래엔 컴포넌트 단위 별로 폴더를 구축하고, 해당 폴더 안에서 컴포넌트 별 생태계를 만들어줍니다.

component 폴더 아래에, 생성하고자 하는 컴포넌트 명으로 폴더를 하나 생성하고, 해당 폴더 아래에 컴포넌트명.jsx, 컴포넌트명.css 파일을 만들어보겠습니다.

만들고 나서 컴포넌트명.jsx 파일에 구현하고자 하는 컴포넌트의 내용을 작성하겠습니다.

위 컴포넌트는, 호출 하는 곳에서 text, style 을 입력받아 렌더링하고, onClick 이벤트가 발생했을때 외부로 이벤트 발생을 알려주는 가장 간단한 기능의 버튼입니다.

버튼 스타일은 동일한 경로 내에 css 파일 생성 후 위와 같이 적용해주겠습니다.

이제 이 버튼을 호출 가능하도록 index.js 를 component 폴더 안에 생성 하여 버튼을 선언해주겠습니다.

이번엔, 프로젝트 안에서 배포될 폴더, 외부 접근 가능여부에 대한 설정, 파일 리스트 선언, 컴파일 스크립트 작성을 위해 package.json 파일 내에 아래와 같이 내용을 추가해줍니다.

추가 및 수정되는 영역은 main, private, files, scrips 입니다.

위와 같이 작성이 되었으면 오픈소스 라이브러리의 주인이 될 과정의 80% 가 끝이 났습니다.

나머지 20% 는 npm 라이브러리 저장소의 계정을 만들고 로그인 하는 과정입니다.

우선

https://www.npmjs.com/signup 으로 접속하여 npm 계정을 생성해줍니다.

계정 생성이 완료 되었으면, 생성한 계정과 현재 작업한 프로젝트를 연결하는 과정을 수행하겠습니다.

다시 로컬 환경으로 돌아와 콘솔에서 npm login 을 입력합니다.

콘솔에서 엔터 입력을 하라는 명령어가 뜨면, 엔터 입력 후 생성되는 웹 화면에서 로그인을 완료합니다.

위 과정이 완료 되었으면 남은 과정은 배포입니다.

배포 하기 위해 코드를 컴파일 하겠습니다.

컴파일을 위해 콘솔에서 npm run compile 을 입력해줍니다.

입력 결과 dist 폴더가 새로 생성되며 컴파일 결과물이 생성됩니다.

이제 publish 하여 npm 저장소에 배포하겠습니다.

npm publish 명령어를 입력하니, 위와 같이 뜨는걸 확인할 수 있습니다.

배포 잘 되었는지 확인해보러 npm 페이지에서 제가 생성한 라이브러리를 검색해보겠습니다.

잘 된거 같습니다.

만약 찾기 어려우시면, 우측 상단의 my profile 에서 packages 로 들어가시면, 해당 계정으로 생성된 레포지토리만 조회되므로 더욱 편리하게 찾을 수 있습니다.

여기까지가 오픈소스 라이브러리 배포에 대한 부분입니다.

이번엔, 배포 후 기능 업데이트 혹은 오류가 발견되어 수정하는 상황을 생각해보겠습니다.

저 같은 경우엔, 기능 업데이트 보단 스타일을 조금 변경하여 배포하는 상황을 가정하겠습니다.

위와 같이 스타일 수정이 필요하여 수정하였습니다.

그리고 배포할땐 package.json 에서 버전을 변경해줍니다.

기존 버전 0.1.0 에서 0.1.1 로 버전 업 하도록 작성하였습니다.

이렇게 버전을 관리해야 하는 이유는, 사용자 편의성도 있지만, npm 에서 라이브러리 명과 버전 으로 배포관리를 하기 때문입니다.

다시 배포 할땐

기존 dist 폴더 내용은 지우고 다시 컴파일 해줍니다.

npm publish 후 다시 확인했을때

위 처럼 npm 레포지토리 내에서 버전이 변경되어 배포된 것을 확인 할 수 있었습니다.

위 과정을 포스팅 한 이유는, 웹 개발자로서 자신만의 라이브러리를 두고 관리하면서 코드 관리 생태계? 를 경험할 수 있는 점이 굉장히 재미있어서 모두에게 공유하고자 작성하였습니다.

저 역시, 기존 자사 라이브러리 사용 중 UI 컴포넌트의 속도, 렌더링 측면에서 아쉬운점이 느껴져, 이를 개선한다면 이렇게 하고 싶다. 라는 마음으로 라이브러리를 개발 후 운영하고 있습니다.

UI 개발 범용적인 라이브러리는 아니지만, 테이블 컴포넌트에 특화하여 제가 생각했을때 필요한 기능 및 스타일을 적용하여 배포해보았는데,

제가 필요한 기능을 언제든지 추가할 수 있다는 장점이 너무 매력적이었습니다.

이상으로 오픈소스 라이브러리 생성기 마치도록 하겠습니다

감사합니다!