dev-weekly 2023-05-05
CSS
- 뉴스기사 레이아웃 만들어보기.
- flexbox에서 order를 사용하는게 아니라, grid로 만들기, 컨테이너 쿼리를 사용한 카드 UI 등
grid-template-* 를 사용했을 때 숨김처리된 엘리먼트가 있어도 그 사이의 gap이 남는 이슈grid-auto-rows, auto 1fr auto 등을 활용해서 크기가 존재하는 엘리먼트 사이의 갭만 존재하게 하기
- 이미지와 CSS 만으로 만든 불타는 애니메이션
Node
- WebContainer가 이제 모든 브라우저에서 지원
- 파이어폭스 베타지원, 사파리는 16.4부터 베타 지원
- 세계 35개 지역을 서포트하는 DenoKV. 지금은 waitlist에 등록해야 사용 가능
- 로컬에서 실행 관리, 아토믹 트랜잭션, 일관성 지원
Release
Javascript
- 변경 감지 연산을 줄여 런타임 성능 향상. 시그널이 완전히 출시되면 INP가 크게 개선될 것
- 각 변경 감지 중 재계산 페널티 없이 계산된 속성 제공
- RxJS와의 더 나은 상호 운용성
- SSR, 하이드레이션 향상
- PWA에서 뱃지 및 알림 띄우기 예제
- 권한 확인, 알림 기능 지원 확인, 카운트 변경 등
- JS스트리밍을 통한 즉각적인 로딩 시간
- 예측 코드 페칭 - 네트워크가 불안정한 상태에서도 사용자가 필요할 때 정확히 필요한 코드 제공
- 지연 실행 - 메인스레드를 idle상태로 유지하고 즉각적인 인터랙션 반응하도록 실행 지연
- 최적화된 렌더링 시간, 워터폴 지연을 방지하기 위한 데이터 페칭
- RN MacOS 0.68 ⇒ 0.71 릴리즈. RN iOS, And, Windows와 처음으로 같은 버전
- 새로운 아키텍처 Fabric 실험적 미리 보기 제공
- Chrome114부터 flag 활성화를 통해 이용 가능
- 별도의 라이브러리 사용이 필요 없도록 브라우저가 지원
ETC
- 터미널 버퍼 개선 - 명령어 행 사이를 키보드로 이동 가능
- 마크다운 파일에 이미지 파일 드래그하면 경로 자동 기입
- Diff 알고리즘 개선
- 사이트의 주소를 입력하면 해당 사이트의 이미지들의 탄소 영향을 측정하고, 최적화 할 경우 탄소 절약의 정도를 추정해 보여주는 서비스