This week I Learned 20

#!/bin/bash
DATABASE=XXX
EXCLUDED_TABLES=(
	xx1
	xx2
)
IGNORED_TABLE=''
for TABLE in "${EXCLUDED_TABLES[@]}"
do :
   IGNORED_TABLE+=" --ignore-table=${DATABASE}.${TABLE}"
done

mysqldump ${DATABASE} -t ${IGNORED_TABLE} > dump_file | gzip dump_file.gz

덤프 과정 후 파이프로 압축하는 것도 좋다.

Godbolt 와 Monaco 에디터

갓볼트는 여타 다른 사이트보다 더 섬세한 부분이 있다면 키맵에 vi 모드가 있다는 것이다.

에디터는 MS 의 Monaco 를 사용 중이다.
Vim 기능은 어떻게 내장했는지 궁금하다.

https://editor.bitwiser.in/

위 사이트가 데모가 될 수 있을 듯 하다.

이슈를 좀 뒤져보았다. 모나코 이슈에 누군가 기능을 요청하고 바운티를 걸었다. 그 결과로 brijeshb42/monaco-vim 가 탄생.

위 데모 페이지를 보면 emacs 모드도 지원한다. 화살표 키 없는 키보드를 쓰는 내겐 가능하면 vi 모드를 지원하는 에디터가 고마운데 벨로그도 vi 모드를 지원하면 좋겠다.

그래도 emacs 모드 일부를 지원하는 듯 하다.

ctrl+n
ctrl+p
ctrl+f/e
ctrl+b/a
ctrl+d/k

정도로 대충 버틴다.

참 이 키들은 GitHub 에디터에서도 지원한다.

Caddy 2

Go 언어로 만들어진 Caddy 가 버전 2 를 찍고 대대적인 개선을 한 듯 하다.

기존 JSON 타입의 설정 파일 대신 Caddyfile 포맷을 지원하여 더 깔끔한 설정 파일을 생성할 수 있을 듯 하다.

예전에 이 솔루션을 검토할 때 라이선스 제약이 있어서 사용하기를 포기했었는데 커머셜 정책이 변경되었다. 출처

Beginning today, commercial licenses are no longer required for commercial use of any Caddy binaries. Going forward, only commercial use of our build server (including the download page and getcaddy.com) requires a subscription: all binaries are licensed the same. Existing customers will be grandfathered in with no changes to their subscription and will be able to keep using the download page as before. Using our download page for non-commercial use will continue to be free. All binaries will be Apache 2 licensed.

로컬 환경 세팅을 nginx 에서 caddy 로 변경하는 작업을 한 번 해봐야겠다.

프록시 객체

웹 프론트엔드 프레임워크를 보면 데이터가 변경되면 자동으로 이 데이터에 바인드 된 UI 요소들이 갱신되는 것을 볼 수 있다.

앵귤러, 리액트, 뷰 등이 그런 기능을 가지고 있는데 이런 기능은 어떻게 구현하는가 궁금해 한 적이 있다면 ES6 에 도입된 Proxy 객체를 통해 비슷한 역할을 하는 코드를 작성할 수 있을 듯 하다.

Proxy 를 생성하려면 타겟과 핸들러가 필요하다.

new Proxy(타겟, 핸들러)

타겟은 반드시 객체 형태여야 한다. 기본형 타입의 변수는 사용할 수 없다.
get 함수, set 함수를 통해 값이 제공되거나 변경되는 것을 mock 할 수 있다.

let target1 = { value: 1 };
let proxy1 = new Proxy(target1, {
  get(obj, prop) {
    // can do something
    return true;
  },
  set(obj, prop, value) {
    // can do something
    return true;
  },
});

proxy1.value;
proxy1.value = 2;

타겟 객체와 프록시 객체의 관계를 보기 위해 간단한 코드를 작성해 보았다.

const item1 = {
  title: "hello",
  value: 1,
};

const proxyHandler = (store) => {
  console.log(`proxy to ${store.title}`);
  return {
    get(obj, prop) {
      if (prop in obj) {
        console.log("->", prop, "in served");
      }
      return obj[prop];
    },
    set(obj, prop, value) {
      if (prop in obj) {
        console.log("->", prop, "in changed");
      }
      obj[prop] = value;
      return true;
    },
  };
};

const targetStore = [item1];
const targetProxy = targetStore.map((store) => {
  return new Proxy(store, proxyHandler(store));
});

console.log({ target: item1.title });
console.log("--- 자 시작해 볼까?");
console.log("--- 타겟 객체를 직접 변경하면?");
item1.title = "안녕";
console.log("--- 타겟 객체를 직접 접근하면?");
console.log({ target: item1.title });
console.log("--- 프록시 객체를 접근하면?");
console.log({ proxy: targetProxy[0].title });
console.log("--- 프록시 객체를 변경하면?");
targetProxy[0].title = "잘가";
console.log({ target: item1.title, proxy: targetProxy[0].title });