7월 3주차 기록

July 21, 2023 • ☕️ 5 min read

weekly

폭염과 폭우의 반복 🥵🌧️🥵🌧️

배워가기

npx degit

Copy

degit some-user/some-repo

레포지토리의 복제본을 만든다. 이때 저장소 전체를 복제해오는 clone과는 달리 필요한 부분을 선택해서 복제한다.

모든 git history가 아닌 가장 최신 commit을 가져오기 때문에 git clone보다 빠르다. 또 복제 시 .git 파일을 가져오지 않는다.

Ref https://www.npmjs.com/package/degit

Storybook 이모저모

next.js와 함께 사용 시 여러 가지 유용성을 얻으려면
- @storybook/nextjs 설치
- 라우팅/이미지 최적화/절대경로 import/스타일링/webpack&babel config 등을 제공한다
- https://storybook.js.org/recipes/next
Autodocs
- UI 컴포넌트들에 대한 문서를 자동으로 작성해준다!
- args, argTypes, parameters 등의 메타데이터를 가지고 작성해준다
- https://storybook.js.org/docs/react/writing-docs/autodocs

next/image vs next/legacy/image와 CLS

Next.js 12까지의 이미지는 DOM에 img의 부모와 형제 요소로 <span> 태그를 추가한다

Copy

<span>
  <span></span>
  <img src="..." />
</span>

이미지를 span 태그로 감싸고 투명한 png를 로드한 후, 이미지가 로딩되면 투명 이미지에 absolute 속성을 준 진짜 img 태그가 보이는 형태로 만들어져 있다. 이는 CLS를 해결하기 위함이로, 이미지가 로딩되기 전에 투명 이미지로 크기를 잡아노고 이미지가 로딩되면 화면에 보이도록 한 것이다.

Next.js 13부터의 이미지는 <img> 태그 하나만 화면에 렌더링된다. 내부적으로는 width, height 값이 있을 경우/없을 경우에 각각 비율을 계산하여 비율을 맞춰 CLS 문제를 해결한다.

Next.js 13 버전이 나오면서 이전에 사용하던 Image 컴포넌트는 next/legacy/image로 위치가 변경되었다.

Ref https://velog.io/@devohda/코드로-알아보는-Next.js-13-버전의-Image-컴포넌트-개선

jq(jqlang)

CLI에서 사용할 수 있는 JSON 프로세서로, curl로 받은 응답을 가공할 수 있다(pipe)

Copy

curl 'https://api.github.com/repos/jqlang/jq/commits?per_page=5' | jq '.'

Ref https://jqlang.github.io/jq/

ts-pattern

똑똑한 타입 인터페이스로 exhaustive pattern matching을 해주는 타입스크립트용 라이브러리
더 낫고 안전한 조건문을 작성할 수 있게 해준다.
복잡한 조건들을 단순한 식으로 작성할 수 있어서 코드가 짧아지고 가독성이 좋아진다.
Exhaustiveness checking은 모든 케이스를 놓치지 않도록 해준다.

💡 tc39에도 자바스크립트 패턴매칭이 프로포절로 올라가 있다. https://github.com/tc39/proposal-pattern-matching

Ref https://github.com/gvergnaud/ts-pattern

react-if 라이브러리

[before]

Copy

<>
  {age >= drinkingAge ? (
    <span className="ok">Have a beer, {name}!</span>
  ) : (
    <span className="not-ok">Sorry, {name}, you are not old enough.</span>
  )}
</>

[after]

Copy

<If condition={age >= drinkingAge}>
  <Then>
    <span className="ok">Have a beer, {name}!</span>
  </Then>
  <Else>
    <span className="not-ok">Sorry, {name}, you are not old enough.</span>
  </Else>
</If>

Ref https://github.com/romac/react-if

Airflow

Airflow는 복잡한 계산작업을 구조화하고, 일정에 따라 실행하도록 설계된 오픈소스 플랫폼이다. 워크플로우를 프로그래밍 방식으로 작성하고, 실행하며, 이 프로세스를 모니터링하는 것을 가능하게 한다.

Airflow Backfill은 과거 데이터를 처리하는 데 사용되는 Airflow 기능으로, 시간 범위에서 과거 실행을 ‘채워 넣는’ 것을 의미한다. 즉 아직 실행되지 않은 과거의 스케줄링된 작업을 실행하는 것을 말한다.

이것저것

Title Case (Headline Case)
- 출판이나 예술 작품의 제목을 영어로 렌더링하는 데 사용되는 대문자 스타일
- 보조 단어를 제외한 모든 단어는 대문자로 표시

기타공유

Safari에서는 outline과 border-radius를 같이 못 쓴다?

WebKit Features in Safari 16.4의 내용에 따르면, outline 속성과 커스텀 outline-style을 같이 사용하고, 요소가 곡선 테두리를 가지고 있다면 outline은 곡률을 반영하지 않았었다. 이제 Safari 16.4부터 outline은 항상 border-radius의 곡률을 따르게 된다.

FigMagic

FigMagic은 DevOps와 디자인 사이 빈틈을 채워준다.

디자인 토큰을 생성하고, 그래픽을 추출하고, 피그마에서 디자인 토큰 기반의(design token-driven) 리액트 컴포넌트를 추출해준다.

디자인 토큰으로는, 디자이너의 디자인을 웹 개발자가 바로 쓸 수 있게 해주는 요런 것👇을 설명하고 있다.

Copy

const tokens = {
  colors: {
    blue: "rgba(20, 20, 255, 1)",
    warmWhite: "rgba(240, 240, 240, 1)",
  },
  spacing: {
    small: "1rem",
    medium: "1.5rem",
  },
};