Files
2nd/10_Wiki/Topics/Frontend/Scripts.md
T
koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)
이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-08 12:24:15 +09:00

5.0 KiB

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack
id title category status canonical_id aliases duplicate_of source_trust_level confidence_score verification_status tags raw_sources last_reinforced github_commit tech_stack
wiki-2026-0508-scripts Scripts 10_Wiki/Topics verified self
npm scripts
package.json scripts
Build Scripts
none A 0.9 applied
npm
build
automation
package-json
2026-05-10 pending
language framework
TypeScript Node.js + npm

Scripts

매 한 줄

"매 scripts는 package.json 의 entry point 인 명령어 alias". npm run <name> 으로 실행되며, dev/build/test/lint/deploy 등의 lifecycle automation 을 정의. 2026 기준 npm/pnpm/bun/yarn 호환, 매 monorepo 에서는 turbo/nx 가 orchestration.

매 핵심

매 lifecycle

  • pre/post: prebuildbuildpostbuild 자동 실행
  • special names: start, test, install, prepare
  • arbitrary: 매 다른 이름 은 npm run <name>

매 cross-platform

  • cross-env, rimraf, mkdirp 등으로 OS 차이 흡수
  • 매 modern 대안: zx, execa, tsx-based scripts

매 응용

  1. Local dev: dev, build, test, lint.
  2. CI: ci:test, ci:build, ci:deploy.
  3. Tooling: typecheck, format, analyze.
  4. Release: release, publish:dry.

💻 패턴

Modern package.json scripts

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "biome check .",
    "lint:fix": "biome check --write .",
    "typecheck": "tsc --noEmit",
    "test": "vitest",
    "test:e2e": "playwright test",
    "test:coverage": "vitest run --coverage",
    "format": "biome format --write .",
    "clean": "rimraf .next dist coverage",
    "prepare": "husky",
    "release": "changeset publish"
  }
}

Pre/post hooks

{
  "scripts": {
    "prebuild": "npm run typecheck && npm run lint",
    "build": "tsc -p tsconfig.build.json",
    "postbuild": "node scripts/copy-assets.mjs"
  }
}

Composing with npm-run-all or concurrently

{
  "scripts": {
    "dev": "concurrently -n web,api -c blue,green \"npm:dev:web\" \"npm:dev:api\"",
    "dev:web": "next dev",
    "dev:api": "tsx watch server/index.ts",
    "verify": "run-p typecheck lint test"
  }
}

TypeScript script with tsx

// scripts/seed.ts
import { db } from "../src/lib/db";
import { users } from "../src/lib/db/schema";

await db.insert(users).values([
  { email: "alice@example.com" },
  { email: "bob@example.com" },
]);
console.log("매 seed complete");
{ "scripts": { "db:seed": "tsx scripts/seed.ts" } }

zx automation

#!/usr/bin/env zx
import "zx/globals";

const branches = (await $`git branch --merged main`).stdout
  .split("\n")
  .map((b) => b.trim())
  .filter((b) => b && !b.startsWith("*") && b !== "main");

for (const b of branches) {
  await $`git branch -d ${b}`;
}
echo`매 deleted ${branches.length} merged branches`;

Cross-platform env

{
  "scripts": {
    "build:prod": "cross-env NODE_ENV=production webpack",
    "test:debug": "cross-env DEBUG=app:* vitest"
  }
}

Monorepo with pnpm + turbo

// root package.json
{
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev --parallel",
    "test": "turbo run test --filter=...[origin/main]"
  }
}

Bun-native scripts (faster startup)

{
  "scripts": {
    "dev": "bun --hot src/index.ts",
    "test": "bun test",
    "build": "bun build src/index.ts --outdir dist --target node"
  }
}

CI matrix script

{
  "scripts": {
    "ci:lint": "biome ci .",
    "ci:typecheck": "tsc --noEmit",
    "ci:test": "vitest run --coverage --reporter=verbose",
    "ci:build": "next build",
    "ci": "run-s ci:lint ci:typecheck ci:test ci:build"
  }
}

매 결정 기준

상황 Approach
매 simple alias npm script directly
매 multi-step orchestration npm-run-all / concurrently
Complex shell scripting zx / bash file
TS logic tsx / bun + TS file
Monorepo turbo / nx

기본값: npm scripts + tsx for TS + concurrently for parallel. 매 monorepo 면 turbo.

🔗 Graph

🤖 LLM 활용

언제: package.json 의 standard automation, dev/build/test/lint pipeline. 언제 X: 매 100+ lines of bash logic — 매 standalone script file 로 추출.

안티패턴

  • Inline complex shell: && if [[ ... ]]; then ... fi in JSON → 매 unreadable. zx / bash file.
  • No clean script: 매 stale build artifact debug 어려움. clean 필수.
  • OS-specific commands: rm -rf Windows 실패 → cross-platform 도구.
  • Hidden side effects in postinstall: 매 supply-chain risk. 신중.
  • Duplicate scripts across packages: 매 monorepo 면 turbo / shared config.

🧪 검증 / 중복

  • Verified (npm docs, package.json spec).
  • 신뢰도 A.

🕓 Changelog

날짜 변경
2026-05-08 Phase 1
2026-05-10 Manual cleanup — npm scripts full content