메로그

레거시라고 하기에는 민망하지만, nuxt2 가 EOL 이 되었기 때문에 레거시 프로젝트라고 지칭하겠습니다.기존 사용했던 nuxt2 프로젝트는 node@16 기반으로 프로젝트가 진행되었고 그 이후로 특별한 버전 업데이트틀 진행하지 않았습니다.하지만, 계속해서 프로젝트는 진행되며 보안, 성능, 최신 기술, 호환성 등의 문제가 발생할 수 있다 판단하여 node 버전을 최신 LTS (20.17.0) 으로 올리는 판단을 진행하였습니다.노드 버전 업데이트 후... 문제 발생우선 node 버전을 최신 LTS 에 상향 시킨 후, 호환성 문제와 OpenSSL 에러 문제(Node 17 부터 OpenSSL 3 을 기본적으로 사용하는데 구버전의 API 에서는 사용하지 않아)가 발생하기 시작하였습니다.OpenSSL 해결방법일단..

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 에 왔을시 리사이징한..

npkill npkill 명령어는 오래된 라이브러리를 찾아서 삭제할 수 있는 npm 패키지 입니다. 실행 npx npkill

cross-env 란? 환경변수 값을 주어 빌드 할시 OS 마다 환경변수를 설정하는 방법이 달라서 오류가 나는 경우가 발생한다. 예를 들어, build: "NODE_ENV=production webpack --progress" 를 사용하는 경우, Mac 에서는 되지만, Windows 에서는 에러가 나는 것을 확인하였다. 이를 해결하기 위해 cross-env 모듈을 사용한다. 설치 npm install cross-env 앞에 cross-env 키워드를 붙여 사용해주면 동적으로 환경 변수가 변경되며 모든 운영체제에서 동일한 방법으로 환경 변수를 변경할 수 있다. build: "cross-env NODE_ENV=production webpack --progress"