Astro를 사용한 프로젝트에서 빌드를 하는데 JavaScript heap out of memory 에러가 발생했다. 쉽게 해결하자면 NODE_OPTIONS=--max_old_space_size1 설정해서 우회할수는 있겠지만 정리가 필요해서 메모를 남겨본다. 일단 원인은 파일사이즈가 크다는 점, 그리고 카테고리(국가)별 데이터가 많다는 점인데 개선할만한 부분은 두가지 정도인 듯.

  • 가능한 전처리해서 데이터를 다시 생성해서 참조
  • Astro.glob2을 사용해서 조건부로 데이터를 가져오기

예상치 못한 에러였는데 역시 트레이드오프는 존재하기 마련이다.

Footnotes

  1. --max-old-space-size=SIZE (in megabytes) ↩

  2. Astro.glob() ↩

#astro#node#memory
#301
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

Footnotes

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

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

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

#fetch#onprogress
#52

Advanced Features: Static HTML Export | Next.js

next export

앱의 HTML 버전을 빌드. .out 디렉토리에 빌드된 페이지 파일을 복사합니다.

#next#static
#49
// cannot be used as a JSX component

@types/react, @types/react-dom에 대한 참조가 잘못되면서 발생하는 이슈

#react
#200

discard1

git checkout -- ./index.js

리모트 브랜치 가져오기

git remote update

Footnotes

  1. 명령어로 discard를 하려면 ↩

#git
#105

html

<head />

구조화된 데이터

lang

favicon

Footnotes

  1. 다양한 관점에서 파비콘을 분석한 글 ↩

#html#favicon
#143

스트리밍 비디오 다운로드 할 경우 403 에러가 발생할때 해당 옵션으로 우회한다.1

youtube-dl --referer "URL" --user-agent "UA"

dmRef() {
  youtube-dl $1 --referer $1 --user-agent "UA"
}

Footnotes

  1. https://www.reddit.com/r/youtubedl/comments/g342nr/masterm3u8_http_error_403_forbidden_youtubedl_or/ ↩

#youtube-dl#zsh
#164

https://school.cucumber.io/courses/take/bdd-with-cucumber-javascript/lessons/11261249-introduction-to-bdd

BDD는 무엇을 의미합니까?

BDD는 시스템의 원하는 동작을 협력적으로 지정하는 접근 방식입니다. 행동의 일부가 합의될 때마다 우리는 그 행동을 구현할 코드의 개발을 “추진”하기 위해 해당 사양을 사용합니다.

BDD의 세 가지 관행은 무엇이며 스토리에 어떤 순서로 적용합니까?

우리는 스토리에 필요한 행동의 범위를 공동으로 발견 하는 것으로 시작합니다. 일단 우리가 행동에 동의하면 우리는 비즈니스가 읽을 수 있는 언어로 사양을 공식화 합니다. 마지막으로 공식화된 사양을 자동화 하여 시스템이 실제로 예상대로 작동하는지 확인합니다.

Cucumber와 BDD는 어떤 관련이 있습니까?

Cucumber는 문서를 이해하고 자동화된 테스트로 변환하는 도구입니다.

BDD는 세 가지 방식으로 구성된 협업적 접근 방식입니다. BDD 실무자는 Cucumber를 사용하여 문서를 자동화할 수 있습니다.

”살아있는 문서”의 특별한 점은 무엇입니까?

문서가 애플리케이션의 동작과 동기화되지 않을 때 자동으로 알려 주기 때문에 “살아있는 문서”라고 부릅니다. 그것이 특별한 점입니다.

완료에 대한 정의의 일부로 이를 검토할 수 있지만 자동으로 유효성이 검사되지 않더라도 작성한 모든 사양 문서에 대해서도 마찬가지입니다.

그것은 자동화된 테스트에 의해 생성 되지 않습니다 - 여전히 작성해야 합니다! 자동화된 테스트는 귀하가 작성한 내용이 사실인지 아닌지를 알려줍니다.

이를 위한 변경 제어 프로세스가 있을 수 있습니다. 설명하는 코드와 함께 소스 제어에 유지하는 것이 좋습니다. 그러나 다시 말해서 특별한 것은 아닙니다. Word 문서에 대해 놀랍도록 투명한 변경 제어 프로세스를 가질 수 있지만 여전히 완전히 구식이고 잘못된 것일 수 있습니다.

#bdd#test
#218

lazy로 import했을 경우 ChunkLoadError가 발생하는데 이럴 경우 어떻게 대응할 수 있는지 정리해둔 글들.

#react
#203
전체 보기