메로그

sharp 를 사용해서 이미지를 리사이즈 할시 모바일에서 찍은 사진들이 90도 돌아가는 경우가 발생합니다.이미지가 리사이즈되면서 이미지의 메타데이터를 기억하지 못해 발생하는 문제인데, 해결방법이 2가지가 있습니다. 첫번째 방법으로, .withMetadata() 함수를 사용해서 원본 이미지에 메타 데이터를 넣어주는 방법입니다.const image = sharp(data) .withMetadata() .resize(width, height) .toBuffer()두번째 방법으로, .rotate() 를 resize 전에 넣는 방법이 있습니다.rotate 의 각도를 제공하지 않으면 EXIF 데이터(메타 데이터)에서 결정됩니다.const image = sharp(buff);const webpBuffer = a..

OpenAI Embedding 주어진 텍스트에 대한 연관성을 측정하기 위한 임베딩 모델로, 문장의 임베딩 유사도를 계산하여 문맥적 검색을 할 수 있습니다. 예를 들어, 찾는 문장을 임베딩하여 벡터 데이터베이스로 만들고 질의를 받아 임베딩한 벡터 데이터를 가지고 저장한 데이터들과 유사도를 측정할 수 있습니다. 생성 주의: openai embedding 을 사용하기 전에 key 를 미리 발급받아야 한다. api docs 에는 예제에 embeddings.create 로 설명되어 있지만, 필자는 아래와 같이 하도록 하겠다. 모델은 text-embedding-ada-002 을 권장한다. import { Configuration, OpenAIApi } from 'openai'; const configuration ..

이미지 최적화 PC, Mobile 에서 작업을 하다보면 이미지 크기로 인해 웹페이지 성능이 안 좋아지는 경우가 있다. 웹페이지 성능개선을 하다보면 LightHouse 를 사용하게 되는데 여기서 png, jpeg, jpg 등의 이미지 확장자를 사용하는 경우, webp 로 변경해서 최적화하라는 해결방안을 볼 수 있을 것이다. Webp Webp 는 구글이 만든 이미지 포맷으로 png, jpeg 보다 더 나은 압축을 제공하여 품질은 같지만, 크기를 더 작게 저장할 수 있다. 설계 기존은 클라이언트에서 이미지를 업로드하면 CDN 을 걸쳐서 S3 에 이미지를 업로드 하고, 사용시에는 S3 에 저장된 이미지를 불러서 사용하는 방식을 이용하고 있었다. 여기에 Lamda@edge 를 이용해서 cdn 에 왔을시 리사이징한..