dev-weekly 2022-04-30
CSS
disabled 어트리뷰트는 form control 요소에서만 작동- 과거 인터랙션 비활성화를 위한 테크닉들.
tabindex="-1", user-select: none
- 이들을 대신할 수 있는
inert 어트리뷰트 소개
- 지원: safari 15.5, chrome102, Firefox Nightly
Node
- 노드18에서 등장한 프리픽스
node: 의 등장 배경
node:test는 node 프리픽스가 있어야만 가져올 수 있는 첫 핵심 모듈- 장점: 노드 코어 모듈과 사용자 영역 모듈을 명확하게 구분 가능
- 단점: 모듈 시스템 불일치, 타이포스쿼팅 공격에 대한 가능성
- 노드18에도 fetch가 추가된것처럼, 16.15에도 fetch 추가(-experimental-fetch)
- 엣지 펑션 소개 및 quick start 가이드
- 지원하는 도구들 - Astro, nextjs, nuxt, remix, sveltekit 등
- 왜 deno로 구축했는지에 대한 netlify CEO의 설명
- 구글의 Skia 엔진을 기반으로 하는 Nodejs용 HTML canvas
Javascript
- JS 인프라 시리즈 4번째, 번들러 만들기
- 번들링에 필요한 과정(파일 시스템 검색, 종속성 그래프, 번들 직렬화, 병렬 컴파일)에 대한 설명 및 간단한 구축(다른 도구를 활용)
- 피그마와 스토리북 연결 - 시간의 흐름에 따라 source of truth 가 혼란스러워지는것을 극복하기위해
- 다양한 에드온들
- Measure addon - 렌더링된 UI가 디자인과 일치하는지 검사해주는 도구. DOM Element와 디자인 스펙의 치수 비교
- Outline addon - CSS 정렬 디버깅을 위해 각 DOM Element의 경계 시각화
Brief and Release
npx types-react-codemod preset-18 ./src 를 사용하여 코드 자동 변경
- 반응형 페이지네이션 툴. 화면 크기에 비례한 페이지 숫자