JiH 개발 일지

이번 포스트에서는 sharp와 exif-reader를 이용하여 JPEG 이미지의 Exif 데이터를 조회해보겠습니다. JPEG 이미지를 다루는 프로젝트를 진행하던 중, 이미지의 헤더(메타 데이터)를 조회해야 할 필요가 있었습니다. sharp의 metadata() API를 사용하면 이미지의 메타 데이터를 얻어올 수 있습니다. 하지만, 수정일자, 위치 등의 상세한 정보는 EXIF 형식으로 저장되어 있고, sharp에서는 Exif 데이터를 Buffer로 반환해줍니다. 검색을 통해 Buffer를 input으로 사용하는 모듈 exif-reader를 발견했습니다. contributor 에 익숙한 프로필이 보여 확인해보니 sharp의 contributor였습니다. 반가움과 동시에 강한 믿음이 샘솟아 바로 설치했습니다...

sharp를 이용하여 이미지를 처리하다 퀄리티 이슈가 발생하였습니다. 이미지 파일의 크기를 줄이기 위해 PNG파일을 JPEG 포맷으로 변경하면서 발생하였는데, 이유와 해결 방법에 대해 알아보겠습니다. 왜 JPEG를 사용하면 이미지 퀄리티가 떨어질까? PNG는 비손실 압축을 이용하는 이미지 표준이며, RGB값과 함께 8비트의 알파 채널(투명도)이 있습니다. 비손실 압축을 이용하기 때문에 이미지 손실이 없습니다. 대신, 이미지 자체의 크기를 줄이지 않는 한, 파일의 크기를 줄일 수 없기 때문에 주로 원본 이미지에 사용합니다. JPEG는 손실 압축을 이용한 이미지 표준 중 하나이며, PNG와 다르게 알파채널이 존재하지 않습니다. 손실 압축을 이용하기 때문에 이미지를 저장할 때마다 이미지 품질이 감소할 수 밖에..

저는 현재 JavaScript를 사용해 인턴 과제를 진행하고 있습니다. 모듈을 사용하면서 config나, option, headers 같이 객체를 파라미터로 전달하는 함수를 많이 볼 수 있었는데, 이런 함수들을 사용하다 보니 조건에 따라 객체를 구성하고 싶다는 생각이 들어 찾아보았습니다. 제 첫 구현은 아래와 같습니다. const a = { foo: 1, bar: baz === true ? "hello" : undefined }; 이 방법은 간단하지만 항상 삼항연산자를 사용해야하고, undefined를 대입하는것이 마음에 들지 않았습니다. 또한 여러개의 속성을 추가하는 경우, 표현식을 중복해서 사용해야 한다는 점도 불편했습니다. const a = { foo: 1, bar: baz === true ? "h..

Sharp란? 샤프란 이미지 변환용 node 라이브러리입니다. 리사이징, 색상 변환, 변형 등의 기능을 제공합니다. Node.js 12.13.0 이상의 버전만 지원합니다. 공식문서: https://sharp.pixelplumbing.com github: https://github.com/lovell/sharp 지원하는 포맷 입력 JPEG PNG WebP AVIF TIFF GIF SVG 출력 JPEG PNG WebP AVIF TIFF 입출력을 위해 스트림, 버퍼 개체를 사용할 수 있습니다. 설치 $npm install sharp $yarn add sharp Cross-platform 특정 OS, CPU를 선택하여 설치할 수 있습니다. npm install --platform=... --arch=... --..

Puppeteer 란? Puppeteer는 Node.js를 이용하여 Chrome / Chromium을 제어하도록 도와주는 라이브러리입니다. 기본적으로 headless로 동작하며, 설정을 이용하여 headless를 무효화 할 수 있습니다. 주로 웹자동화, 크롤링을 위해 사용하는 라이브러리이며, Selenium과 비슷한 역할을 합니다. 단, Selenium은 다양한 언어로 사용할 수 있는 반면, Puppeteer는 Javascript로만 사용할 수 있습니다. Selenium에 비해 나은 점은 Chrome 한정 더 상세한 조작 및 성능 측정 등이 가능하다는 것입니다. github: https://github.com/puppeteer/puppeteer 공식문서: https://pptr.dev Headless란?..