23. 07 스크랩

1. 주니어의 스터디 드라이븐 성장기 (발표자료 & 스크립트) (링크)

• IT 엔지니어로 만 2년간 근무하며 했던 30개 이상의 스터디들과, 그로 인한 성장 경험을 공유
• 목차
  • 성장이란?
  • 신입 시절에 했던 스터디
  • 이직 후 했던 스터디
  • 스터디를 하며 느낀 점들
  • 그래서 스터디로 성장했나요?
  • 기타 스터디 팁

2. million - React를 70% 빠르게 (링크)

• React의 Virtual DOM을 더 빠르고 경량(<4kb)으로 교체해서 70% 빠르게 만들기
  • "block" virtual DOM을 이용
• React 컴포넌트를 wrapping 하는 것만으로 빠른 렌더링과 로딩 속도가 빨라짐
  • 커스텀 컴파일러로 서버에서 최적화
• 강력한 API로 다른 컴포넌트 최적화 지원

3. Vercel Platforms Starter Kit 공개 (링크)

• 커스텀 도메인 지원하는 멀티테넌트 어플리케이션을 만들어 주는 풀스택 템플릿
  • Next.js App Router + Vercel Postgres + Vercel Domains API
• 커스텀 도메인, 서브 도메인, SSL 인증서를 API로 처리
• Vercel Edge Network로 캐싱
  • Incremental Static Regeneration + Next.js revlidateTag API로 캐시를 On-DemanD 업데이트 지원
• AI 기반 마크다운 에디터(Novel) 지원
• Vercel Blob 로 이미지 업로드 가능
• Next.js 파일 기반 메타데이터 API로 커스텀 폰트, 404 페이지, favicon, sitemap 지원
• @velcel/og 로 동적 OG 카드 지원
• 다크모드 가능

4. 새로운 CSS Viewport Unit: svh, lvh, dvh (링크)

• 뷰포트 너비/높이 기반으로 설정하는 것은 편하지만, vh 는 모바일에서 버그가 많음
  → 뷰포트 사이즈가 브라우저의 주소바 UI를 포함하지 않기 때문
• 100vh 는 모바일에서 전체 뷰포트 높이 만큼이 되어야 하지만, 스크롤시에 UI를 숨기는 사파리/크롬(안드로이드) 에서는 문제가 발생
• 그래서 CSS 워킹 그룹이 새로운 단위를 소개 svh, lvh, dvh
  • 'svh' Small Viewport : 주소바 UI가 축소되지 않은 상태의 뷰포트 높이
  • 'lvh' Large Viewport : 주소바 UI가 축소된 상태의 뷰포트 높이
  • 'dvh' Dynamic Viewport : svh / lvh 사이에서 동적으로 변화
• 100dvh 를 이용하면 최하단에 있는 버튼이 항상 표시되도록 설정 가능
  • 하지만 성능 문제가 있을수 있으니 조심해야함

5. 2023년의 CSS 작성하기 : 몇 년 전과 달라졌을까요? (링크)

• CSS가 정말 빠르게 변화하는 중
• Container Query
• Layer 에서 스타일 그룹핑
• :is() 와 :where()
• 새로운 색상 함수들: rgb() 와 hsl()의 변경, 그리고 oklch() 와 oklab()
• 사용자 환경 설정 스니핑: prefers-color-scheme & prefers-reduced-motion
• 색상 팔레트 정의하기 : CSS 커스텀 속성
• (내가 사용하지 않는) 새로운 기능들
  • CSS Nesting
  • 스타일 쿼리
  • :has()
  • 다이나믹 뷰포트 유닛 : dvb, dvh, dvi, dvmax, dvman, dvw
  • oklch/oklab 색공간
  • color()
• 그외
  • Trigonomeric 함수
  • 앵커 위치
  • 스크롤 링크 애니메이션
  • initial-letter
  • <selectmenu> 와 <popover>
  • View 트랜지션
  • Scoped Styles

6. 모듈이란 무엇인가? (링크)

모듈이란?

• 자바스크립트 모드를 독립적인 단위로 묶는 기능

모듈의 요소

모듈의 장점

• 모듈에 대해 살펴보는 것은 Vite에 대해 알아보기 위한 과정.

모듈의 연대기 훑기

Webpack에 대하여

• 중요한 것은 Vite가 왜 나왔고 무엇때문에 빠른 것인지 알아보는 것.

Vite는 왜 빠른 것인가?

7. 미래의 CSS : State Container Queries (링크)

• 크로미움 팀이 새로운 타입의 쿼리를 실험중
• 작년엔 Size Container Query가 메이저 브라우저들에서 모두 지원 시작
  • 컨테이너의 너비 기준으로 쿼리 가능
• 여기에 추가로 이제 Style 쿼리도 가능 : 특정 CSS 변수가 있는지 확인. 아직 크롬 카나리에서만 가능
• State 쿼리는 상태값에 따른 쿼리
  • position: sticky 등의 상태가 활성화 되어있는지를 확인 가능하며, @container state(stuck: top)이 처럼 방향에 따라 별도의 스타일 지정
  • flex-wrap 이 되었는지도 '@container header state(wrap: true)` 처럼 확인
  • 문서의 방향 ltr rtl 여부에 따라서도 처리 가능 @container state(dir: rtl)