sejong.jeonjo@gmail.com

Web Page의 JavaScript 내용을 확인할 때, 가끔 1 행에 모든 내용이 들어간 경우가 종종 있다.

이럴 때 Indentation(들여쓰기)이 있는 JavaScript Format으로 변환하면 보기 좋다.

js-beautifier라는 것을 사용하면 사람 눈으로 보기 좋게 Form을 변환해준다.

JavaScript Beautifier 설치 및 사용 예시

##
##  Python PKG 설치하기
##

$  pip install jsbeautifier
$  pip install cssbeautifier


##
## JavaScript 파일의 형식 변환하기
##

$  js-beautify -r file.js

Reference

https://www.npmjs.com/package/js-beautify

KVM, OpenStack, Kubernetes, OCP 등을 사용하다보면 VM에서 또는 Container 내부에서 CPU를 Pinning하거나 NUMA Node를 지정해야 할 경우가 있는데, 이런 CPU Pinning 설정/관리에 대한 내용을 기록해볼까~~~하고 마음을 먹었다. 그러나 너무 잘 작성한 블로그와 WebDocs가 있어서 그냥 Link만 걸어두기로 마음을 바꾸었다. :)

https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/5/html/virtualization/ch33s08

https://mhsamsal.wordpress.com/2020/05/12/how-to-perform-cpu-pinning-for-kvm-virtual-machines-and-docker-containers/

https://superuser.com/questions/1519358/qemu-kvm-cpu-pinning

평생 C 언어, Go 언어로 Server Side 프로그램만 개발했던 나에게 새로운 과제가 생겼다.

Web Front End, Back End 개발 ~~~

밥벌이로 Web 프로그래밍을 한 것이 2003년이 마지막인데, 지난 19년 동안 개발 환경이 많이 변했겠지.

어렵풋한 기억에 PHP, Java Beans, JSP로 Web 서비스를 개발했었던 것 같다.

그냥 한 귀로 듣고 넘어가는 나의 푸념...
솔직히 2000년 ~ 2003년 사이에 내가 했던 개발 내용이나 방법보다는 자정까지 사무실에서 졸린 눈을 비비며, 고생한 흔적만 몸에 남은 듯...
그래서 웹 서비스 개발에 대한 나의 부정적 느낌이 여전히 남아 있다. ㅠㅠ
20년이 지나도록 그 느낌은 지워지지 않고 있다.
나에게 다시는 웹과 관련한 개발이 없을 줄 알았는데 ~~~ 이렇게 새로운 도전 과제가 주어졌다.

첫 삽은 PatternFly를 리서치하고, 내가 만들려는 Web App에 적절한지부터 파악해야겠다.

PatternFly가 뭐 하기 위해 만들어진 도구인가?

PatternFly Homepage에 소개된 글을 요약해보면, 아래 문장이 될 듯~~~

PatternFly는 
Application(앱) 전반에 걸쳐 UI 통일성을 유지하기 위한 Open Source Web UI Desgin 시스템.
그리고
Web UI 디자이너와 개발자가 협업할 수 있도록 Guidance와 Standard(표준) 업무 절차를 제공.

PatternFly 구조

Components

Web Page에 보여질 Text, Image(Picture), Table  같은 것.

Layouts

Screen의 가로, 세로 크기가 변하더라도 Web Page의 components가 Screen에 잘 보여지도록 components를 재배치한다.

Demos

PatternFly는 여러 Components를 조합해서 Layouts을 디자인하는 예제(Demo)를 제공한다.

유용한 Demo 코드를 제공하므로 이런 Demo 코드를 이용하면 적은 노력으로 Web UI를 만들 수 있다.

PatternFly 디자인 가이드라인

Style Guideline

컬러, 글씨체(폰트), 여백 같은 디자인 체계에 대한 가이드라인을 제시한다.

Usage and Behavior

Navigation, dashboards, form 같은 디자인 패턴에 대한 가이드라인을 제시한다.

UX Writing

작성일: 2024년 4월 18일

카카오 API 보다 Slack API를 사용하게 된 이유

개인적으로 자동으로 스마트폰 메신저에 Notification 메시지를 보낼 일이 있어서, Python으로 카카오톡 메시지 전송 Rest API를 사용했다. Python + 카카오 API 조합으로 구현하니까 참고할 예제가 많아서 큰 문제없이 개발을 할 수 있었다.

그런데 ...

AccessToken의 만료 시간이 4시간 밖에 안 되니까, Refresh Token을 이용해서 다시 AccessToken을 재발급해야 하는 귀찮은 일이 생겼다. 그냥 한번 코드를 작성하고 몇년 동안 잊고 살았으면 좋겠는데 말이다.

그래서 귀찮은 작업을 안 하려고 Slack API의 Webhooks를 이용하게 되었다.

Slack API의 Incoming Webhooks

Slack API를 이용해서 Slack Messenger에 메시지를 전달하기 위한 절차를 보면,

• 당연히 Slack에 계정을 만들고, slack.com에 로그인해야 한다.
• https://app.slack.com 접속해서 App을 추가한다. 
     + 나는 [Incoming Webhooks]라는 App을 추가했다.
     + 이때, 기존 channel을 사용해도 되고, 아래 화면처럼 새롭게 channel을 만들어도 된다.

  +  위 화면처럼 channel을 선택하고 나면, 아래 화면이 보일 것이고 [Add Incoming WebHoos integration] 버튼을 누른다.

아래와 같이 App이 생성된 결과 및 설정 화면이 나온다.

그리고 Example 명령을 복사해서 Terminal에서 실행하면, 바로 Slack 메신저에 curl로 보낸 메시지가 보여진다.

아래와 같이 slack 메신저에 테스트로 보낸 메시지가 보여지면, Incoming-Webhook App은 정상 동작한 것이다.

Python의 requests package를 import해서 requests.post(url, headers, body)를 이용해도 curl과 동일한 효과를 낼 수 있다.

Python Code 작성

##
## FILENAME: my_webhook_test.py
##

import requests, json

## NOTE
##  MY_WEBHOOK_KEY는 "T7RURUGSK/.............................. 22i"
##  이런 형태의 문자열이다.

api_url = "https://hooks.slack.com/services/{MY_WEBHOOK_KEY}"
headers = {
    "Content-type": "application/json"
}
data = json.dumps({
    "text": "파이썬으로 테스트 메시지를 보내다 :) \n 룰루랄라 !!!"
})

response = requests.post(api_url, headers=headers, data=data)
print(response)

위와 같이 Python code를 작성하고, 아래와 같이 명령을 수행한다.

$ python3 my_webhook_test.py
<Response [200]>
$

위 Python 앱이 아래와 같이 메신저에 "파이썬으로 테스트 메시지를 보내다... 룰루랄라!!!"를 출력할 것이다.

그리고 아래 화면처럼 Slack API 매뉴얼이 잘 되어 있어서, 읽고 따라하면 잘 동작한다.

결국, AccessToken을 발급하지 않아도 이 Webhooks처럼 쉽게 메신저에 메시지를 보내는 것이 가능한다.

꼭 알아야 할 정보

내가 만든 Slack App에 관한 전체 목록을 열람하고, 설정 정보를 관리하고 싶다면 아래 주소를 사용한다.

- 내 App 목록을 확인할 수 있다.

- 각 App의 설정 정보,  REST API URL 등 정보를 직접 확인하고 제시해주는 예제 명령어를 통해 테스트할 수 있다.

https://api.slack.com/apps