• 이미지 압축 기본 설정값 참조: mozjpeg(75), pngquant([75, 85])¹

---

Footnotes

1. https://github.com/antonreshetov/image-optimizer/blob/master/src/main/store/module/app.js#L32-L53 ↩

• yarn upgrade-interactive | Yarn¹
• Find newer versions of package dependencies than what your package.json allows²

---

Footnotes

1. 이 명령은 업그레이드를 수행하기 전에 오래된 패키지를 표시하여 사용자가 업그레이드할 패키지를 선택할 수 있도록 합니다. ↩

2. npm-check-updates는 지정된 버전을 무시하고 package.json 종속성을 최신 버전으로 업그레이드합니다 . ↩

import sharp from 'sharp'
import fg from 'fast-glob'

const entries = await fg('./**/*.png')

for (const entry of entries) {
  const trimmedBuffer = await sharp(entry).trim().toBuffer()
  const trimmedImage = sharp(trimmedBuffer)
  const trimmedMetadata = await trimmedImage.metadata()

  trimmedImage
    .resize({
      width: Math.round(trimmedMetadata.width / 2),
      height: Math.round(trimmedMetadata.height / 2),
    })
    .png()
    .toFile('output.png')
}

offset(top, left)값, 이미지 사이즈 설정으로 crop 구현이 가능하다

sharp('img.png')
  .extract({
    left: 50,
    top: 50, 
    width: 200, 
    height: 400
  })

---

• resize
• extract

이미지 다운로드 구현. 이미지 응답값을 buffer로 변환해서 파일쓰기로 저장한다.

const fs = require('fs')
const util = require('util')
const fetch = require('node-fetch')

const writeFile = util.promisify(fs.writeFile)
const mkdir = util.promisify(fs.mkdir)

const FOLDER_PATH = 'FOLDER_PATH'

async function download({ url }) {
  const response = await fetch(url)
  const buffer = Buffer.from(await response.arrayBuffer())

  if (!fs.existsSync(FOLDER_PATH)) {
    await mkdir(FOLDER_PATH)
  }

  await writeFile(url, buffer)
}

imagemin을 사용하려고 하는데 module로 라이브러리가 업데이트 되어서 찾아본 내용. 혼란스러운 부분도 있지만 성숙해지는 과정이라고 본다.

• Pure ESM package · GitHub
• Get Ready For ESM. JavaScript Modules will soon be a… | by Sindre Sorhus | 🦄 Sindre Sorhus’ blog
• Hello, Modules!. JavaScript Modules, also known as ESM… | by Sindre Sorhus | 🦄 Sindre Sorhus’ blog
• Publish ESM and CJS in a single package¹

---

Footnotes

1. esm 배경과 tsup, unbuild 라는 두개의 해결방법을 소개해주고 있다. ↩

• Node.js Child Processes: Everything you need to know¹
• The definitive Node.js handbook
• Tao of Node - Design, Architecture & Best Practices
• Useful Built-in Node.js APIs

---

• Execa 9: our biggest release

---

• GitHub - ds300/patch-package: Fix broken node modules instantly 🏃🏽‍♀️💨[^57-2]

---

• [NODE] 📚 PM2 모듈 사용법 - 클러스터 / 무중단 서비스
• PM2를 활용한 Node.js 무중단 서비스하기

---

glob

• GitHub - isaacs/node-glob
• GitHub - mrmlnc/fast-glob
• GitHub - sindresorhus/globby
• GitHub - SuperchupuDev/tinyglobby

---

Footnotes

1. spawn(), exec(), execFile(), fork() ↩

Promise를 거부할 때 객체 를 사용하도록 강제 합니다.¹

// ❌
Promise.reject('An error occurred');

// ✅
Promise.reject(new Error('An error occurred'));

항상 Error객체로 Promise를 거부하는 것이 가장 좋습니다. 이렇게 하면 오류 개체가 스택 추적을 저장하기 때문에 오류가 발생한 위치를 더 쉽게 추적할 수 있습니다.

---

Footnotes

1. 14 Linting Rules To Help You Write Asynchronous Code in JavaScript - Maxim Orlov ↩

const formData = new FormData();
const single = document.querySelector('input[type="file"]');
const multiple = document.querySelector('input[type="file"][multiple]');

formData.append('single', single.files[0]);

[...multiple].forEach((file, index) => {
  formData.append(`multiple_${index}`, file);
})

fetch('https://example.com/posts', {
  method: 'POST',
  body: formData,
})

• 조건에 따라서 브라우저에서 자동으로 발생¹
• OPTIONS 메서드로 요청
• cloudfront에 OPTIONS 메서드 설정이 안되어 있다면 실패²

---

Footnotes

1. 단순 요청(Simple requests) ↩

2. CloudFront 배포의 캐시 동작이 HTTP 요청에 대한 OPTIONS 메서드를 허용함 ↩

• XMLHttpRequestEventTarget.onprogress¹
• ReadableStream - Web API | MDN²
• Request Config - onUploadProgress³

---

Footnotes

1. XMLHttpRequest가 완전히 성공할때까지 정보를 주기적으로 호출하는 함수 ↩

2. fetch 에서는 ReadableStream, Response 조합으로 구현 가능 ↩

3. axios 에서는 onUploadProgress 콜백(progressEvent)으로 구현 ↩