• React + Webpack: ChunkLoadError: Loading chunk X failed. | by Raphaël Léger | Medium
• How to fix ChunkLoadError in your ReactJS application - Codemzy’s Blog

---

lazy로 import했을 경우 ChunkLoadError가 발생하는데 이럴 경우 어떻게 대응할 수 있는지 정리해둔 글들.

git remote add {alias} {url}
git fetch {alias}
git merge --allow-unrelated-histories {alias}/{branch}

---

• [git] 서로 다른 repository 합치기 — Falcon
• How do you merge two Git repositories? - Stack Overflow
• How to merge git repositories preserving git history - JDriven Blog
• Git - git-mv Documentation
• Merging two GitHub repositories without losing commit history - Mozilla Hacks - the Web developer blog

// 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');" />
    `,
  }}
/>

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

---

• How to inject scripts using dangerouslysetinnerhtml on Client-Side Rendering? | by SunCommander | Medium

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 를 통해 )
  • 텍스트 영역 내용
  • 글꼴 이름, 크기 및 색상
• 색상 모드 및 비트 심도
• 벡터 마스크 데이터
• 병합된 이미지 데이터
• 레이어 구성 요소