const root = createRoot(document.querySelector('#confirm-root'))
root.render(<Confirm />)confirm ui를 만들다보면 window.confirm을 호출하는 방식으로 사용하는게 가장 좋은 방법인데 (안그러면 state로 관리해야하고 결국 이건 무의미한 코드의 반복이다.)
이걸 react로 구현하려면 결국 render를 사용해야함. react-confirm, react-confirm-alert 둘다 소스를 보면 비슷한 방식으로 접근한다.
모바일 웹뷰에서 특정 영역을 zoom할수 있게 해달라는 요청이 있어서 적용한 내역. 정확히 기억은 안나는데 react-prismazoom를 선택했다.
그 외 비슷한
prefetch는 내려받기만 하고, prerender는 내려받은 뒤 렌더링까지 시작한다.
Tachyon은 <a>에 커서가 50ms 이상 머물면 <link rel="prerender">를 넣어주는 라이브러리.
원칙 — 명확하고 구체적인 지시, 그리고 모델에게 생각할 시간 주기.
전술 — 구분자로 입력 경계 표시(```, “”“, < >, <tag> </tag>, :), 구조화된 출력 요청(JSON·HTML), 조건 충족 여부를 모델에게 확인시키기, few-shot 으로 스타일 고정.
https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/
- react-arborist1
- react-vtree2
- react-sortable-tree3
- treejs4
- react-checkbox-tree5
- react-accessible-treeview6
- react-dnd-treeview7
Footnotes
-
드래그 정렬·가상화 렌더링·키보드 이동·aria 속성·선택 동기화를 한 컴포넌트에 담은 “다 되는” 트리. ↩
-
react-window위에 얹은 가볍고 큰 트리 전용 렌더러 — 보이는 노드만 그리는 가상화가 핵심. ↩ -
중첩 데이터를 드래그로 재배치하는 트리(
canDrag·canDrop등으로 제어). README 에 “적극적으로 관리되지 않는다”고 적혀 있다. ↩ -
프레임워크 없이(VanillaJS) 쓰는 의존성 없는 작은 트리 위젯. React·Vue 에서도 쓸 수 있다. ↩
-
체크박스 트리 — 노드를 체크해 고르는 용도. ↩
-
WAI-ARIA Authoring Practices 의 treeview 패턴을 구현. 단일·다중 선택, 선택을 부모로 전파(
propagateSelectUpwards). 새 관리자를 찾는 중. ↩ -
드래그·드롭 트리. 노드 모양은 render props 로 자유롭게 그리고, 놓으면
onDrop으로 바뀐 트리 데이터를 받는다. ↩
조도계로 노출을 잡는 식 EV = log₂(E·S / C) 에 센서의 lux(E)를 넣는다 — S 는 ISO, C 는 입사광 노출계 교정 상수(평판 수광부 250).1
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()
}- AmbientLightSensor - Web APIs | MDN
- Ambient Light Sensor
- Sensors for the web - Chrome Developers2
- Ambient Light Sensor | Can I use… Support tables for HTML5, CSS3, etc
Footnotes
-
Exposure value - Wikipedia:
EV = log₂(ES/C)(E 조도, C 입사광 노출계 교정 상수) / Light meter - Wikipedia: 평판 수광부 C 는 “a value of 250 is commonly used.” ↩ -
주변광 센서 인터페이스가 포함된 일반 센서 API를 사용하는 방법을 설명 ↩
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')
)