Softonic

tsconfig.json 생성기

단계 1 / 2
결과

tsconfig.json에는 100개가 훌쩍 넘는 컴파일러 옵션이 있고, TypeScript 튜토리얼마다 다른 조합을 보여줍니다. 이 생성기는 대부분의 프로젝트에서 중요한 것만 다룹니다. target, module, moduleResolution, jsx, 자주 쓰는 불리언 플래그(strict, esModuleInterop, skipLibCheck 등), 그리고 outDir/rootDir 폴더입니다. 옵션을 바꿀 때마다 tsconfig.json 미리보기가 실시간으로 갱신됩니다. 프로젝트 루트에 복사하면 보일러플레이트가 끌고 다니는 죽은 옵션 없는 깔끔한 설정이 완성됩니다.

설정이 만들어지는 방식

  1. 1

    target과 module 선택

    tsc가 출력할 JavaScript 버전(ES2015부터 ES2023, 또는 ESNext)과 모듈 시스템(CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext)을 고릅니다.

  2. 2

    moduleResolution과 JSX 결정

    Vite/webpack 프로젝트는 bundler, 최신 Node는 node16/nodenext, 오래된 구성은 node나 classic. 최신 React라면 jsx를 react-jsx로 두고, none으로 두면 키 자체가 빠집니다.

  3. 3

    플래그 켜고 끄기

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap, forceConsistentCasingInFileNames를 간단한 체크박스로 조절합니다.

  4. 4

    폴더 지정

    outDir와 rootDir는 ./dist와 ./src가 기본값입니다. include와 exclude는 src/**/*와 node_modules, dist로 고정입니다.

  5. 5

    생성된 tsconfig 복사

    JSON 미리보기가 실시간으로 갱신됩니다. 클릭 한 번으로 복사해 프로젝트 루트에 tsconfig.json으로 두면 끝입니다.

이 생성기가 써 주는 옵션

옵션 여기서의 기본값 하는 일
target ES2022 출력 JavaScript 버전. ES2022는 현재 브라우저와 Node에서 안전합니다. 더 낮은 target은 레거시 환경에만 쓰세요.
module ESNext 출력 모듈 문법. Node ESM 프로젝트는 NodeNext/Node16, 레거시 Node는 CommonJS.
moduleResolution node 임포트를 찾는 방식. Vite/webpack/esbuild에는 bundler, 최신 Node에는 node16/nodenext를 권장합니다. node(node10)는 예전 방식입니다.
jsx 생략 모드를 골랐을 때만 기록됩니다. React 17+는 react-jsx, 번들러가 JSX를 변환하면 preserve.
strict true strict 계열 검사를 한꺼번에 켭니다. 새 프로젝트에서는 켠 채로 두세요.
esModuleInterop true CommonJS 패키지의 기본 임포트 문제를 해결합니다.
skipLibCheck true .d.ts 파일의 타입 검사를 건너뜁니다. 컴파일이 훨씬 빨라지고 실제 버그를 놓치는 일은 드뭅니다.
forceConsistentCasingInFileNames true 디스크의 파일과 대소문자가 다른 임포트를 거부합니다(macOS에서 Linux로 옮길 때 터지는 고전적인 원인).
resolveJsonModule true import data from "./data.json"을 허용합니다.
allowJs false .js 파일도 컴파일에 포함합니다. 마이그레이션 중에 유용합니다.
declaration false .d.ts 파일을 출력합니다. 라이브러리를 배포할 때 켜세요.
sourceMap false 디버깅용 .js.map 파일을 출력합니다.
outDir / rootDir ./dist / ./src 컴파일 결과가 갈 곳과 소스가 있는 곳.
baseUrl "." 항상 기록됩니다. 직접 추가한 paths 블록이 프로젝트 루트 기준으로 해석되게 하기 위해서입니다.

기본 출력 그대로

컨트롤을 전혀 건드리지 않으면 정확히 이 파일을 얻습니다:

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src",
        "baseUrl": "."
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

jsx에서 none이 아닌 모드를 고르면 compilerOptions에 "jsx" 항목이 추가됩니다.

strict 모드가 실제로 켜는 것

strict: true는 우산 플래그로, strict 계열 검사를 한 번에 켭니다. noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables, alwaysStrict 등이 포함됩니다. 새 프로젝트는 전부 켠 채로 시작해야 합니다. 나중에 strict를 끼워 넣는 일은 고통스럽습니다.

흔한 실수

  • Node ESM 프로젝트에 module: "CommonJS" 설정. package.json에 "type": "module"이 있다면 module과 moduleResolution 모두 NodeNext를 쓰세요.
  • tsc를 번들러로 사용. tsc는 컴파일러이자 타입 검사기입니다. 빌드는 Vite/esbuild/SWC, 타입 검사는 tsc --noEmit으로 하세요.
  • 전부 컴파일하기. include 목록이 없으면 TypeScript는 보이는 모든 .ts를 집어 듭니다. 생성된 설정은 항상 include: ["src/**/*"]를 쓰고 node_modules와 dist를 제외하므로 안심해도 됩니다.
  • 설정에 없는 것이 필요해질 때. 이 생성기는 의도적으로 최소로 유지됩니다. lib, paths, isolatedModules, noEmit 같은 옵션은 기본 파일이 자리 잡은 뒤 직접 추가하면 간단합니다.

자주 묻는 질문

모노레포와 다중 패키지 프로젝트라면 예. 공통 옵션을 담은 베이스 파일 하나를 두고 각 패키지가 “extends”로 확장합니다. 단일 프로젝트 저장소라면 생성된 것 같은 tsconfig.json 한 장이 더 간단합니다.

Vite, webpack, esbuild로 빌드하는 프로젝트를 위해 TypeScript 5.0에서 도입되었습니다. node16/nodenext의 ESM 파일 확장자 규칙 없이, 번들러가 실제로 임포트를 해석하는 방식을 반영합니다. Node가 직접 실행하는 코드에는 node16이나 nodenext를 쓰세요.

전용 컨트롤은 없습니다. 대신 생성된 파일이 항상 baseUrl을 “.“로 설정하므로 바로 아래에 paths 블록을 붙여 넣으면 됩니다. 예를 들어 “@/*”: [“src/*”]로 쓰면 프로젝트 루트 기준으로 해석됩니다.

보통은 필요 없고, 그래서 이 생성기도 쓰지 않습니다. target이 그에 맞는 라이브러리 타입 세트를 암시합니다. Node 프로젝트에서 DOM API가 필요하거나 WebWorker 타입이 필요한 특수한 경우에만 직접 재정의하세요.

가입이 필요 없고 아무것도 저장되지 않습니다. 선택은 설정 미리보기를 그리는 데만 쓰이며, 단계별 보기에서는 페이지 URL에도 담기므로 완성된 설정을 북마크하거나 공유하기 쉽습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

이 도구는 다른 언어로도 제공됩니다