2023/01 Daily Log
2023–01–09
— verbose
verbose는 말 수가 많은이란 뜻이라고 한다. 그래서 부가 정보 출력 옵션명을 보통 verbose라고 짓는구나.
효율적으로 작업하기
변수명을 컨벤션에 맞게 통일하는 작업을 진행했는데, 완료하고 보니 테스트 코드에서 에러가 꽤 났다. 다시 리셋하고 한 파일 작업할 때마다 테스트를 돌려보는 중인데, 진즉에 요렇게 했어야 했다.
2023–01–10
접근 제어
VPN 접속 시, 8080 포트를 특정 도메인으로 접근이 가능하다. 하지만 이게 되는 프로젝트가 있고 안 되는 프로젝트가 있었는데, 외부에서의 접근을 허용해줘야 했다.
Angular의 경우, 아래와 같이 외부 접근을 허용하는 것이 가능하다.
ng serve --host=0.0.0.0 --disable-host-check2023–01–12
dynamic import in typescript
ng update 스크립트를 작성하려고 angular 코드를 참고하던 중, 아래와 같은 코드가 있었다.
export async function loadEsmModule<T>(modulePath: string|URL): Promise<T> {
const namespaceObject =
(await new Function('modulePath', `return import(modulePath);`)(modulePath));
// If it is not ESM then the values needed will be stored in the `default` property.
// TODO_ESM: This can be removed once `@angular/*` packages are ESM only.
if (namespaceObject.default) {
return namespaceObject.default;
} else {
return namespaceObject;
}
}동적으로 ESModule을 로드할 때 사용하는 함수인데, 형태가 특이했다. 왜 굳이 이렇게 사용하는지 알아 보니, 타입스크립트의 target 속성에 따라 import를 처리하는 방식이 달라지기 때문이었다.
import('@angular/core').then(console.log);target 값에 따라 위 코드는 아래와 같이 트랜스파일된다.
// target: es6
Promise
.resolve()
.then(function () { return require('@angular/core'); }).then(console.log);
// target: esnext
import('@angular/core').then(console.log);target에 따라 import문이 그대로 있을 수도, require문으로 바뀔 수도 있는 것이다. require문으론 ESModule을 제대로 로드할 수 없기 때문에 import문을 문자열 형태로 함수에 넣고 실행하는 방법으로 우회한 것이었다(함수를 생성자 형태로 사용해서 실행하는 방법도 처음 봤다…)
오픈소스를 까보면 공부가 많이 된다고 하던데, 정말 그런 것 같다.
2023–01–13
pnpm prettier 플러그인
pnpm 전환 후, prettier 플러그인이 적용되지 않는 이슈가 있었다. prettier 버전도 최신이었고, 이슈 해결법으로 제시된 방법들을 모두 사용해봐도 동작하지 않아 동일한 작업을 스크립트로 작성해 pre-commit 훅에 넣어주려고 했었다.
그런데.. 플러그인 버전을 최신으로 업데이트하니 잘 동작했다(셀장님 👍) 플러그인 변경 사항을 봐도 딱히 바뀐 건 없어보이는데… 아직도 원인이 뭔지 모르겠다ㅠㅠ
Get 안광훈’s stories in your inbox
Join Medium for free to get updates from this writer.
어떤 라이브러리가 동작하지 않는다 -> 일단 최신 버전으로 올려본다 이것도 하나의 방법이 될 수 있을 것 같다.
2023–01–15
javascript 비트 이동
보통 소수를 정수로 변환할 때 아래와 같은 방법을 사용했다.
const float = 10.9;
const int = parseInt(float, 10);
const int = Math.floor(float); // 버림그런데 비트 이동을 통해서도 변환이 가능하다. javascript의 비트 연산은 정수에서만 이뤄지기 때문이다.
const float = 10.9;
const int = float >> 0; // 0만큼의 비트 이동이기 때문에 정수값에는 변화가 없다신기하다.
2023–01–26
document.createElement 모킹
document.createElement를 모킹해야 할 일이 있었다. video 엘리먼트를 생성할 때만 다른 로직을 실행하고, 다른 태그를 생성할 때는 원 메서드를 실행해야 했다.
아래와 같이 해결할 수 있었다.
const originalCreateElement = document.createElement;
(document as any).createElement = (...args: Parameters<typeof document.createElement>) => {
if (args[0] === 'video') {
...
}
// this에 document를 바인딩해줘야 한다
return originalCreateElement.apply(document, args);
};2023–01–30
allowedNonPeerDependencies
angular 기반 npm 패키지를 관리할 때, ng-package.json 파일을 작성해야 한다. 패키지를 빌드할 때 필요한 메타데이터를 작성하는 파일이라고 보면 된다.
angular에선 가능하면 외부 의존성을 peerDependencies(이하 peerDeps)에 명시하는 걸 권장한다. dependencies(이하 deps)에 명시할 경우 패키지를 사용하는 서비스에 외부 의존성이 여러 버전 설치될 수 있기 때문이다.
그럼에도 불구하고 deps에 명시하는 게 더 좋은 경우도 있다. 외부 의존성을 서비스에서 따로 설치해서 사용하는 경우가 거의 없는 경우이다. 이런 경우 오히려 peerDeps에 명시하면 외부 의존성을 따로 설치해줘야 해서 번거롭다.
하지만 외부 의존성을 deps에 명시하고 빌드를 실행하면 실패한다. peerDeps를 권장하는 angular이기에, deps에 추가할 패키지는 따로 목록을 명시해줘야 한다.
// ng-package.json
{
"allowedNonPeerDependencies": ["sortablejs"]
}which 사용 지양
특정 명령어가 실행 가능한 지 체크하기 위해 종종 which를 사용한다. 하지만 which 사용을 지양하고 command -v 같은 내장 명령어 사용을 권장하는데, 이유는 다음과 같다.
- 명령어가 실행 가능하지 않을 때의 상태가 없는 경우가 많음
- 외부 의존성에 의존함
- OS에 따라 실행 방식이 다를 수 있음
