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

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

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

Footnotes

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

#npm#node
#210

Clear CloudFront Cache with AWS CLI | bobbyhadz

zx 의 $ 는 ${} 로 넣은 값을 알아서 quote 한다 — 따옴표를 직접 넣으면(`"/*"`) 따옴표까지 경로가 된다.1

/**
 * 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
}

Footnotes

  1. Getting Started | google/zx: “Everything passed through ${...} will be automatically escaped and quoted.” ↩

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

웹 페이지가 확장 리소스를 읽을 수 있는 건 web_accessible_resources 에 선언된 것뿐이다.1

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()
    }
  })
}

Footnotes

  1. Manifest - Web Accessible Resources - Chrome for Developers: “By default no resources are web accessible, as this allows a malicious website to fingerprint extensions that a user has installed…” ↩

#extensions
#207
📎axiosaxios.rest

axios is a simple HTTP client for the browser and Node.js

Footnotes

  1. 인터셉터로 실패한 요청을 가로채 다시 보낸다. axiosRetry(axios, { retries: 3 }) 한 줄이고, 지연은 없음·지수 백오프·선형·직접 지정 중에 고르며 인스턴스별·요청별 설정도 된다. ↩

  2. 어떤 방식으로 접근하는지에 대한 설명들이 있다. ↩

  3. 인터셉터가 아니라 어댑터를 감싸는 방식. 캐시(같은 자원 중복 읽기 방지)·스로틀(짧은 시간의 GET 중복 합치기)·재시도 세 enhancer 를 어댑터 파이프라인에 겹쳐 쌓는다. ↩

#axios
#205

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

#react
#203

git merge 는 공통 조상이 없는 히스토리를 기본으로 거부한다 — --allow-unrelated-histories 가 그 안전장치를 끈다.1

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

Footnotes

  1. Git - git-merge Documentation: “By default, git merge command refuses to merge histories that do not share a common ancestor. This option can be used to override this safety when merging histories of two projects that started their lives independently.” ↩

#git
#202
📎

Git Documentation

git-scm.com

Footnotes

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

#git
#201
// cannot be used as a JSX component

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

#react
#200

chromatic

Footnotes

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

#storybook#chromatic
#199
# 아마도 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를 사용해야할 경우에 대한 답변들이 소개되어 있다. ↩

#vite
#197
33 중 22페이지
이전 페이지다음 페이지