리엑트 컴포넌트를 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 을 다운받아 실행하였다.

성공

자바스크립트의  promise에 대해 이해해보자.

일반적으로 자바스크립트는 탑다운 방식으로 순차적으로 실행된다. A작업이 시작되면 A작업이 완료된 후 B작업이 시작되고  B작업이 마무리되면 그 다음 C작업이 시작된다. 하지만 Promise는 비동기적 방식으로 A promise가 완료되기 전에 B작업이 시작되고 이 후 언제 든 A promise가 완료되면 그 때 반환된다. 즉 main thread를 방해하지 않는 방식으로 작업이 수행되므로 사용자 입장에서는 훨씬 작업을 수월하게 이행할 수 있다.  

글로 설명하려 하니 좀 어려우니 코드로 살펴보자.

우선 lazyDiv라는 함수이다. 이는 n를 dn으로 나눈다. 나누긴 나누는데 lazy라는 이름 그대로 setTimeout function을 이용해서 1초 쉰 후 실행하도록 했다. 명심해야 할 것은 lazyDiv함수는 실행 1초 후에 Promise를 반환한다는 점이다.

function lazyDiv(n,dn) {
return new Promise((res, rej) => {
setTimeout(() => {
if (dn != 0) {
res(n / dn);
} else {
rej(new Error("Can't devide by 0"));
}
}, 1000);
});
}


자 그럼 이제 then 을 이용해 promise의 값을 얻어보자. 그리고 다른 작업들을 포함 시켜 어떤 순서로 수행되는지 확인해 보자.

lazyDiv(5,2).then((result)=>{console.log(result)}).catch((err)=>console.log(err.message)); //작업1
console.log("hi"); //작업2
console.log("async function is in progress");//작업3

먼저 작업 1로 lazyDiv promise를 수행하고 작업2로 hi 를 콘솔에 프린트한다. 그리고 작업3 를 콘솔에 프린트한다. 결과가 어떨까? 일반적인 스크립트 함수라면 lazyDiv가 1초 후 계산을 완료할 때까지 기다린 후 작업2 와 작업3를 수행하겠지만 promise의 경우는 좀 다르다. 수행하면 아래와 같은 결과가 나온다.

hi
async function is in progress
2.5

즉 1초동안 lazyDiv가 계산을 끝낼 때 까지 기다리지 않고 작업2와 작업3가 먼저 실행된다.

물론 에러가 발생하는 경우에도 마찬가지이다.

lazyDiv(5,0).then((result)=>{console.log(result)}).catch((err)=>console.log(err.message)); //작업1
console.log("hi"); //작업2
console.log("async function is in progress");//작업3

hi
async function is in progress
Can't devide by 0

아마존 LOAD BALANCER를 이용하여 https 즉 ssl 인증서를 내 AWS EC2에 장착하였다. 그리고 조금 더 나아가  http로 들어오는 request를 모두 https 쪽으로 리다이렉트를 시켜 보다 안전한 웹사이트로 만들고 싶었다.

그래서 기존에 NGINX 서버 설정하듯이 sites-enabled 폴더안에서 리다이렉션 설정을 하였는데...

LOAD BALANCER Health check에서 계속 outofservice를 당한다. 포트를 이리 바꿔보고 저리 바꿔봐도 health check 때문에 LOAD BALANCER와 EC2를 이어지지 않는다.에 그래서 할 수 없이  자바스크립트로 아래와 같이 설정하니 되긴 된다.

<script>
var current_url = window.location.href;
if (current_url.includes("localhost")){
console.log("development");
}else{
console.log("production");
if(window.location.protocol != 'https:') {
location.href = location.href.replace("http://", "https://");
}
}
</script>

위 코트드는 디벨롭먼트 환경에서는 그냥 두고 프로덕션 환경에서 http 사이트를 강제로 https로 바꿔주는 자바스크립트 코드이다.

근데 stack flow 이런데 보니까 자바스크립트로 하는 것보다 웹서버에서 설정하는게 훨씬 reliable하다고 하는데... 이렇게 하면 뭐가 문제가 되는지 아직 파악하지 못했다. 뭐 아무튼 AWS EC2에 https를 사용하고 싶고 그러면 LOAD BALANCER가 필수적인데 NGINX 설정 하니 LOAD BALANCER에서 EC2를 잡아주지 못하니 어쩔 수 없이 이렇게 했다.

+ Recent posts