Jupyterlab 4 업그레이드 주의 사항.

Jupyter 3.x 를 사용중에 Jupyter 4.0 출시를 했다고 해서 가상환경을 만들고 jupyterlab 4.0 을 설치했었다. 조금 더 UI 가 명확해 보이고 괜잖았는데 한글 입력시 글가가 깨져서 입력되거나 혹은 현재 편집중인 Cell 의 위치가 달라져 보이는 이상한 증상이 있어서 4.0 업그레이드 버전 사용을 안했는데 이유는 Node.js 버전 문제로 보인다.

Node.js 버전

기존에 jupyterlab 3.6 에서 Node.js 14 버전을 사용하고 있었다. Jupyterlab 4.x 버전의 주피터 확장 모듈 빌드도 문제가 없었는데 위에 언급한 이상한 현상이 발생해서 Jupyterlab 4.x 가상환경에서 Node.Js 버전을 18버전으로 업그레이후 후에는 문제없이 사용중이다.

hexo 의 icarus theme 수정하기

git 으로 clone 한 icarus theme 를 사용하고 있다. 스타일과 코드를 수정하려면 아래 2개 사이트의 정보가 필요할 것 같다.

  1. bulma.io
  2. inferno

layout 관련

기본 레이아웃은 layout.jsx 이다.과련해서 bulma 의 CSS 정의를 살펴보면 도움이 된다.

컬럼 수에 따른 조절…

icarus/layout/layout.jsx 에서 컬럼수로 폭을 조절하는 것을 상대적으로 정해주니 좀 더 시원해 졌다.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="columns">
<div class={classname({
column: true,
'order-2': true,
'column-main': true,
'is-four-fifths': columnCount === 1,
//'is-12': columnCount === 1,
'is-four-fifths-tablet is-four-fifths-desktop is-four-fifths-widescreen': columnCount === 2,
'is-three-quarters-tablet is-three-quarters-desktop is-three-quarters-widescreen': columnCount === 3
//'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
//'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
})} dangerouslySetInnerHTML={{ __html: body }}></div>

style 관련

responsive.styl

화면 폭 수정

themes/icarus/include/style/responsive.styl

  • Javascript code determines the page width.
1
2
3
4
+fullhd()
.is-2-column .container
max-width: $widescreen - 1 * $gap
width: $widescreen - 1 * $gap

style.styl

전체 스타일 시트는 themes/icarus/source/css/style.styl 에서 외부 .styl 파일을 을 import 해서 적용했다. 변경을 위해서 themes/my_icarus_custom 이란 폴더를 만들어 사용한다.

  • themes/icarus/source/css/style 아래 추가할 스타일 파일을 만들어 사용한다.
1
2
3
4
5
hexo ROOT/
|----- themes
|
|----- icarus/
source/css/my_bg.styl

배경이미지 적용

  1. themes/icarus/source/css/style.styl 파일에 다음을 적용
1
2
// my custums
@import '../../include/style/my_bg'
  1. 배경 이미지는 hexo/source/images/ 아래에 저장했다.

  2. my_icarus_custom/bg.styl 파일에 CSS 스타일 작성

1
2
3
4
5
6
7
body {
background-image: url("/images/vlcsnap-2023-05-16-14h44m58s614.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

Jupyterlab 의 extension 을 설치하고 build 시 npm 에러.

jupyterlab 의 확장 모듈을 다운받아 설치시 nodejs 실행 환경이 제공되야 한다.

jupyterlab 확장 build error

jupyterlab 의 확장 모듈을 다운받아 설치하다 보면 npm 과 연계한 프로그램이 많다. 아래 같은 nodejs 관련 에러를 발생한다.

1
2
3
4
5
6
daddy> jupyter lab build
...
...
An error occurred.
RuntimeError: npm dependencies failed to install
See the log file for details: C:\Users\USERID\AppData\Local\Temp\jupyterlab-debug-4kr1lkn1.log

결론으로 현재 jupyterlab 을 실행하는 환경에서

  1. nodejs 버전이 설치되어 있고
  2. jupyterlab extensions가 활성화 되어 있다면

해당 로그 파일을 확인해 보면 대부분 nodejs 버전이 일치하지 않아서 아래 같은 로그를 기록하고 있어 보인다.

1
2
error readable-stream@4.3.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.0"
error Found incompatible module.

nodejs 버전을 업그레이드 하고 빌드를 수행하니 잘 된다.

Open API Web Token

Open api key

API keys는 사용자 인증, 요청 API 호출을 위해 필요하다.

보통 RESTFull API 호출시 API keys 와 인증 스킴을 사용한다. 주요 차이는:

  • API keys : 앱 혹은 사이트 호출을 식별해서 API 호출을 만다.
  • Auth tokens : 앱 혹은 사이트 사용자를 식별한다.
자세히 보기

NodeJS / Process management

nodejs app을 단일 node 명령으로 실행후 백그라운드 혹은 시스템 데몬으로 다룰 수 있도록 해주는 프로세스 관리 유틸리티를 알아보자:

  1. nodemon
  2. pm2
  3. forever

1. nodemon

1
nodemon ./server.js localhost 8080

express app

nodemon으로 express 의 기본 템플릿을 시작시 bin/www 를 실행애 주어야 한다. app.js 만 실행시 www 에 명시한 포트가 인식 안된다.

1
$ nodemon bin/www

혹은 PORT 변수를 입력하고 실행한다.

1
$ PORT=3000 DB_USERNAME='mongo' DB_PASSWORD='' DB_SERVER='localhost' DATABASE='student' nodemon server.js

2. pm2 설치

pm2는 nodejs app을 실행하고 관리할 수 있는 전문적인 도구이다.
node.js 앱을 시스템 서비스로 등록하기 위해서 pm2 를 설치한다.

1
npm i -g pm2

예를 들어 express 앱이 있으면 다음 같이 pm2로 시작한다.

1
2
cd www-app
pm2 start -n "www-app" bin/www

pm2 log format

pm2 이전 버전은 시작시 timestamp를 로그에 저장하고 싶으면 시작시 --log-date-format 옵션을 이용

1
pm2 start app.js --log-date-format 'DD-MM HH:mm:ss.SSS'

시작 설정 파일에 log_date_format 옵션을 줄 수 있다.

1
"log_date_format"   : "DD-MM HH:mm:ss.SSS",

pm2 2.x 이후 부터는 log 의 형식을 --format 옵션을 지정할 수 있다.

1
pm2 logs --format

pm2 startup

startup 시 pm2 start 로 생성되는 .pm2 디렉토리의 pid 와 app.js 파일을 실행해 준다.

pm2 startup systemd 로 스타트를 하면 2개의 프로세스가 만들어 진다.

방법은,,,

  1. 먼저 앱을 시작해 둔다.
1
pm2 start -n "www-app" bin/www
  1. dump를 생성한다.

pm2로 현재 실행중인 프로세스 정보를 save로 덤프하게 저장한다. systemd 서비스 스크립을 작성하는데 유용하다.

1
pm2 save
  1. pm2 startup 명령

pm2 startup 명령은 pm2로 실행중인 프로세스를 systemd 서비스 유니트 파일로 제어 할 수 있다. 명령을 실행하면 sudo 명령으로 실행할 수 있는 스크립을 출력해 준다.

1
2
3
$ pm2 startup systemd
...
sudo env PATH=$PATH:/home/foo/.nvm/versions/node/v8.8.1/bin /home/foo/.nvm/versions/node/v8.8.1/lib/node_modules/pm2/bin/pm2 startup systemd -u foo --hp /home/foo

이 스크립을 실행해 주면 pm2-foo.service 서비스 유니 파일이 생성된다.

1
2
Target path
/etc/systemd/system/pm2-foo.service

이 서비스 파일을 활성화하고 시작해준다.

1
systemctl enable pm2-foo

이제 시스템을 재시작해도 pm2 로 실행중인 프로세스는 자동으로 시작된다.

3. forever

https://github.com/foreverjs/forever

백그라운드 로그 출력

nodejs app을 백그라운드로 실행하기 위해서 로그 정보를 생성할 수 있다.

The forever process will continue to run outputting log messages to the console.

1
forever -o out.log -e err.log my-script.js

Daemon으로 실행하기

forever 프로세스는 대상 프로세스를 백그라운드로 실행할 수 있는 데몬으로 동작이 가능하다. 이것은 nohup 같은 시스템 도구 없이도 가능다. 데몬 실행을 위해 -o -l, & -e 를 사용하도록 권장한다.

1
2
$ forever start -l forever.log -o out.log -e err.log my-daemon.js
forever stop my-daemon.js

그리고 -m 옵션으로 재시작 횟수를 지정할 수 있다.

here are several examples designed to test the fault tolerance of forever. Here’s a simple usage example:

1
$ forever -m 5 examples/error-on-timer.js

설정파일 지원

forever에 스크립트 경로와 함께 JSON 설정 파일을 전달해 스크립트의 구성요소를 제공할 수 있다. 예를 들어 아래 같은 앱 디렉토리에 developement.json 설정 파일이 있다고 하자,

1
2
3
4
.
├── forever
│ └── development.json
└── index.js

developement.json 설정 파일은 아래 같은 내용으로 구성할 수 있다:

1
2
3
4
5
6
7
8
9
// forever/development.json
{
// Comments are supported
"uid": "app",
"append": true,
"watch": true,
"script": "index.js",
"sourceDir": "/home/myuser/app"
}

Yarn

Yarn

Yarn은 Facebook, Google, Exponent, Tilde가 만든 npm을 대체 할 수 있는 새로운 패키지 관리자 이다. npm의 두 가지 큰 문제를 해결하고자 한다,^Yarn vs npm: Everything You Need to Know

  • npm 의 패키지 설치가 만족스럽게 빠르지 않다.
  • 보안 문제가 우려되고 있다. 설치시에 코드가 실행되도록 하고 있다.

다른 듯 같은 점

yarn의 버전 표기가 다르기 때문에 같은 패키지를 서로 다른 버전으로 설치하는 잘못이 발생할 수도 있다.

npm 5 이후 많은 개선이 이루어 졌다. ^npm 5 vs yarn

  • npm i 는 자동으로 package.json에 의존성을 저장한다.
  • npm-shrinkwrap 가 사라지고 yarn 같이 package-lock.json 파일이 추가되었다.

package.json

이 파일은 npm과 yarn에서 의존성을 유지하기 위해 사용한다. 그러나 버전 번호가 다를 수 있다. 버전을 major와 minor 로 선택할 수 있고, 표기가 다음 같이 다르다 ^npm-vs-yarn

node version: v8.0.0
npm verison: 5.0.0
yarn verison: 0.24.6

npm, yarn 양쪽 버전이 package.json에 명시되어 설치되는 문제가 생길 수 있다. 이것을 피하기 위해 정확히 yarn으로 설치되는 버전은 yarn.lock 에 관리된다.

npm에서도 npm shrinkwrap 명령이 lock 파일을 생성해서 npm install 이 package.json을 읽기 전에 읽어 설치하는 것은 yarn.lock 을 먼저 읽는 것과 같다. 다만 yarn은 기본적으로 yarn.lock을 생성하고 업데이트 한다는 것이다.

병렬 설치

npm 이 패키지를 설치하는 작업은 각 패키지를 설치하고 순차적으로 진행한다. yarn은 설치 작업을 별령로 진행한다.

express 패키지 42개를 설치할 때

1
2
npm: 9 seconds
Yarn: 1.37 seconds

gulp package 는 의존하는 195개 패키지를 설치한다.

1
2
npm: 11 seconds
Yarn: 7.81 seconds

출력

npm 설치 과정은 장황스럽게 표시된다. yarn은 기본적으로 조금 단순하고 자세한 출력 옵션은 별도로 있다.

CLI 의 다른 점

yarn global

글러벌 설치시 npm은 -g, --global 을 사용하는데, yarn은 global 첨자를 사용한다이다. 그리고 npm과 같이 글로벌 설치시에는 프로젝트 지정 의존성이 글로벌로 설치되지 않는다.

global 앞첨자는 yarn add, yarn bin, yarn ls yarn remove 에서만 동작한다.

yarn install

npm install 은 package.json 에 명시된 패키지들의 의존성을 설치한다. yarn은 순서데로 yarn.locak 혹은 package.json에 명시된 의존성을 설치한다.

yarn add [-dev]

npm은 package.json에 의존성을 추가하려면 npm install --save 별도의 플래그를 사용한다. yarn은 yarn add <package> 는 패키지를 설치하고 package.json에 의존성으로 추가한다. 그리고 --dev 플래그를 주면 developer dependency에 추가해 준다.

yarn licenses [ls|generate-disclaimer]

yarn license ls 는 패키지의 라이센스를 목록을 출력한다. yarn license generate-disclaimer 는 모든 패키지의 라이센스 내역에 대한 면책조항을 생성한다.

yarn why

의존성 그래프와 그림을 출력해 준다.

yarn upgrade

npm update와 비슷하게, yarn upgrade 는 package.json에 명시된 패키지를 업그레이드하고 yarn.lock을 재 생성한다.

주목할 점은 패키지를 명시해서 업그레이드 하면 최신 릴리즈로 갱신하고 package.json에 태그를 선언해 둔다. 메이저 릴리즈로 패키지를 업데이트 해준다는 의미이다.

yarn generate-lock-entry

yarn generate-lock-entry 명령은 package.json을 기초로 yarn.lock 을 생성한다. 이것은 npm shirinkwrap 과 비슷하다. 다만 주의해서 사용해야 하는데 yarn.lock 파일은 yarn add, yarn upgrade 시 생성되거나 업데이트 된다.


### 설치

https://yarnpkg.com/en/docs/install#linux-tab 에 설명되어 있다.

macOS

1
brew install yarn

nvm 같은 가상환경을 사용하면 node.js 설치를 제외한다.

1
brew install yarn --without-node

Ubuntu 16.04이하, 데비안 정식버전 에서

1
2
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
1
2
sudo apt update && sudo apt install yarn
sudo apt-get update && sudo apt-get install yarn

openSUSE

On openSUSE, you can install Yarn via our RPM package repository.

1
2
sudo zypper ar -f https://dl.yarnpkg.com/rpm/ Yarn
sudo zypper in yarn

스크립 혹은 npm

1
curl -o- -L https://yarnpkg.com/install.sh | bash

설치후 경로에 추가한다.
export PATH=”$PATH:/opt/yarn-[version]/bin”

사용

The following command uses Yarn to install the express package:

yarn add express

참조

webpack 기반 angularjs 프로젝트 빌드

Webpack 과 angularjs

angular.js 프로젝트를 webpack 기반으로 시도해 보자.

새 프로젝트

프로젝트 구조를 준비한다.

1
2
3
$ mkdir myproject && cd myproject
$ git init
$ npm init --yes

프로젝트 초기 구조를 시작했음을 커밋으로 기록하자.

1
2
$ git add package.json
$ git commit -m 'Initialize git and npm'

아래는 여기 소스느 https://github.com/zamarrowski/pokemon-poc 를 참조.

angularjs 실행에 필요한 패키지를 설치하기 위해서 다음 명령을 실행한다.

1
npm i angular angular-ui-router
1
npm i -D webpack webpack-dev-server