대부분의 포스트에서는 qs.stringify 와 qs.parse 는 확장된 쿼리스트링 변환이 가능하다고 나온다. 기본 모듈인 querystring.stringify, querystring.parse 대비 쿼리스트링의 중첩을 가능하게한 모듈인데, 다른 변경점이 하나 더 있다.
rfc3986
rfc3986은 !, ', (, ), * 문자에 대해 추가적으로 엔티티화 한다. 자바스크립트에서 이 스펙을 준수하려면 다음과 같이 encodeURIComponent 함수를 합성해야한다. 노드에서도 이는 마찬가지이며 querystring 모듈은 이 스펙을 준수하지 않았다.
RFC3986 used as default option and encodes ’ ’ to %20 which is backward compatible. In the same time, output can be stringified as per RFC1738 with ’ ’ equal to ‘+’.
따라서 언어 간 호환성 및 표준을 맞추기 위해는 qs 모듈을 사용하는 것이 마음이 편하다.
# 컨테이너를 위해 만들어진 alpine 이미지를 사용한다. # 외부 레파지토리에 의존적인 모듈에 대해 latest 버전은 사용하지 않아야한다. FROM node:13.14.0-alpine # 최신버전 사용시 # FROM node:14.4.0-alpine3.12
# tini 는 nodejs 파드를 PID 1 로 실행시켜 정상적인 종료를 가능하게 한다. RUN apk add --no-cache tini=0.18.0-r0 \ # alpine:3.12 버전 사용시 # apk add --no-cache tini=0.19.0-r0 \ && mkdir -p YOUR_APP_PATH \ && chown node:node -R YOUR_APP_PATH
<style> body { width: 1000px; margin: 0 auto; } #aside { float: left; width: 200px; } #section { float: left; width: 800px; } </style> <body> <divid="header">header</div> <divid="nav">nav</div> <divid="wrap"> <divid="aside"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed sollicitudin mauris. Aliquam faucibus facilisis vulputate. Curabitur condimentum placerat mattis. Duis at metus at tellus volutpat ultrices. Cras lorem eros, cursus et risus sit amet, gravida feugiat libero. Nullam id faucibus ipsum. Nulla a leo sed eros mattis bibendum. Nullam et sapien in orci tempus elementum eu sed augue. Pellentesque eu vestibulum arcu. Pellentesque vel finibus libero. Nulla facilisi. Quisque dolor enim, ornare eget elit ac, pharetra porta ex. Vivamus eleifend eu arcu nec consequat. </p> </div> <divid="section"> <p> Nam pulvinar dictum nibh id ullamcorper. Suspendisse justo eros, tempor vel faucibus in, pellentesque congue enim. Proin non eleifend turpis, vel commodo purus. Fusce vitae nisl dapibus, tincidunt elit at, cursus lacus. Maecenas varius imperdiet sollicitudin. Nunc pharetra fringilla enim ut facilisis. Curabitur maximus nibh non rhoncus semper. Duis porta, purus ut tincidunt convallis, sem purus pharetra erat, eu vestibulum tellus mi id eros. Fusce congue, erat at blandit mollis, tellus ex semper velit, dapibus commodo ante turpis a neque. Fusce vel ex id sem auctor accumsan. Maecenas finibus nunc sem, ut gravida felis efficitur at. Pellentesque lobortis dui non ligula condimentum, at auctor dui blandit. </p> </div> </div> <divid="footer">footer</div> </body>
#aside { float: left; width: 200px; } #section { float: left; width: 800px; } </style> <body> <divid="header">header</div> <divid="nav">nav</div> <divid="aside"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed sollicitudin mauris. Aliquam faucibus facilisis vulputate. Curabitur condimentum placerat mattis. Duis at metus at tellus volutpat ultrices. Cras lorem eros, cursus et risus sit amet, gravida feugiat libero. Nullam id faucibus ipsum. Nulla a leo sed eros mattis bibendum. Nullam et sapien in orci tempus elementum eu sed augue. Pellentesque eu vestibulum arcu. Pellentesque vel finibus libero. Nulla facilisi. Quisque dolor enim, ornare eget elit ac, pharetra porta ex. Vivamus eleifend eu arcu nec consequat. </p> </div> <divid="section"> <p> Nam pulvinar dictum nibh id ullamcorper. Suspendisse justo eros, tempor vel faucibus in, pellentesque congue enim. Proin non eleifend turpis, vel commodo purus. Fusce vitae nisl dapibus, tincidunt elit at, cursus lacus. Maecenas varius imperdiet sollicitudin. Nunc pharetra fringilla enim ut facilisis. Curabitur maximus nibh non rhoncus semper. Duis porta, purus ut tincidunt convallis, sem purus pharetra erat, eu vestibulum tellus mi id eros. Fusce congue, erat at blandit mollis, tellus ex semper velit, dapibus commodo ante turpis a neque. Fusce vel ex id sem auctor accumsan. Maecenas finibus nunc sem, ut gravida felis efficitur at. Pellentesque lobortis dui non ligula condimentum, at auctor dui blandit. </p> </div> <!-- clear:both 노드 추가 --> <divclass="clear"></div>
<style> .box { float: left; } /* 다음 세 가지 방법으로 container 안에 box 를 넣어줄 수 있다. */ .container { overflow: hidden; } .container { float: left; } .container { display: flow-root; } </style> <divclass="container"> <divclass="box"> <p>플로팅</p> </div> </div>
overflow: hidden 으로 플로팅 요소를 잡는 것은 box-shadow가 잘리는 등의 문제가 있다.
display: flow-root는 모던 브라우저에서만 지원한다.
position
static: 기본 값이다. 코드상 노출된 순서대로 표시된다.
relative: 오프셋(top, left…)와 함께 사용된다.
새로운 컨테이너 블록이 되며 하위 absolute 를 가둘 수 있다 .
absolute: 흐름에서 벗어나며 자신이 포함된 컨테이너 블록의 가장자리를 기준으로 오프셋만큼 이동한다.
별도의 컨테이너 블록이 선언되지 않았을 경우, viewport가 된다.
fixed: viewport를 기준으로 고정된다. 스크롤해도 변하지 않는다.
sticky: static + fixed 로 문서와 함께 스크롤 되다가 설정한 위치가 되면 고정된다.
잘 돌던 workbox-cli 가 5버전 릴리즈 후부터 돌지 않아서 확인해보았다. 전체 문서는 여기서 확인 가능하다.
injectManifest
self.__WB_MANIFEST 를 주입받는 방식으로 변경되었다.
1 2 3 4 5
// v4: precacheAndRoute([]);
// v5: precacheAndRoute(self.__WB_MANIFEST);
NavigationRoute
blacklist, whitelist 에서 denylist, allowlist 로 키 명이 변경되었다.
BroadcastChannel
broadcast-update 가 자체 API 에서 postMessage()로 변경되었다. 이벤트 리스너가 많아져 복잡해지고, 기존 API에서는 메세징의 버퍼 기능이 없었기 때문이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
// v4: const updatesChannel = new BroadcastChannel('api-updates'); updatesChannel.addEventListener('message', (event) => { const {cacheName, updatedUrl} = event.data.payload; // ... your code here ... });
// v5: // This listener should be added as early as possible in your page's lifespan // to ensure that messages are properly buffered. navigator.serviceWorker.addEventListener('message', (event) => { // Optional: ensure the message came from workbox-broadcast-update if (event.meta === 'workbox-broadcast-update') { const {cacheName, updatedUrl} = event.data.payload; // ... your code here ... } });
# 삭제 됨 with tempfile.TemporaryFile(mode='w+') as t: t.write('hello')
# 삭제 안 됨 with tempfile.NamedTemporaryFile(delete=False) as t: # print(t.name) with open(t.name, 'w+') as f: f.write('hello')
# 삭제되는 디렉토리 with tempfile.TemporaryDirectory() as td: print(td)
# 삭제 안 되는 디렉토리 temp_dir = tempfile.mkdtemp()
압축
tar
1 2 3 4 5 6 7 8 9 10
import tarfile
with tarfile.open('test.tar.gz', 'w:gz') as tr: tr.add('dir')
with tarfile.open('test.tar.gz', 'r:gz') as tr: tr.extractall(path='dir')
with tr.extractfile('tarball') as f: print(f.read())
zip
1 2 3 4 5 6 7 8 9
import zipfile
with zipfile.ZipFile('test.zip', 'w') as z: # 하나의 폴더만 가능 z.write('dir')
# 하위 전체 압축 for f in glob.glob('dir/**', recursive=True): z.write(f)
ini
configparser.ConfigParser()
yaml
pip install pyyaml
로깅
logging.critical
error
warning
info
debug
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import logging
# basicConfig 에 format 을 정의 가능 # doc 확인 logging.basicConfig(filename='test.log', level=logging.INFO) logging.info('info %s %s', 'test', 'test2') # === logging.info('info {}'.format('test')
# 해당 파일에서 로그명 재정의 logger = logging.getLogger(__name__)
# 로그 레벨 재정의 logger.setLevel(logging.DEBUG)
# 전체 설정 변경 logging.config.fileConfig(...) logging.config.dictConfig(...)
로깅 핸들러
여러 핸들러를 쉽게 붙힐 수 있다. 문서
handler = logging.FileHandler(...)
logger.addHandler(handler)
로깅 필터
로그의 출력을 필터를 사용해 쉽게 가공 가능하다. 문서
메일
smtplib.SMTP 와 from email import message 패키지로 가능하다.
파일 첨부는 email.mime 의 multipart와 text 패키지로 가능하다.
파일 추가 시에는 헤더를 Content-Disposition: attachment로 줘야한다.
logger.handelrs.SMTPHandler 로 메일로 로그를 받을 수 있다.
쉘
서브프로세스
1 2 3
import subprocess
subprocess.run(['ls', '-al'])
커맨드 체이닝
여러 커맨드를 한 번에 실행시킬 경우 인젝션 방어를 위해 다음과 같이 처리하는 것이 좋다.
노드 레벨의 sysctl과 네임스페이스 sysctl과 같은 커널 파라미터를 sysctl 인터페이스로 변경할 수 있다. 변경 가능한 파라미터는 다음과 같다.
abi: 실행 도메인 특성
fs: 특정 파일 시스템, 파일 핸들링, inode, dentry, 쿼터 조정
kernel: 전역 커널 설정 변경
net: 네트워킹
sunrpc: SUN rpc 호출
vm: 메모리 조정, 버퍼 및 캐시 관리
user: 사용자별 네임스페이스 제한
taint, toleration 을 같이 사용해 사이드이펙을 방지하라고 권하고 있다.
ARP 캐시
neighbour: arp_cache: neighbor table overflow!
쿠버네티스가 대량의 IP를 소비하면서 ARP 캐시 공간을 모두 사용할 경우 ARP 캐시 관련 변수 조절이 가능하다. 대규모 HPC 클러스터에서는 흔한 일이며 쿠버네티스의 주소 소진을 방지할 수 있다. 이 오류는 nodes with 40+ cores && more than 16 segments in each node 정도에서 발생하는 듯 하다.
net.ipv4.neigh.default.gc_thresh1: gc_thresh1 represents the minimum number of entries that may be in the ARP cache. Garbage collection will not be triggered if the number of entries is below this setting.
net.ipv4.neigh.default.gc_thresh2: gc_thresh2 represents the soft maximum number of entries that may be in the ARP cache. This setting is arguably the most important, as ARP garbage collection will be triggered ~5s after reaching this soft maximum.
net.ipv4.neigh.default.gc_thresh3: gc_thresh3 represents the hard maximum number of entries in the ARP cache.
// IndexedDB 는 Promisify 되어있지 않아서 라이브러리가 필요하다. importScripts( 'https://cdn.jsdelivr.net/npm/localforage@1.7.3/dist/localforage.min.js' );
// 캐시하고 싶은 POST 엔드포인트 const ENDPOINT = 'https://your-domain/post-request';
const bin2Hex = (buffer) => { let digest = ''; const dataView = newDataView(buffer); for (let i = 0, len = dataView.byteLength; i < len; i += 4) { let value = dataView.getUint32(i); // hex 로 바꾸면 패딩비트 0 이 제거된다. let hex = value.toString(16); // uint32 는 4bytes 로 나온다. let padding = '00000000'; // 패딩을 더해서 뒤에서 잘라준다. let paddedValue = (padding + hex).slice(-padding.length); digest += paddedValue; }
return digest; };
const postRequestFetchListener = (fetchEvent) => { const requestUrl = fetchEvent.request.url; const method = fetchEvent.request.method.toUpperCase(); // 맞는 엔드포인트인지 확인 if (!(method === 'POST' && requestUrl === ENDPOINT)) { return; }
fetchEvent.respondWith( fetchEvent.request .clone() .arrayBuffer() .then((buffer) => { const requestBody = String.fromCharCode.apply( null, newUint8Array(buffer) ); // request body 에 원하는 조건만 캐시처리할 수 있게 한다. if (requestBody.includes('cache=1')) { // 속도면에서 다른 해싱 알고리즘을 사용해도 무방하다. return crypto.subtle.digest('SHA-1', buffer); }
// IndexedDB 에서 캐시된 키를 찾는다. return localforage.getItem(sha1Hash).then((cachedResponse) => { if (cachedResponse) { console.log('Cached repsonse => ', cachedResponse); returnnew Response(cachedResponse, { // 여기서 statusCode 를 304 로 내보내고 싶었으나, Body 를 반환할 수 없었다. status: 200, statusText: 'OK', headers: { 'Content-Length': cachedResponse.length, 'Content-Type': 'application/json', // 그래서 커스텀 헤더를 추가했다. 'X-SW-Cache-Hit': 1, 'X-SW-Cache-Type': 'POST', }, }); }
// 캐시된 데이터가 없을 경우 새로 요청한다. return fetch(fetchEvent.request).then((response) => { console.log('Fetching response => ', response.clone());
// 정상적일 경우만 IndexedDB 에 저장한다. if (200 <= response.status && response.status < 400) { // 이 작업은 비동기지만 굳이 기다리지 않아도 된다. response .clone() .text() .then((textResponse) => { console.log('Caching response => ', textResponse); return localforage.setItem(sha1Hash, textResponse); }); }