개요 flamegraph를 통해서 쉽게 성능 분석을 할 수 있다. 아래 예제는 dtrace를 mac 환경에서 실행했고, 이외에도 perf나 다양한 툴들을 통해 profiling하고, 이를 flamegraph로 만들어 낼 수 있다. 준비사항 flamegraph를 아래와 같이 설치해준다. brew install flamegraph # 패키징된걸 사용한다. test app # app 실행 후, pid 확인 ps | grep -e "node"; # 가능한 probe 정보를 확인할 수 있다. profile probe에 관련된 것들을 확인 sudo dtrace -l | grep -e "profile" # user stack을 확인한다. pid를 알맞게 넣어주면 된다. # -x는 runtime args를 지정할 수 ..

개요 sharp.js를 통해서 여러가지 이미지 처리를 할 수 있다. 이 글에서는 blurhash를 뒷배경으로 깔아보자. 준비사항 1. 이미지 준비 아래와 같이 무료 이미지를 준비해둔다. 2. blurhash, sharp 설치 yarn add sharp --save yarn add blurhash --save yarn add @types/sharp --dev 예제 우선 다음 단계로 진행한다. blurhash 값 생성 blurhash image decoding 원본 이미지와 합치기 1. blurhash 값 생성 sharp를 통해서 image를 로드하고, blurhash값을 생성해준다. async test(): Promise { const originalImageFilePath = path.join(__dir..

개요 apk를 add 하다보면 virtual option이 있다는 것을 알고 있다. 이에 대해서 살펴보도록 하자. --virtual virtual package를 생성해서 install한다. 이를 통해서 쉽게 해당 package를 삭제 가능하다. 예제 아래의 예제는 curl 패키지를 인스톨하고 virtual을 제거하는 예제이다. 1. dockerfile 추가 # Dockerfile FROM node:12.22.5-alpine LABEL maintainer="malgogi" RUN apk add --no-cache --virtual build_dependencies curl RUN apk del build_dependencies2. build & run docker build -f ./Dockerfile ..

개요 trampoline이라는 기법을 알아보려고 한다. 시나리오 먼저 1 ~ n 까지 더하는 함수를 작성한다고 하자. 테스팅 코드 우선 아래의 코드를 통해서 테스트를 진행할 것이다. const test = (name, n, fn) => { try { console.time(name); fn(n); console.timeEnd(name); } catch (error) { console.error(error); } } // test('counter1', 100, counter); 1. 기본 우리는 바로 다음과 같이 작성할 것이다. const counter1 = (n) => { let sum = 0; for (let i = 1; i { if (n === 0) { return n; } return n + cou..

개요 공통된 로직을 처리해야 할 경우 interceptor를 활용할 수 있다. nest.js grpc의 경우에도 interceptor를 활용할 수 있게 제공이 되는데, 이를 활용해 보도록 하자. 예제 1. Interceptor 생성 아래와 같이 interceptor에 대한 code를 작성해준다. @Injectable() export class GrpcLoggingInterceptor implements NestInterceptor { private readonly logger = new Logger(GrpcLoggingInterceptor.name); intercept(context: ExecutionContext, next: CallHandler): Observable { this.logger.log(..

개요 react-cropper를 사용하여 이미지를 저장하게 될 때, 퀄리티가 낮아지는 현상이 있다. 일반적인 사진이미지는 괜찮지만 만들어진 이미지 (pixel art)의 경우 그 차이가 크게 나게 된다. 해결방법 아래의 코드를 추가해줘서 픽셀을 보간하면 된다. 다만 보간을 하는 형태이기 때문에 이미지가 약간 blur된 효과가 생기는 것을 알 수 있다. getCroppedCanvas({ ...args, imageSmoothingEnabled: true, imageSmoothingQuality: 'high' }) 출처 mdn - canvas