const root = createRoot('#confirm-root')

root.render(<Confirm />)

confirm ui를 만들다보면 window.confirm을 호출하는 방식으로 사용하는게 가장 좋은 방법인데 (안그러면 state로 관리해야하고 결국 이건 무의미한 코드의 반복이다.) 이걸 react로 구현하려면 결국 render를 사용해야함. react-confirm, react-confirm-alert 둘다 소스를 보면 비슷한 방식으로 접근한다.

#react#ui#confirm#react-confirm#react-confirm-alert
#270

모바일 웹뷰에서 특정 영역을 zoom할수 있게 해달라는 요청이 있어서 적용한 내역. 정확히 기억은 안나는데 react-prismazoom를 선택했다.

react-prismazoom은 CSS 변환을 사용하여 React에서 확대 및 이동 기능을 제공하는 팬 및 줌 컴포넌트입니다. 이 라이브러리는 prop-types, react, react-dom 모듈에만 의존하며, 데스크톱 및 모바일에서 모두 작동합니다.

주요 기능 및 특징

  • 확대 기능 : 마우스 휠이나 두 손가락으로 확대할 수 있습니다. 더블 클릭 또는 더블 탭을 사용하여 확대할 수도 있으며, 선택한 영역을 확대하여 중앙에 배치할 수 있습니다.
  • 이동 기능 : 마우스 포인터나 줌 인 상태에서 손가락을 사용하여 이동할 수 있습니다. 확대된 상태에서는 사용 가능한 공간에 따라 직관적으로 이동합니다. 요소를 이동할 수 있는 방향을 나타내기 위해 커서 스타일을 조정합니다.

그 외 비슷한

#ui#react#zoom
#269

Tachyon 작동 방식

Tachyon은 사용자의 웹 브라우저에 내장된 기능을 활용하여 사용자가 <a href="..."></a> 태그에 커서를 50밀리초 이상 올려놓으면 콘텐츠를 미리 로드하는 <link rel="prerender" href="..."> 태그를 생성합니다(기본값).

기본적으로 사용자가 링크를 실제로 클릭/탭하기 전에 방문하려는 페이지의 로딩을 시작하도록 브라우저에 지시합니다. 이는 웹 브라우저가 백그라운드에서 준비를 시작하도록 지시합니다.

사용자가 실제로 링크를 클릭하고 다음 페이지로 이동할 준비가 되면 해당 페이지는 이미 준비되어 프레임으로 가져와 페이지 로드 시간이 훨씬 빨라집니다.

이유; 방법

Tachyon은 단순성을 핵심으로 설계되었으며, 이는 결코 우연이 아닙니다. 단순성에 중점을 두었기 때문에 관리자부터 최종 사용자까지 Tachyon을 사용하는 모든 사람이 성능, 확장성, 유지보수성, 보안 및 사용 편의성에서 이점을 누릴 수 있습니다.

다른 대안에 비해 Tachyon이 개선한 주요 사항 중 하나는 일반적인 <link rel="prefetch" href="..."> 대신 <link rel="prerender" href="...">를 사용하여 페이지 로드가 훨씬 빨라졌다는 점입니다. 프리페치는 페이지를 다운로드하기만 하고 프리렌더는 페이지를 다운로드하여 렌더링을 시작한다는 점에서 두 방법의 차이는 자명합니다.

또한 Tachyon은 클릭 가능성이 높은 페이지만 미리 로드하고 사용자의 커서가 링크에서 벗어나면 페이지 미리 로드를 중지하는 등 다른 방식보다 훨씬 효율적이고 방해가 덜 되는 방식으로 프리로딩 동작을 구현합니다. 이것이 바로 제가 Tachyon을 만든 이유이며, 지금까지도 왜 다른 대안이 이 기능을 제공하지 않는지 모르겠습니다. 그 결과, Tachyon은 다른 대안에 비해 사이트에 대역폭 부하를 극히 일부만 추가합니다.

다른 프로젝트보다 기능이 적은 것도 아닙니다(인스턴트 페이지와 가상 기능 동등성 및 몇 가지 추가 기능이 있습니다). 단지 다른 프로젝트보다 간결한 방식으로 구현된 기능일 뿐입니다. 별도의 설정 없이 모바일을 지원하고 화이트리스트, 블랙리스트, 사용자 지정 타이밍 및 동일 출처 제한을 구현하며, 이러한 기능을 사용하기가 훨씬 쉽습니다. 매우 복잡한 기능이 필요한 경우 Tachyon이 최선의 선택이 아닐 수 있지만, 그 외의 모든 사용자에게는 처음부터 최고의 옵션이 될 수 있도록 설계된 Tachyon이 적합합니다.

#performance#tachyon#prefetch#prerender
#268
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
15 중 4페이지
이전 페이지다음 페이지