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

성공

1. Install python module xlwings 

pip install xlwings.

2. install xlwings excel add-in

xlwings addin install

3. Open excel and you will see xlwings like below.

 

4. Open VBA editor (alt + f11)

5. Global setting=> you need to tell Excel VBA which python and which source code you will be using. It seems very easy you just type in them on Excel Xlwing addin section

It works even if you use virtual env.

 

1.  Go to shell by typing "python manage.py shell"

2. On shell,

>>from django import db

>>db.connections.databases

You will see information for the database you are using.

자바스크립트의  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

20181119

C++로 만들어진 파일을 컴파일 해 wasm파일로 변환하여 EOS 블록체인에 올려보려 한다.

EOS doc에 C++로 파일 만드는 방법과 eosio-cpp로 컴파일해 wasm 과 abi파일을 만드는 것 까지는 수월하게 해결했는데 set contract를 사용하여 블록체인에 deploy하는 것에 꽤 시간이 걸렸다. 그 이유인 즉슨, 애초에 docker image를 이용하여 node를 돌리고 cleos에 alias를 걸어 docker exec를 수행해 왔는데 그걸 깜박하고 cleos로 local file (wasm파일)에 접근을 하려고 했기 때문이다.

해결방법은

1. 아래의 명령으로를 compile 된 wasm된 파일 혹은 wasm이 포함된 폴더를 docker 컨테이너로 copy 한 후

docker cp <local_file_dir> <imagename>:<docker_dir>

2. 아래 명령으로 docker container에 접속 하고

docker exec -it <imagename> bash

3. docker container bash에서 cleos  set contract 명령어를 수행한다.

cleos -u https://api.eosnewyork.io:443 set contract <account_name> <docker container dir> -p <account_name>@active

docker_container_dir 안에 wasm 파일과 abi파일을 넣어주면 그냥 폴더 위치까지만 입력하면 wasm과 abi를 모두 deploy해준다.

다만 한가지 더 명심할 점은 contract를 deploy할 때 램과 cpu network 가 필요하므로 깡통 account에 올리려 하면 에러가 난다.

아마존 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를 잡아주지 못하니 어쩔 수 없이 이렇게 했다.

.github에서 이미 커밋했던 파일을 더 이상 remote repository에서 제외하고 싶다면 아래의 명령으로 지금까지 사용했던 cache를 제거해야 한다.  아래 빨간색으로 칠해진 명령어를 입력한 다음 .gitignore 파일에 제외하고 싶은 폴더나 파일을 입력한 후 나머지 명령어를 수행한다. 마지막에 . 를 잊지 말자. 이러면 local에는 해당 파일이 남아있지만 remote에는 더 이상 push 되지 않는다. 

$ git rm -r --cached .
$ git add . $ git commit -m "Clean up ignored files"

중학교 때 우리는 10진수를 주로 사용하고 있으며 2진수라는 것도 있고 8진수라는 것도 있고 16진수라는 것도 있다라는 것을 배웠을 것이다. 보통 숫자를 쓸때 0부터 9를 사용해서 표현하지만 꼭 0-9가 아니라 0 과 1만을 사용해서 2진수로 표현할 수 도 있고 0-9에 알파벳을 추가하여 11진수 이상 으로 수를 표시할 수 있다. 진수가 높아질 수록 큰수를 더 짧게 표시할 수 있으므로 보안이 중요한 암호학에서는 보다 높은 진수를 사용하곤 한다.

사토시가 비트코인을 발명하기 전에는 보통 base64라고 해서 64진수를 많이 사용하였다. 64진수는 알파벳 숫자 0-9까지 10개에 알파벳 대문자 26개 그리고 소문자 26개 그리고 "+"와 "/"까지 총 64개의 아라비안 숫자와 알파벳 문자로 표시하였다.

하지만 사토시는 비트코인 주소를 숫자로 표현하기로 하였고 혼돈을 피하기 위해 64진수에서 "+" 와 "/" 그리고  0 (zero), O (대문자 o), I (대문자 i) 그리고 l (소문자 L)을 제외하여 58진수를 비트코인 주소로 사용하기로 하였다. 그래서 비트코인 주소는 숫자와 알파벳이 섞여 있 지만 실제로는 58진수의 숫자라고 보면 된다.

이 방식은 다른 많은 암호화 코인에 적용되고 있다.

"가식적이다"를 영어로 하면 뭘까? Netflix Original Series "Better Call Saul" 시즌 4의 8편 39분 30초에서 제임스 맥길은 정지된 변호사 자격을 다시 찾기 위해 인터뷰를 한다. 하지만 제임스 맥길은 평소 언변실력과 준비된 멘트로 오글거릴 정도로 정의로운 답변만 쏱아낸다. 당연히 합격할 것이라고 생각했지만 결과는 탈락. 변호사 자격을 다시 찾지 못한다. 제임스는 그 이유를 듣기 위해 심사위원장에게 뛰어가 따진다. 여기서 심사위원장이 한말...

"It was a question of sincerity. Some members of committee found you somewhat insincere."



장고 설치 배포 후 어느 정도 완성되어 도메인 구입 후 설정했는데 자꾸 "wecome to nginx!"페이지 만 나온다. 그래서 커스터머 서비스 쪽에도 물어보고 인터넷도 뒤져 본 결과 내 서버상 nginx 설정을 수정해야 한다는 사실을 깨닳았다.

수정해야 할 파일은 /etc/nginx/sites-available/ 안에 있는 nginx 설정 파일이다. 기존에 아이피 주소로 되어 있던 부분을 구입한 도메인 명으로 변경하니 잘 된다.

+ Recent posts