본문으로 건너뛰기
~/plain-text-devlog

스니펫 볼트

코드 조각 모음

자주 쓰는 코드 조각을 언어·태그로 필터해 찾고 바로 복사할 수 있다. 실무에서 반복적으로 쓰는 패턴 위주로 정리했다.

스니펫 지속 추가 중
언어
태그

검색 결과 N개

tssnippet/01

사용자 정의 타입 가드 (isString)

function isString(val: unknown): val is string {
  return typeof val === 'string';
}
TypeScriptnarrowing
상세 보기
tsxsnippet/02

useEffect cleanup 패턴

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);
ReactuseEffect
상세 보기
tssnippet/03

Next.js fetch 캐시 제어

const res = await fetch(url, { cache: 'no-store' });
// 또는 { next: { revalidate: 60 } }
Next.jsfetch
상세 보기
bashsnippet/04

Git rebase 안전 절차

git fetch origin
git rebase origin/main
# 충돌 시: git rebase --abort
Gitrebase
상세 보기
tssnippet/05

TypeScript `satisfies` 연산자

const palette = {
  red: [255, 0, 0],
  blue: '#0000ff',
} satisfies Record<string, string | number[]>;
TypeScriptsatisfies
상세 보기
tsxsnippet/06

useReducer 기본 패턴

type Action = { type: 'increment' } | { type: 'decrement' };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
  }
}
ReactuseReducer
상세 보기

사용 시 주의사항

스니펫 적용 전 확인할 것들

  • 버전 확인

    스니펫은 작성 시점의 라이브러리 버전 기준이다. Next.js, TypeScript 등은 버전별 API가 달라질 수 있으므로 적용 전에 현재 버전을 확인한다.

  • 라이선스

    이 사이트의 스니펫은 별도 라이선스 표기가 없는 한 자유롭게 사용할 수 있다. 단 외부 출처를 인용한 경우 해당 출처의 라이선스를 따른다.

  • 로컬에서 테스트

    복사한 코드를 프로덕션에 바로 배포하지 않는다. 로컬 환경에서 동작을 먼저 확인하는 것을 권장한다.

  • 환경 차이 주의

    Node.js 버전, 패키지 매니저(npm/pnpm), OS에 따라 동작이 달라질 수 있다. 특히 bash 스크립트는 환경 의존성이 크다.

스니펫 볼트 FAQ

인용 정책과 검증 절차

  1. 공식 문서나 이슈 링크와 함께 알려주면 검토 후 반영한다. 틀린 부분은 수정 예정이다.

더 찾고 있다면

에러 룩업 또는 데브로그로

원하는 스니펫을 찾지 못했다면 에러 룩업에서 증상으로 검색하거나 데브로그에서 관련 맥락을 확인할 수 있다.

에러 룩업 보기데브로그 둘러보기