Footnotes

  1. 삼항연산자(ternary)의 어두운면과 우려를 나타내는 글 ↩

  2. forEach 루프 break하는 트릭. 참조하는 배열의 length값을 0으로. ↩

  3. 조건문에서 label을 지정해서 해당 블록으로 break가 가능하다는걸 보여주는 내용. 실제 적용할만한 사례는 거의 없고 글쓴이는 while+switch문에서 break를 좀 더 효율적으로 사용한 예를 보여주고 있다. ↩

  4. optional chaining 문법으로 리팩토링 하면서…변경 가능한 부분(삼항연산자, 배열, 기능탐지)과 주의사항(값 할당, 잘못된 위치에 표기), 조심할 부분(null/undefined, 연산 순서와 순위, return 항상 호출됨)으로 구분해서 정리한 글. 커밋을 보면 실제로 어떻게 작업했는지 확인도 가능하다. ↩

  5. <script /> 태그와 속성값에 대한 정리 ↩

  6. rust로 작성하고 wasm으로 컴파일해서 클라이언트 프로그램을 작성하는 방법을 자세하게 설명하고 있다. rust에 관심이 있거나 하다면 볼만한 글. ↩

  7. 종속성 구조를 파악해서 최적의 병렬화로 빠르게 데이터 가져오기 ↩

  8. structuredClone() ↩

  9. pipe, flow 제안(초안)사항을 검토하는 관점에서 보는 시각 ↩

#javascript#bookmarks
#1
import isAfter from 'date-fns/isAfter';

isAfter(new Date(), new Date(DATE))

날짜 비교 할 일이 있어서 별 생각 없이 new Date를 때렸는데 safari에서 안되는 문제가 발견되었다. 콘솔을 확인해보니 yyyy-MM-dd HH:mm:ss 해당 형태의 포멧 에서는 안된다. 평소에 new Date 보다는 moment나 date-fns같은 라이브러리를 당연하게 써오다 보니 몰랐다. 그런데 또 다른 생각을 해보자면 저런 문제가 있기 때문에 더 적극적으로 라이브러리를 사용해야 한다는 게 함정.

import isAfter from 'date-fns/isAfter';
import format from 'date-fns/format';

isAfter(new Date(), format(DATE))
#javascript#date
#159
const obj = {
  a: 1,
  b: 2,
}

console.log(obj[['a']]) // 1
console.log(obj[['b']]) // 2

이게 되네 🤔

#javascript#bug
#191

Immer가 생성하는 맵과 세트는 인위적으로 불변으로 만들어집니다. 즉, 프로듀서 외부에서 세트, 클리어 등과 같은 변경 메서드를 시도할 때 예외(throw an exception)가 발생합니다.

test('Map and Set', () => {
  const baseMap = new Map();

  const nextBaseMap = create(baseMap, (draft) => {
    draft.set('a', 1);
  });

  expect(nextBaseMap).toMatchInlineSnapshot(`
    Map {
      "a" => 1,
    }
  `);
});
#javascript#immer#Map#Set
#252
import { match } from 'ts-pattern'

type Format = 'webp' | 'jpg'

type Params = {
  id: string
  quality: keyof typeof QUALITY_MAP
  format: Format
}

const QUALITY_MAP = {
  player_background: '0',
  video_frames_start: '1',
  video_frames_middle: '2',
  video_frames_end: '3',
  lowest_quality: 'default',
  medium_quality: 'mqdefault',
  high_quality: 'hqdefault',
  standard_quality: 'sddefault',
  unscaled_resolution: 'maxresdefault',
}

const BASE_URL = 'https://i.ytimg.com'

const VI = (format: Format) =>
  match(format)
    .with('jpg', () => 'vi')
    .otherwise(() => ['vi', format].join('_'))

export function getThumbnail({ id, quality, format }: Params) {
  return [BASE_URL, VI(format), id, QUALITY_MAP[quality]]
    .join('/')
    .concat(`.${format}`)
}
#javascript#typescript#ts-pattern
#275
  • 캔버스로 동영상 프레임을 캡쳐한다.
  • 텍스트를 입력 받는다. 해당 텍스트를 서버에 보내고 음성파일을 응답받는다.
    • Blob데이터는 URL.createObjectURL()로 변환해서 img, audio 태그에 연결한다.
#blob#javascript#file#axios
#4

Footnotes

  1. 클래스에 대한 구문, 메서드, 속성, 상속 등에 대한 포괄적인 설명 ↩

  2. 클래스, 프로토타입 및 팩토리 함수 사용과 같이 객체 지향 프로그래밍을 구현하는 다양한 접근 방식을 설명과 각 접근 방식의 예와 장단점들 ↩

#javascript#classstackblitz.com
#5

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

// ❌
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 ↩

#promise#javascript
#56

Footnotes

  1. markdown을 unified를 이용해서 파싱하고 html로 변환. (플러그인 기능을 추가해서 img->figcaption 기능 추가) ↩

  2. AST가 무엇이며 일반 코드에서 어떻게 구축 하는지에 대한 설명과 기반으로 하는 사용 사례와 프로젝트 소개 ↩

  3. css 데이터 조작이 필요한 경우가 있어서 찾아봤다. 예를들어 특정 속성값만 추출해서 유닛값은 제거 한다든가. ↩

#ast#parser#unified#css#javascript
#6

Designing a JavaScript Plugin System | CSS-Tricks1

Footnotes

  1. 플러그인은 라이브러리와 프레임워크의 공통 기능이며 개발자가 안전하고 확장 가능한 방식으로 기능을 추가할 수 있도록 한다. 그래서 추가 유지 관리 부담이 없다. ↩

#plugin#javascriptstackblitz.com
#7

Quick tip: reusable Array search predicates - JASON Format

arr.filter(callback(element[, index[, array]])[, thisArg])

배열 메서드에서 2번째 인자 thisArg에 참조값을 전달해서 재사용 가능한 함수를 만드는 트릭. 단 성능 이슈가 있으므로 주의해야 한다.

#javascript#arraystackblitz.com
#8