Frontend Weekly Digest #309(2023년 5월 1~7일)

May 08 2023
웹 개발 • 웹 구성 요소 2023년 봄 업데이트 • 단계별: HTML 페이지에 PDF 포함 • WebGPU에 대해 이야기하고 싶습니다. • Web Vitals 확장을 사용하여 Core Web Vitals 문제 디버깅 • 웹 사이트용 필터 만들기 • 대신 데이터 속성 사용 CSS 클래스 • :root는 전역이 아닙니다. 따라서 :root가 전역이 아니면 무엇입니까? • 사용자 지정 CSS 스크롤 막대를 사용하지 마십시오. • 이전 브라우저용 CSS 구현 • 최신 CSS에 대한 기능 지원 테스트 • CSS에서 요소 숨기기 가이드 • CSS3 JavaScript만 사용하는 동적 글꼴 크기 • Nx 16 출시! • TypeScript 마스터하기: 코드 품질 향상을 위한 20가지 모범 사례 • 상상으로 JavaScript 배우기 • 이벤트가 사용자에 의해 트리거되었는지 또는 JavaScript에 의해 트리거되었는지 감지 • 이벤트 루프를 차단하지 않기 위한 실용 가이드.

웹 개발

Web Components 2023 봄 업데이트
• 단계별: HTML 페이지에 PDF 포함
• WebGPU에 대해 이야기하고 싶습니다.
• Web Vitals 확장을 사용하여 Core Web Vitals 문제 디버깅

  • 성능
    • 고급 기술로 웹 성능 최적화
    • CDN: 대기 시간을 줄여 성능을 높입니다.
  • 애니메이션
    • 스크롤 기반 애니메이션을 사용하여 스크롤 요소에 애니메이션 적용
    • Shifty를 사용하여 비동기 대기 애니메이션 구축
    • 그리드에서 슬라이드쇼로 전환 애니메이션에 대한 아이디어

웹사이트용 필터 만들기
CSS 클래스 대신 데이터 속성 사용
• :root는 전역이 아닙니다. 따라서 :root가 전역이 아니면 무엇입니까?
• 사용자 지정 CSS 스크롤 막대를 사용하지 마십시오.
• 이전 브라우저용 CSS 구현
• 최신 CSS에 대한 기능 지원 테스트
• CSS에서 요소 숨기기 가이드
CSS3만 사용하는 동적 글꼴 크기

자바스크립트

• Nx 16 출시!
• TypeScript 익히기: 코드 품질 향상을 위한 20가지 모범 사례
• 상상으로 JavaScript 배우기
• 이벤트가 사용자에 의해 트리거되었는지 또는 JavaScript에 의해 트리거되었는지 감지
• 이벤트 루프를 차단하지 않기 위한 실용 가이드

  • React
    • Vite가 우리의 React 개발 프로세스를 어떻게 변화시켰는가 — 사례 연구
    • 계층적 구성 요소에 대한 React Composite 패턴의 모범 사례
    • 중재자 디자인 패턴으로 React에서 상태 관리 개선
    • React Portal 소개
    • 2023년 최고의 개발을 위한 필수 React 기술
    • 최고의 React 스케줄러 구성 요소 라이브러리
    • React에서 트리 그리드 구성 요소를 구축하는 방법
    • useEffect — The Hook React Never Have Rendered
  • Vue
    • VueJS에서 재사용 가능한 모달 구성 요소를 빌드하는 방법
    • Vue.js를 위한 최고의 아이콘 라이브러리
  • Angular
    • Angular v16이 출시되었습니다!
    • 새로운 Angular 16이 2023년에 출시됩니다: 알아야 할 모든 것
    • Angular 및 순수 HTML 대화 상자