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

개요 기능적 확장을 계속하다 보면 프로젝트에 사용하지 않는 모듈 또는 code들이 생겨난다. 이러한 파일들은 지속적으로 쌓이게 되면서 나중에는 어떤 코드들이 현재 쌓여있는지 알 수가 없게 된다. 이를 혁신적으로 도와주는 친구가 있는데, madge라는 친구가 있다. 흔히 madge의 경우에는 circular dependency를 찾기 위해서 많이 사용하고 있는데, 쓸데없는 코드를 찾는데도 도움을 줄 수 있다. 예제 // package.json { "scripts": { "check:orphans-check": "npx madge --orphans --extensions ts ./src" } } 사용법은 간단하다. 위와 같이 scripts에 등록해서 주기적으로 체크를 해주면 된다. 주의점은 실제로 사용하지 ..

개요 nest.js에서의 grpc의 에러 처리에 대해서 간략하게 알아보도록 하자. grpc status code http status code와 같이 grpc도 상태코드가 존재한다. 자세한 내용은 error code항목을 참조하면 좋다. RpcException nest.js에서는 RpcException을 통해서 쉽게 에러를 보내줄 수 있다. // internal server error throw new RpcException({ code: 13, message: 'malgogi internal server error' }) 결론 http의 status code와 유사하기 때문에 크게 기술할 내용은 없을 것 같다. 문서를 보고 적절한 코드와 메세지로 처리해주면 될 것 같다.

개요 이전 챕터까지는 통신방식의 구현까지 다루었다. 이제부터는 부가 기능에 대해서 하나씩 다루어 보려고 한다. 우선 이번에는 Metadata를 다루어 보자. Metadata HTTP Header와 같이 GRPC에서는 metadata를 설정할 수 있다. (metadata) 실제적으로 Headers frame을 통해서 통신한다. 예제 예제 1. 서버에서 클라이언트 헤더 값을 받을 때 // HeroesController에 아래와 같이 값을 가져올 수 있다. @GrpcMethod('HeroesService', 'FindOne') findOne(data: HeroById, metadata?: Metadata, call?: ServerUnaryCall): Hero { // console..

개요 GRPC의 통신방식은 크게 4가지 방식이 존재한다. (unary, server streaming, client streaming, bidirectional-streaming) 이를 nest.js에서 구현해보도록 하자. 기본적으로 GRPC에 관한 내용은 GRPC 정의 및 통신 방식, 기본 구현은 GRPC 기본 구현을 살펴보고 오면 좋다. 통신방식 1. unary 해당 부분은 GRPC 기본 구현에 구현이 되어 있으므로 해당 내용을 참조하도록 하자. 2. server streaming 해당 방식은 단일 client 요청에 여러 server response를 보낼 때 사용한다. 이전에 구현했던 hero.proto 파일에 추가해보자. cf) repeated는 단일 message안에서 여러개의 item을 보내..

개요 nest.js에서 제공하는 microservice module은 microservice들 간의 통신을 쉽게 구현하게 되어 있다. 기본적으로 http base를 통해서 web server를 구현하지만 여러가지 규격의 통신이 필요할 때가 있는데, nest.js에서는 이를 구현하기 편리하게 되어있다. grpc를 사용해서 통신하는 튜토리얼을 작성해보자. 설치 아래의 모듈을 추가해주도록 한다. # microservice를 구현하기 위해서 사용한다. yarn add @nestjs/microservices --save # grpc 용 yarn add @grpc/grpc-js @grpc/proto-loader --save예제 우선 nest.js guide 가이드에 나와 있는 예제를 찬찬히 따라해보자. 지금은 잘 ..