// cannot be used as a JSX component

@types/react, @types/react-dom에 대한 참조가 잘못되면서 발생하는 이슈

---

• 【React, TypeScript】「cannot be used as a JSX component…」エラー - Qiita
• javascript - ‘Component’ cannot be used as a JSX component. Nextjs - Stack Overflow
• Component cannot be used as a JSX component in React | bobbyhadz

chromatic

• Chromatic Storybook - Secure you project token in Next.js¹

---

Footnotes

1. cli를 사용할 경우 CHROMATIC_PROJECT_TOKEN을 .env에서 관리하면 된다 ↩

• https://twitter.com/youyuxi/status/1362050255009816577¹
• How to use .js instead of .jsx²
  • How do you move multiple files in git? - Stack Overflow

# 아마도 git을 사용하고 있을테니까 `git mv`를 사용해서 변경해주자
find src -type f | grep "\.[jt]s$" | xargs -n1 grep -HE "^[^*\n]*(<\/?[a-zA-Z]*>)[\s\w]*$" | cut -d: -f1 | uniq | awk '{print "git mv "$1" "$1"x"}' | sh

---

Footnotes

1. Vite가 JSX 처리를 위해 .jsx 확장자를 요구하는 이유는 대부분의 경우 일반 .js 파일이 브라우저에서 작동하기 위해 전체 AST 변환이 필요하지 않아야 하기 때문입니다. .js 파일에서 JSX를 허용한다는 것은 제공되는 모든 파일이 JSX를 포함하는 경우에 대비하여 전체 AST 처리되어야 함을 의미합니다. ↩

2. .jsx 또는 .js를 사용해야할 경우에 대한 답변들이 소개되어 있다. ↩

<div
  dangerouslySetInnerHTML={{
    __html: `
      <img src="http://unsplash.it/100/100?random" onload="console.log('you got hacked');" />
    `,
  }}
/>

가끔 아주 가끔 이상한 일을 해야할때가 있는데 그럴때는 이렇게 하면 된다.

const obj = {
  a: 1,
  b: 2,
}

console.log(obj[['a']]) // 1
console.log(obj[['b']]) // 2

이게 되네 🤔

# .gitignore가 규칙이 적용되지 않을때
git rm -rf --cached .
git add .

---

• https://stackoverflow.com/questions/25436312/gitignore-not-working

blob

new Blob(array, { type : 'text/html' })

파일 다운로드 생성이 잘 안되서 확인해보니 type 지정을 안했다.

GitHub - meltingice/psd.js: A Photoshop PSD file parser for NodeJS and browsers

psd 파서. 이를 통해 관리 가능한 트리 구조에서 Photoshop 문서로 작업하고 다음과 같은 중요한 데이터를 찾을 수 있습니다.

• 문서 구조
• 문서 크기
• 레이어/폴더 크기 + 위치 지정
• 레이어/폴더 이름
• 레이어/폴더 가시성 및 불투명도
• 글꼴 데이터( psd-enginedata 를 통해 )
  • 텍스트 영역 내용
  • 글꼴 이름, 크기 및 색상
• 색상 모드 및 비트 심도
• 벡터 마스크 데이터
• 병합된 이미지 데이터
• 레이어 구성 요소

가변 글꼴은 진보된 OpenType 사양입니다. CSS를 사용할때 가짜 굵기 또는 기울임꼴과 같은 브라우저 왜곡 에 대해 걱정하지 않고 단일 글꼴 파일에 포함된 모든 스타일에 액세스할 수 있습니다.

이전에는 여러 스타일을 사용한다는 것은 모든 너비, 두께 또는 기울임꼴에 대해 하나씩 여러 파일을 로드하는 것을 의미했습니다. 이로 인해 디자인 표현력(사용된 글꼴 수)과 웹사이트 성능(다운로드할 데이터의 양) 사이에 긴장감이 생겼습니다. 가변 글꼴을 사용하면 전체 방정식이 변경됩니다.

• A Variable Fonts Primer
• Google Fonts
• Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks
• Variable Fonts for Developers
• Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode | CSS-Tricks¹

---

Footnotes

1. 다크모드에서 weight가 시각적으로 차이가 날수 있기때문에 그럴경우 변수로 분리해서 대응하는 방법 ↩

• 5 steps to faster web fonts /// Iain Bean
• How to Stop Lighthouse Complaining About Render Blocking Google Fonts | Codeboosh
• A Comprehensive Guide to Font Loading Strategies—zachleat.com
• How to avoid layout shifts caused by web fonts – Simon Hearne
• The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation
• Time to Say Goodbye to Google Fonts
• The Best Font Loading Strategies and How to Execute Them | CSS-Tricks

요약하자면

• woff2
• font-display로 레이아웃 이슈 최소화
• preload
• self (feat. google webfonts helper)

몇몇 권장사항은 한글 폰트에서는 사실상 불가능한 부분이라 가능한 부분들을 적용하면 된다.