CPA and programming

리엑트 컴포넌트를 packaging해서 npm에 배포하는 방법에 대해 써보겠다.

아마 대부분의 독자들은 npm install {xxx}으로 남들이 만들어 높은 프로그램을 다운받아 자신의 앱에 사용해 본적이 있을 것이다. 여기서는 그와 반대로 자신이 짠 리액트 컴포넌트를 남들이 사용할 수 있게 하는 방법을 설명한다.

다만 여기서는 scoped-package로 private하게 배포하기 때문에 해당 컴포넌트를 다운받을 수는 없다. 한 달에 $7를 내면 비공개 패키지를 올릴 수 있다.

그럼 한번 시작해 보겠다. 쉽게 팩스를 보낼 수 있는 앱을 만들어보려고 계획하고 있으므로 이름을 easyfax-pack으로 한다.

1. create react app 으로 리액트 앱 만들기

리액트 앱을 만드는 가장 쉬운 방법인 create react app 으로 리액트 앱을 만든다. 나는 pycharm 이라는 툴을 사용하기 때문에 아래와 같이 리액트 앱을 만든다.

여기서  Create를 누르면~

위와같은 파일이 생성된다.

2. devDependencies 설치하기

아래 명령으로 아래의 babel dependencies 를 설치한다.

npm install -D @babel/cli @babel/preset-react --save

3. 배포할 파일 코딩하기

이제 우리가 배포할 파일을 만든다. 여기서는 배포에 대한 것에 집중하기 위해 아주 간단한 컴포넌트를 만든다.

src 디렉터리 밑에 lib라는 디렉터리를 만들고 lib 밑에 EasyFax 라는 이름의 자바스크립트 파일을 만든다. lib 디렉터리 하위에 있는 파일들을 패키징하여 npm 에 올리는 것이다.

4. Index.js 파일 수정하기

Index.js 파일은 배포되지 않을 것이다.  배포와는 상관없지만 배포 전에 컴포넌트가 제대로 만들어졌는지 확인할 필요는 있다. 따라서 아래와 같이 수정하여 최종 배포하기 전에 배포대상 컴포넌트를 로컬에서 실행(npm run start)하여 확인할 수 있도록 한다.

5. 컴포넌트 제대로 만들어졌는지 확인하기.

로컬에서 앱을 실행하여 App내의 컴포넌트가 제대로 만들어졌는지 확인한다.

너무 심플해서 좀 민망하지만 잘 실행된다.

6. gitignore 파일에 패키징에서 제외될 항목 추가하기

.gitignore 파일에 아래 하이라이트된 부분을 추가해준다.  github을 사용해본 독자는 알겠지만 packaging  할 때 제외해야 할 항목을 정한다.  .ignorenpm 파일이 없는 경우 .gitignore 파일을 반영하여 패키징을 하도록 설계되어 있으므로 굳이 .ignorenpm 파일을 만들기 보다는 create-react-app 실행 시 생성된 .gitignore파일에 아래의 항목을 추가한다.

7. package.json 파일 설정하기

가장 중요한 부분이다. 배포할 패키지에 대한 이름, 설명 및 버전 등에 대한 정보 및 publish 명령에 대한 script를 설정한다. 최종적으로 아래와 같은 모양을 하고 있어야 한다. 특히 scripts publish:npm  부분과 babel 부분을 주의하기 바란다.

이름을 보면 spoped package(@tofusoup429/xxx) 로 하였으며 이는 기본적으로 private 이다. 앞에서도 언급하였듯이 아직 다른 사람과 내 코드를 공유할 준비가 안되었기 때문에 일단 공개하지 않는다. 참고로 private으로 배포할 수 있으려면 한달에 7불정도를 지급해야 한다.

8. npm 에 가입하기

배포를 하려면 단연히 npm에 계정을 가지고 있어야 하며 배포하기 전에 npm login 명령어를 통해 로그인하여야 한다. 아래 링크로 가면 계정을 만들 수 있다.

https://www.npmjs.com/signup

이 부분은 너무 기본적인 것으로 생략한다.

9. 배포하기

최종적으로 배포한다. 8번에서도 언급하였지만 배포하기 위해서는 npm에 계정이 있어야하고 npm login 으로 로그인을 해야 한다.

1) npm login = > npm 계정에 로그인

2) npm run publish:npm => 배포할 패키지를 빌드한다.(이 명령어를 치면 dist 폴더가 생성되었음을 할 수 있다.

3) npm publish => 최종 배포.

그러면  내 npm 페이지에 패키지가 배포되었을을 확인할 수 있다.

10.  배포제대로 되었는지 확인

package-tester라는 별도의 앱에서 해당 패키지를 다운 받아 제대로 실행되는지 확인한다.

npm install @tofusoup429/easyfax-pack --save

별도의 앱(package-tester)에서 아래의 명령어로 방금 배포함 easyfax-pack 을 다운받아 실행하였다.

성공