// 현재 실행된 stage 값을 참조하기
// 하지만 스크립트를 따로 작성하는게 더 효율적으로 보인다.

{
  "scripts": {
    "dev:hello": "echo ${npm_lifecycle_event//dev:/}"
  }
}

---

• yarnpkg - Is there a way to get the name of the npm script passed to the command specified by that script? - Stack Overflow¹
• scripts | npm Docs²

---

Footnotes

1. npm 스크립트의 이름을 얻는 방법에 대한 질문과 npm_lifecycle_event 환경 변수를 사용하는 방법으로 제안 ↩

2. package.json 파일에서 스크립트를 사용하는 방법에 대한 개요, 기본 제공 환경 변수 목록도 포함 ↩

npm 레지스트리에서 특정 패키지에 대한 메타데이터 및 기타 정보를 볼 수 있습니다. 이 명령으로 패키지의 최신 버전, 패키지의 종속성, 작성자 및 라이선스 정보, 기타 세부 정보를 확인할 수 있습니다.

# 이전 버전 리스트를 확인하고 싶을때
npm view cowsay versions

# 각 버전이 게시된 시간을 확인
npm view cowsay time

---

• npm-view | npm Docs
• Find the version of an installed npm package | Sentry¹

---

Footnotes

1. 설치된 npm 패키지의 버전을 확인하는 방법에 대한 가이드 ↩

Clear CloudFront Cache with AWS CLI | bobbyhadz

/**
 * CloudFront 배포에 대한 캐시를 무효화하려면 경로와 함께 명령을 실행합니다
 * 
 * @param {object} params
 * @param {string} params.distributionId
 * @param {string} params.paths
 * @returns {CreateInvalidationResult}
 */
function createInvalidation({
  distributionId,
  paths = `"/*"`
}) {
  const result = $`aws cloudfront create-invalidation --distribution-id ${distributionId} --paths ${paths}`
  return result
}

Lambda@Edge (Node) 함수 작성 시 npm module을 사용하는 방법. esbuild를 사용하면 편하다.

{
  "scripts": {
    "build": "esbuild --bundle --minify --platform=node --target=node12 --outdir=build main.js",
    "export": "cd build && zip main.js.zip main.js"
  }
}

---

• amazon web services - How to load npm modules in AWS Lambda? - Stack Overflow
• 함수를 사용하여 엣지에서 사용자 지정 - Amazon CloudFront

• Check whether user has a Chrome extension installed 특정 확장도구가 설치되어 있는지 판별하는 방법

# 크롬 익스텐션이 설치되는 경로는 다음과 같다
/Users/USERNAME/Library/Application Support/Google/Chrome/Default/Extensions

function isInstalled(extensionId) {
  return new Promise((resolve, reject) => {
    const img = new Image()

    img.src = `chrome-extension://${extensionId}/icon-128.png` // 해당 리소스가 `web_accessible_resources`에 선언되어 있는지 확인이 필요하다.
    img.onload = () => {
      resolve(true)
    }
    img.onerror = () => {
      reject()
    }
  })
}

• 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

---

• git log 포맷 · 마지막 커밋 해시
• 변경 사항 버리기 — checkout · restore
• .gitignore 가 적용되지 않을 때
• 다른 저장소 히스토리 합치기 — --allow-unrelated-histories
• 스택 PR — 서로 의존하는 PR 의 연쇄

---

• subtree
  • Git subtree를 활용한 코드 공유 | blog.rhostem.com
  • [Git] Subtree 사용법 - ThreeSnakes의 개발 삽질 기록장 및 다이어리
• submodule
  • git submodule로 중요한 정보 관리하기
  • Git submodule 사용하기
• 이름 변경 추적
  • View commit history across file renames and moves - GitHub Changelog¹
  • https://stackoverflow.com/questions/72165668/losing-history-when-moving-files-with-git

---

Footnotes

1. 파일 이름이 변경되거나 새 디렉터리로 이동되었지만 콘텐츠의 절반은 그대로인 경우, 커밋 기록은 이제 git log --follow와 유사하게 파일 이름이 변경되었음을 표시합니다. ↩

// 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에서 관리하면 된다 ↩