async function main({ onActivate, onError, onReading, onDenied }) {
  const result = await navigator.permissions.query({
    name: 'ambient-light-sensor',
  })

  if (result.state === 'denied') {
    onDenied()
    return
  }

  const ambientLightSensor = new AmbientLightSensor({ frequency: 20 })
  
  ambientLightSensor.addEventListener('activate', onActivate)
  ambientLightSensor.addEventListener('error', onError)
  ambientLightSensor.addEventListener('reading', () => {
    const ISO = 100
    const C = 250

    const EV = Math.round(Math.log2((ambientLightSensor.illuminance * ISO) / C))

    onReading(EV)
  })

  ambientLightSensor.start()
}

Footnotes

  1. 주변광 센서 인터페이스가 포함된 일반 센서 API를 사용하는 방법을 설명 ↩

#web_api#AmbientLightSensor
#257
const { Parser } = require('acorn')
const JSXParser = Parser.extend(require('acorn-jsx')())

const isReactComponent = Boolean(
  JSON.stringify(
    JSXParser.parse(fileContent, {
      sourceType: 'module',
      ecmaVersion: 'latest',
    })
  ).includes('JSXIdentifier')
)
#typescript#jsx#parser
#255

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

npm을 사용하여 패키지의 여러 버전을 설치하려면 npm 설치 명령 뒤에 패키지 이름과 설치하려는 버전 번호를 사용하면 됩니다. 이 명령을 다른 버전 번호로 반복하여 여러 버전의 패키지를 설치할 수 있습니다.

yarn add react-tooltip-5@npm:react-tooltip@5.8.3

{
  "react-tooltip-5": "npm:react-tooltip@5.8.3"
}
#npm
#249
  • Human Interface Guidelines - Human Interface Guidelines - Design - Apple Developer: 디자인 원칙은 사용자 경험을 향상시키기 위한 기본 가이드라인입니다. Apple의 Human Interface Guidelines는 애플 제품을 위한 인터페이스 디자인에 대한 원칙과 모범 사례를 제공합니다. 예를 들어, 간결하고 일관된 디자인, 직관적인 상호 작용, 정보의 집중화, 애니메이션 및 트랜지션의 적절한 사용 등을 다룹니다. 이러한 가이드라인을 따르면 사용자들이 애플 제품과 앱을 쉽게 이해하고 사용할 수 있게 됩니다.
  • All WCAG 2.1 Techniques | WAI | W3C: 접근성은 모든 사용자가 웹 콘텐츠에 접근하고 상호 작용할 수 있도록 보장하는 중요한 측면입니다. 웹 접근성은 장애를 가진 사용자, 고령자, 비전 및 청각 장애가 있는 사용자, 키보드 사용자 등을 고려하여 웹 콘텐츠가 포용적이고 이용 가능한지를 확인합니다. WCAG는 웹 접근성을 높이기 위한 일련의 표준과 기술을 제공합니다. 텍스트 대체, 키보드 접근성, 명도 대비, 컨텐츠의 가독성, 사용자 인터페이스 컨트롤의 명확성 등을 다룹니다. WCAG는 웹 개발자와 디자이너들이 웹 콘텐츠를 접근 가능하게 만들기 위한 방법과 기술을 제시합니다.
#wcag#ux
#247
async function loader() {
  const family = 'Material Symbols Outlined'
  const source =
    'url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v75/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)'
  const fontFace = new FontFace(family, source)

  await fontFace.load()
}

CSS Font Loading API 는 비교적 새로운 웹 플랫폼 추가 기능입니다. API가 도입되기 전에 웹 개발자는 일반적으로 CSS에 의존하여 웹 글꼴을 로드해야 했으며 이로 인해 로드와 성능 문제가 발생할 수 있었습니다. 개발자는 로드 방법을 더 잘 제어할 수 있을 뿐만 아니라 오류를 처리하고 웹 사이트에서 사용되는 시기와 방법을 제어할 수 있습니다. 전반적으로 CSS Font Loading API는 웹 개발자에게 글꼴이 정확하고 효율적으로 로드 되도록 하는 강력한 도구를 제공하는 동시에 글꼴 로드 및 사용에 대한 더 많은 제어 기능을 제공합니다.

#font
#243

Footnotes

  1. 일반 텍스트 파일을 데이터 소스로 사용하여 간단한 웹 애플리케이션을 구축하고 배포하기 위한 플랫폼. 백엔드 서버나 데이터베이스 없이 배포 가능. 텍스트 파일에서 데이터를 읽고 쓰고 검색하는 데 사용할 수 있는 간단한 REST API를 제공. ↩

  2. JavaScript 애플리케이션용 경량 데이터베이스 엔진. 브라우저에서 데이터를 저장, 쿼리 및 조작하기 위한 간단하고 직관적인 API를 제공하며 챗봇, 검색 엔진 및 게임을 포함한 다양한 유형의 애플리케이션을 구축하는 데 사용 가능. 이 데이터베이스는 오프라인에서 작동하도록 설계되어 PWA(Progressive Web Application) 및 기타 유형의 클라이언트측 애플리케이션을 구축하는 데 이상적. ↩

#db
#238
# 비디오 자르기
ffmpeg -i INPUT.mp4 -ss 00:00:00 -to 00:01:00 -c:v copy -c:a copy OUTPUT.mp4
#ffmpeg
#237
# 빌드 시 timestamp를 참조하기 위한 방법
timestamp=$(date +%s) # 1670759329

# 하지만 현실에서는 `TURBO_HASH`값을 참조하는 방식을 `.env`에서 사용
REACT_APP_VERSION=1.0.0-${TURBO_HASH}

Footnotes

  1. 스크립트에서 현재 타임스탬프를 특정 형식의 변수로 만드는 방법에 대한 질문. 특정 형식 문자열과 함께 날짜 명령을 사용하여 타임스탬프를 만들고 변수에 저장하도록 하는 답변들… ↩

  2. dotenv-expand는 .env 파일에서 환경 변수를 확장하기 위한 모듈입니다. 중첩 변수 확장 및 셸 명령 실행과 같은 더 많은 고급 기능을 사용 가능. ↩

#shell#node#env
#235
# `System limit for number of file watchers reached`

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
#node#webpack
#234
17 중 6페이지
이전 페이지다음 페이지