JavaScript 정적 코드 분석: ESLint, TypeScript, Semgrep 및 보안 스캔에 대한 실용 가이드

자바스크립트는 브라우저, Node.js를 통한 서버, React Native를 통한 모바일 앱, 클라우드 함수, 엣지 컴퓨팅 환경 등 어디에서나 실행되는 유일한 언어입니다. 하지만 이러한 보편성에는 품질 저하라는 대가가 따릅니다. 자바스크립트의 동적 타이핑, 프로토타입 체인, 비동기 실행 모델 덕분에 정상적인 상황에서는 잘 작동하고, 상황이 변할 때는 미묘한 오류를 발생시키는 코드를 쉽게 작성할 수 있습니다. TypeScript는 이러한 문제를 해결하는 데 큰 도움이 되지만, 타입 안정성이 곧 코드 품질, 보안 또는 아키텍처 건전성과 같은 것은 아닙니다. 바로 이 간극을 정적 분석이 메워줍니다.

JavaScript 또는 TypeScript 프로젝트에 적합한 정적 분석 도구 조합을 선택하는 것은 간단한 결정이 아닙니다. 린팅, 보안 검사, 타입 검사, 데드 코드 감지, 아키텍처 분석은 각각 다른 도구 범주에서 다루는 별개의 문제입니다. 보안 스캐너가 필요한 곳에 린터를 사용하거나, 의존성 분석이 필요한 곳에 타입 검사만 사용하는 것은 불완전한 분석 결과를 초래하고 잘못된 확신을 심어줄 수 있습니다. 이 가이드에서는 각 도구가 실제로 수행하는 기능별로 정리하여, 팀에서 중복 없이 모든 품질 측면을 포괄하는 도구 스택을 구축할 수 있도록 돕습니다.

방법 SMART TS XL 엔터프라이즈 규모에서 JavaScript 정적 분석을 지원합니다.

이 가이드에서 다루는 모든 도구는 JavaScript 경계 내에서 작동합니다. ESLint는 JavaScript 파일을 분석하고, TypeScript는 TypeScript 프로젝트 내의 타입을 검사하며, Semgrep은 JavaScript 및 TypeScript 소스 코드에서 취약점 패턴을 스캔하고, SonarQube는 JavaScript 코드베이스 전반의 품질 지표를 추적합니다. 이러한 도구들은 JavaScript 애플리케이션의 경계를 넘어 해당 애플리케이션이 의존하는 시스템이나 그 애플리케이션에 의존하는 시스템을 들여다볼 수는 없습니다.

SMART TS XL 정적 분석은 정반대 방향에서 접근합니다. 전체 시스템에서 시작하여 구성 요소 수준까지 구축해 나갑니다. JavaScript의 경우, 이는 JavaScript 및 TypeScript 소스 코드뿐만 아니라 COBOL, JCL, Java, Python, RPG, PL/I, SQL 등 환경에 있는 다른 모든 언어의 소스 코드를 수집하여 모든 언어 간의 구조적 관계를 나타내는 통합된 상호 참조 모델을 구축하는 것을 의미합니다. 예를 들어, JavaScript 모듈이 REST API를 호출하고, 해당 API는 Java 서비스로 지원되며, 이 서비스는 COBOL 배치 프로그램으로 채워진 DB2 테이블에서 데이터를 읽어옵니다. SMART TS XL 이 그림은 네 개의 레이어와 그 레이어들 사이의 연결 관계를 모두 보여줍니다. 자바스크립트 기반의 어떤 도구도 이러한 그림을 생성할 수 없습니다.

특히 자바스크립트 개발팀의 경우, SMART TS XL 보푸라기 검사 및 보안 검사 기능을 보완하는 여러 기능을 제공합니다.

언어 간 영향 분석. 기업용 API를 사용하는 JavaScript 모듈을 수정하기 전에, SMART TS XL의 영향 분석 이 기능은 다른 언어로 작성된 구성 요소를 포함하여 변경 사항의 영향을 받는 시스템 내의 모든 구성 요소를 식별합니다. 팀은 변경이 실행되기 전에 변경의 실제 범위를 파악할 수 있으며, 프로덕션 환경에서 예상치 못한 문제가 발생한 후에 파악하는 것을 방지할 수 있습니다.

시스템 수준에서의 데드 코드 및 도달 가능성 분석. Knip과 ts-prune이 JavaScript 프로젝트 내에서 사용되지 않는 내보내기를 찾는 위치, SMART TS XL 이 도구는 시스템 내 어디에서도 호출되지 않는 JavaScript 함수 및 모듈을 식별할 수 있습니다. 여기에는 Java 서비스, 백엔드 API 또는 메인프레임 프로그램의 호출도 포함됩니다. 이러한 시스템 수준의 데드 코드 분석은 JavaScript 프런트엔드가 다른 언어로 작성된 백엔드와 긴밀하게 통합된 조직에서 특히 유용합니다.

언어 경계를 넘나드는 의존성 시각화. SMART TS XL의 코드 시각화 이 도구는 JavaScript 모듈이 Java 서비스, COBOL 프로그램, 공유 데이터베이스 및 외부 API에 어떻게 연결되는지 보여주는 종속성 맵을 생성하며, 언어별 개별 보기 대신 탐색 가능한 단일 다이어그램으로 제공합니다.

이기종 스택을 위한 통합 품질 측정 기준. 코드 품질 지표를 경영진이나 규정 준수 팀에 보고하는 조직은 자바스크립트 계층뿐만 아니라 전체 스택을 포괄하는 지표를 활용하면 이점을 얻을 수 있습니다. SMART TS XL의 정적 코드 분석 이 평가 기준은 JavaScript와 TypeScript를 동일한 품질 기준(순환 복잡도, 유지보수성 지수, 의존성 결합도)으로 평가하며, 환경 내 모든 언어에 일관되게 적용됩니다.

독립적으로 JavaScript 애플리케이션을 개발하는 팀의 경우, 이 가이드에 소개된 오픈 소스 및 상용 도구는 포괄적인 기능을 제공합니다. 더 큰 엔터프라이즈 시스템의 구성 요소로 JavaScript 애플리케이션을 개발하는 팀의 경우, SMART TS XL 이는 파일 수준이 아닌 시스템 수준에서 나머지 분석을 실행할 수 있도록 하는 아키텍처 가시성 계층을 제공합니다.

먼지 분석과 정전기 분석의 차이점은 무엇일까요?

이 용어들은 종종 혼용되지만, 서로 다른 수준의 분석을 나타냅니다. 이러한 구분은 도구 선택에 있어 중요합니다.

보풀 스타일 일관성, 일반적인 오류 패턴 및 코딩 규칙 준수에 중점을 둔 정적 분석의 하위 집합입니다. 린터는 소스 코드를 읽고 정의된 규칙 집합에서 벗어난 부분을 표시합니다. ESLint는 린터의 한 종류이며, Biome은 린터 포맷터입니다. 이들은 스타일 일관성, 일반적인 오류 패턴 및 코딩 규칙 준수 여부를 확인합니다. no-unused-vars, no-console예산 및 prefer-const 위반 사항이 있습니다. 함수 호출 간의 데이터 흐름을 추적하지 않으며 SQL 인젝션과 같은 보안 취약점을 찾아내지도 않습니다.

더 넓은 의미의 정적 분석은 린터가 수행하는 모든 기능에 더하여 제어 흐름 분석, 데이터 흐름(오염) 분석, 호출 그래프 구성, 타입 수준 추론, 파일 및 모듈 간의 프로시저 간 분석과 같은 심층적인 분석을 포함합니다. CodeQL, 오염 모드가 적용된 Semgrep, SonarQube와 같은 도구는 이러한 포괄적인 의미의 정적 분석을 수행합니다. 이러한 도구들은 단순히 변수가 선언되었는지 여부만이 아니라, 신뢰할 수 없는 데이터가 프로그램 내에서 어떻게 이동하는지 이해함으로써 취약점을 찾아냅니다.

카테고리	찾기	대표적인 도구
보풀	스타일, 관례, 흔한 실수	ESLint, Biome, OxcLint, StandardJS
유형 확인	타입 오류, 누락된 타입, 타입 불일치	타입스크립트(TSC), typescript-eslint
SAST/보안 스캔	SQL 인젝션, XSS, 프로토타입 오염, 불안정한 종속성	Semgrep, CodeQL, Snyk Code, SonarQube
죽은 코드 감지	사용되지 않는 내보내기, 접근할 수 없는 코드, 사용되지 않는 변수	Knip, ts-prune, ESLint no-unused-vars
건축 분석	의존성 매핑, 영향 분석, 호출 그래프	SMART TS XL코드씬, 소스트레일

모든 완성도 높은 자바스크립트 프로젝트는 최소한 처음 세 가지 범주를 포함해야 합니다. 규모가 크거나 엔터프라이즈급 프로젝트는 다섯 가지 범주 모두를 포함해야 합니다.

ESLint: 자바스크립트 린팅을 위한 업계 표준 도구

ESLint는 거의 모든 JavaScript 프로젝트에 설치되어 있습니다. create-react-app, Next.js, Vite 및 대부분의 엔터프라이즈 스캐폴딩에서 기본 린터로 사용됩니다. 플러그인 생태계는 모든 주요 프레임워크(React, Vue, Angular, Node.js)와 언어 확장(TypeScript)을 지원합니다. 따라서 ESLint를 제대로 이해하는 것은 JavaScript 개발의 필수 조건입니다.

세게 때리다

# Install ESLint
npm init @eslint/config@latest

# Run on the project
npx eslint src/

# Auto-fix fixable issues
npx eslint src/ --fix

ESLint v9 및 플랫 설정: ESLint v9이 이전 버전을 대체했습니다. .eslintrc.* 평면을 사용한 구성 형식 eslint.config.js 이 파일은 호환성을 깨뜨리는 변경 사항으로, 기존의 많은 프로젝트에 영향을 미쳤습니다. 새로운 평면 설정 형식은 더 간결하며, 계층적 상속 시스템을 제거하고 설정을 명시적으로 지정합니다.

자바 스크립트

// eslint.config.js (ESLint v9 flat config)
import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      globals: globals.browser,
    },
    rules: {
      "no-unused-vars": "error",
      "no-console": "warn",
      "prefer-const": "error",
    },
  },
];

TypeScript용 ESLint 필요합니다 typescript-eslint 이 패키지는 기존 패키지를 대체합니다. @typescript-eslint/eslint-plugin @typescript-eslint/parserTSC에서 강제하지 않는 100개 이상의 TypeScript 관련 규칙을 제공합니다.

세게 때리다

npm install --save-dev typescript-eslint

ESLint 보안 플러그인 ESLint에 보안 관련 규칙을 추가하여 사용과 같은 문제를 탐지합니다. eval()안전하지 않은 정규 표현식 및 프로토타입 주입:

세게 때리다

npm install --save-dev eslint-plugin-security

자바 스크립트

// eslint.config.js
import security from "eslint-plugin-security";
export default [security.configs.recommended];

ESLint가 다루는 내용코드 스타일, 흔히 발생하는 버그 (no-undef, no-unused-vars플러그인을 통해 안티 패턴, 프레임워크 규칙 및 기본 보안 패턴을 구현할 수 있습니다.

ESLint가 다루지 않는 내용 : 함수 호출 전반에 걸친 데이터 흐름/오염 분석, 파일 간 영향 분석, 종속성 취약점, 아키텍처 매핑 또는 비동기 관련 취약점 패턴.

TypeScript: 컴파일러 수준에서의 정적 안전성

TypeScript 컴파일러(TSC)는 JavaScript 프로젝트에서 사용할 수 있는 가장 강력한 정적 분석을 수행합니다. 즉, 모든 함수 경계에서 전체 코드베이스에 걸쳐 타입 정확성을 검증합니다. strict 모드 tsconfig.json 가장 많은 문제를 포착합니다:

JSON

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "exactOptionalPropertyTypes": true
  }
}

noUnusedLocals noUnusedParameters 컴파일러 수준에서 사용되지 않는 변수와 함수 매개변수를 포착하며, ESLint의 기능과 일부 겹칩니다. no-unused-vars 하지만 타입스크립트 관련 패턴에 대해서는 더 정확하게 설명합니다.

타입스크립트-eslint TypeScript의 타입 검사기와 ESLint의 규칙 시스템 간의 간극을 메워줍니다. 다음과 같은 규칙들이 있습니다. @typescript-eslint/no-floating-promises @typescript-eslint/await-thenable TSC나 ESLint만으로는 잡아낼 수 없는 비동기 프로그래밍 오류를 감지하기 위해 타입 정보를 활용합니다.

자바 스크립트

// eslint.config.js -- typescript-eslint with type-checked rules
import tseslint from "typescript-eslint";

export default tseslint.config(
  ...tseslint.configs.strictTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: true,  // enables type-aware rules
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      "@typescript-eslint/no-floating-promises": "error",
      "@typescript-eslint/await-thenable": "error",
      "@typescript-eslint/no-misused-promises": "error",
    },
  }
);

이 세 가지 규칙은 특히 이 기사의 검색 콘솔 데이터에 나타나는 async/await 오류 패턴을 해결합니다. 잘못된 Promise 처리는 최신 JavaScript에서 가장 흔하게 발생하는 버그 중 하나입니다. typescript-eslint 별도의 도구 없이도 포착할 수 있습니다.

Biome과 OxcLint: 차세대 자바스크립트 툴

ESLint는 10년 동안 기본 자바스크립트 린터였습니다. 하지만 이제 두 개의 새로운 도구가 훨씬 뛰어난 성능으로 그 자리를 위협하고 있습니다.

Biome은 ESLint와 Prettier를 모두 대체하는 단일 도구로, 린팅, 포맷팅, 임포트 관리 기능을 하나의 바이너리에 제공하며 기본 사용에는 별도의 설정이 필요하지 않습니다. Rust로 작성되었으며 대규모 코드베이스에서 ESLint보다 25~35배 빠른 속도를 자랑합니다. Biome은 JavaScript, TypeScript, JSX, JSON을 지원합니다.

세게 때리다

# Install
npm install --save-dev --save-exact @biomejs/biome

# Initialize config
npx @biomejs/biome init

# Check (lint + format check)
npx @biomejs/biome check --write src/

OxcLint (Oxc 프로젝트의 일부)는 Rust 기반의 또 다른 린터로, ESLint와 호환되는 규칙을 50~100배 빠른 속도로 실행합니다. ESLint의 핵심 규칙을 대체하도록 설계되었으며, 마이그레이션 과정에서 ESLint와 함께 실행되도록 고안되었으므로, ESLint를 완전히 교체할 필요가 없습니다.

세게 때리다

# Install
npm install --save-dev oxlint

# Run
npx oxlint src/

각 도구를 언제 사용해야 할까요 ? 새로운 프로젝트의 경우, Biome은 린팅 및 포맷팅을 위한 가장 강력한 단일 도구입니다. ESLint 설정과 플러그인이 광범위하게 적용된 기존 프로젝트의 경우, Biome으로 마이그레이션하려면 규칙 적용 범위를 검증해야 합니다. OxcLint는 플러그인 생태계를 즉시 포기할 수 없는 대규모 기존 프로젝트에서 ESLint를 점진적으로 대체하는 데 더 적합합니다.

수단	속도 vs ESLint	Prettier를 대체합니다.	타입스크립트 지원	플러그인 생태계
ESLint	기준	아니요 (Prettier와 짝을 이루세요)	typescript-eslint를 통해	가장 큰 규모 (~3,000개 플러그인)
바이오 메	25~35배 더 빠름	가능	내장	제한적이지만 성장 중
옥슬린트	50~100배 더 빠름	아니	내장	ESLint 호환 하위 집합
스탠다드JS	ESLint와 유사함	일부의	제한된	고정 규칙 세트

Semgrep: 자바스크립트 보안을 위한 패턴 기반 SAST

Semgrep은 코드 패턴 매칭을 통해 보안 취약점을 찾아내는 다국어 정적 분석 보안 테스트(SAST) 도구입니다. ESLint가 스타일과 규칙을 강제하는 반면, Semgrep은 SQL 인젝션, XSS, 프로토타입 오염, 하드코딩된 자격 증명, 안전하지 않은 Express.js 구성 등 JavaScript 및 TypeScript 전반에 걸쳐 수백 가지의 보안 패턴을 찾아냅니다.

ESLint와의 주요 차이점은 Semgrep 규칙이 대상 언어의 구문을 매우 유사하게 반영하는 코드 패턴으로 작성되어 정적 분석에 대한 전문 지식이 없는 개발자도 읽고 작성할 수 있다는 점입니다.

얌

# Custom Semgrep rule: flag direct use of user input in SQL queries
rules:
  - id: sql-injection-express
    patterns:
      - pattern: |
          $APP.get($ROUTE, ($REQ, $RES) => {
            ...
            $DB.query($REQ.query.$INPUT, ...);
            ...
          })
    message: User input directly used in SQL query -- use parameterized queries
    languages: [javascript, typescript]
    severity: ERROR

세게 때리다

# Run Semgrep with the community security rule registry
semgrep scan --config=p/javascript src/

# Run with a specific rule set for Node.js
semgrep scan --config=p/nodejs src/

Semgrep과 ESLint 는 경쟁 관계가 아니라 상호 보완적인 관계입니다. 코드 품질 및 규칙 준수에는 ESLint를 사용하고, 보안 검사에는 Semgrep을 사용하세요. 대부분의 JavaScript 개발팀은 CI 환경에서 두 도구 모두를 실행해야 합니다. GitLab은 최근 SAST 분석 도구를 ESLint에서 Semgrep으로 전환한다고 발표했는데, 보안 검사 도구로서의 ESLint는 단계적으로 폐지하고 린팅 도구로는 유지할 예정입니다. 이는 ESLint가 린팅에 적합하고 Semgrep이 보안 분석에 적합하다는 공감대가 형성되고 있음을 반영합니다.

SonarQube와 SonarLint: 지속적인 품질 관리 시스템

SonarQube는 품질 게이트 모델을 제공합니다. 각 풀 리퀘스트는 정의된 품질 프로파일에 따라 평가되며, 코드가 기준을 충족하지 못하면 병합이 차단됩니다. JavaScript 및 TypeScript의 경우 버그, 코드 스멜, 보안 취약점 및 중복을 감지하고 시간 경과에 따른 추세를 추적합니다.

SonarLint 는 개발자가 코드를 작성하는 동안 SonarQube 규칙을 로컬에 표시하여 CI를 기다릴 필요 없이 즉각적인 피드백을 받을 수 있도록 하는 IDE 확장 프로그램입니다.

SonarQube가 순수 린팅 도구와 차별화되는 점은 지속적인 측정 모델입니다. SonarQube는 기술 부채, 코드 커버리지, 보안 취약점의 변화를 시간 경과에 따라 추적합니다. 개발자용 진단 기능과 더불어 관리자 수준의 코드 품질 보고서가 필요한 팀에게 SonarQube는 최적의 선택입니다.

JavaScript/TypeScript 프로젝트의 주요 설정 :

• 새로운 차단 요소 또는 중요한 보안 취약점이 발생할 경우 실패하는 품질 게이트를 설정하십시오.
• 활성화 Sonar Way 규칙 프로필을 기준선으로 사용
• VS Code 또는 IntelliJ에서 SonarLint와 함께 사용하면 에디터 내에서 바로 피드백을 받을 수 있습니다.
• GitHub Actions 또는 GitLab CI와 통합하려면 다음을 사용하세요. SonarQube Scan 동작

CodeQL: 심층적인 취약점 탐지를 위한 시맨틱 코드 스캐닝

GitHub에서 개발한 CodeQL은 코드를 쿼리 가능한 데이터베이스로 변환하고 해당 데이터베이스에 대해 쿼리를 실행하여 의미 분석을 수행합니다. JavaScript와 TypeScript를 지원하며 GitHub Advanced Security를 ​​통해 오픈 소스 프로젝트에서 무료로 사용할 수 있습니다.

CodeQL은 프로그램 전체에서 데이터가 어떻게 흐르는지 이해해야 하는 취약점을 찾아냅니다. 예를 들어, 사용자가 제어하는 ​​값이 여러 함수 호출을 거쳐 안전하지 않은 작업에 도달하는 경우를 분석합니다. CodeQL은 코드 경로가 간접적인 경우 Semgrep과 같은 패턴 매칭 도구가 놓치는 취약점을 잡아내는 데 효과적입니다.

얌

# .github/workflows/codeql.yml
name: CodeQL Analysis
on: [push, pull_request]
jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: github/codeql-action/init@v3
        with:
          languages: javascript-typescript
      - uses: github/codeql-action/autobuild@v3
      - uses: github/codeql-action/analyze@v3

CodeQL은 Semgrep보다 설정 비용이 더 많이 들고 실행 속도도 느리지만, 패턴 기반 도구로는 전체 데이터 흐름 분석 없이는 식별할 수 없는 함수 간, 파일 간 오염 흐름과 같은 다른 유형의 취약점을 포착합니다.

사용되지 않는 코드 감지: 사용되지 않는 내보내기 및 접근할 수 없는 코드

자바스크립트와 타입스크립트 프로젝트에서 사용되지 않는 코드는 특히 문제가 되는데, 모듈 시스템이 사용되지 않는 내보내기가 누적되는 것을 막지 못하기 때문입니다. 함수가 내보내졌지만 한 번도 가져오지 않은 경우, 특별히 설정하지 않으면 어떤 표준 도구도 이에 대해 경고하지 않습니다.

자르다 현재로서는 이를 위한 가장 뛰어난 도구입니다. 전체 프로젝트 그래프를 분석하여 사용되지 않는 내보내기, 사용되지 않는 종속성 등을 찾아냅니다. package.json그리고 접근할 수 없는 파일:

세게 때리다

npm install --save-dev knip
npx knip

ts-prune은 특히 TypeScript를 대상으로 하며, 가져오지 않는 내보낸 심볼을 찾아냅니다.

세게 때리다

npm install --save-dev ts-prune
npx ts-prune

ESLint no-unused-vars @typescript-eslint/no-unused-vars ESLint는 파일 내에서 사용되지 않는 지역 변수를 찾아낼 수 있지만, 모듈 수준에서 사용되지 않는 내보내기는 감지할 수 없습니다. Knip은 ESLint가 놓치는 부분을 보완합니다.

사용되지 않는 코드(데드 코드)는 프런트엔드 애플리케이션의 번들 크기에 직접적인 영향을 미치고, 코드베이스를 다루는 개발자의 인지 부하를 증가시킵니다. 데드 코드 제거는 가장 효과적인 유지보수 활동 중 하나이며, 대규모 코드베이스에서 모듈 수준의 사용 빈도를 사람이 직접 추적하는 것은 불가능하기 때문에 도구를 통해서만 발견할 수 있습니다.

Async/await 및 Promise: 정적 분석 과제

이 기사에 대한 검색 콘솔 데이터를 보면 TAJS, Jelly 정적 분석기, SonarJS 비동기 규칙 등과 같은 비동기 JavaScript용 정적 분석 도구에 대한 검색어가 상당수 집중되어 있는 것을 알 수 있습니다. 이는 도구 시장에 실제로 부족한 부분이 있음을 반영합니다.

표준 린팅 도구는 Promise와 비동기 함수가 상호 작용하는 방식을 모델링하지 않습니다. 누락된 부분이 있습니다. await처리되지 않은 거부 또는 동시 비동기 코드의 경쟁 조건은 구문적으로는 유효해 보이고 모든 린트 규칙을 통과하는 경우가 있습니다. 이러한 문제를 감지하려면 비동기 실행 의미론을 모델링하는 도구가 필요합니다.

현재의 실질적인 접근 방식 :

typescript-eslint 비동기 관련 규칙 중 가장 즉시 활용 가능한 규칙을 제공합니다.

자바 스크립트

// Rules that catch common async mistakes
"@typescript-eslint/no-floating-promises": "error",    // await or .catch() required
"@typescript-eslint/await-thenable": "error",          // only await actual Promises
"@typescript-eslint/no-misused-promises": "error",     // Promises in non-async contexts
"@typescript-eslint/require-await": "warn",            // async functions must use await

TAJS(Type Analyzer for JavaScript), Jelly, SAFE와 같은 연구 도구는 Promise 체인, async/await, 이벤트 루프 의미론을 포함한 JavaScript의 비동기 실행 모델을 모델링하는 학술적인 정적 분석기입니다. 이러한 도구는 실제 개발 환경에서 사용되는 도구가 아니라 취약점 연구 및 형식 분석 작업에 사용되는 연구 플랫폼입니다. 검색 콘솔 데이터에서 "jelly static analyzer javascript async support paper" 및 "TAJS async await support"와 같은 검색어는 개발자들이 일상적인 개발 도구를 찾는 것이 아니라 이러한 학술적인 도구를 연구하거나 인용하는 것을 반영합니다.

SonarQube의 javascript:S4328 관련 비동기 규칙은 프로덕션 품질 분석에서 흔히 발생하는 몇 가지 비동기 안티 패턴을 감지합니다.

실제 프로덕션 환경에서 사용하려면 TypeScript의 타입 검사기와 다음과 같은 기능을 함께 사용하는 것이 좋습니다. typescript-eslintSonarQube의 비동기 인식 규칙과 품질 게이트는 오늘날 표준 도구에서 사용할 수 있는 가장 철저한 비동기 안전성을 제공합니다.

Snyk Code: 개발자 우선 보안 스캔

Snyk Code는 개발자 경험에 중점을 둔 SAST 스캐닝 솔루션을 제공합니다. VS Code 및 JetBrains IDE에 통합되어 개발자가 코드를 작성하는 동안 발견 사항을 바로 표시하고, 각 발견 사항에 대한 해결 예시를 제공합니다. 자체 개발한 머신러닝 기반 분석 엔진을 사용하여 JavaScript 및 TypeScript 코드베이스 전반에 걸쳐 오염 추적을 수행합니다.

세게 때리다

# Install Snyk CLI
npm install --save-dev snyk

# Authenticate and scan
npx snyk auth
npx snyk code test

Snyk Code는 IDE를 벗어나지 않고 보안 피드백을 받고자 하는 팀에게 특히 효과적입니다. Snyk Code의 수정 제안은 CodeQL의 쿼리 중심 출력보다 개발자 친화적이므로 취약점 탐지와 함께 보안 교육에 더 적합합니다.

계층형 JavaScript 정적 분석 스택 구축

자바스크립트 정적 분석에 대한 올바른 접근 방식은 하나의 도구를 선택하는 것이 아니라, 중복이 크지 않으면서 서로 다른 계층을 다루는 도구들을 조합하는 것입니다.

층	수단	그것이 실행될 때
서식	생태계 또는 더 아름다운	사전 커밋(빠른)
보풀	ESLint + typescript-eslint	사전 커밋 + CI
유형 확인	tsc --noEmit	CI
보안 스캐닝	Semgrep 또는 Snyk 코드	CI (모든 PR)
심층 취약점 스캐닝	CodeQL	CI (예정 또는 PR)
죽은 코드 감지	자르다	CI (주간 또는 월간)
품질 관리 게이트 + 추세 추적	소나큐브	CI (모든 PR)
종속성 취약점 스캔	npm audit + 스닉	CI(모든 빌드)

팀이 아무것도 없는 상태에서 시작할 때 필요한 최소한의 스택: ESLint + typescript-eslint + npm audit보안 요구 사항이 증가하면 Semgrep 또는 Snyk Code를 추가하십시오. 팀에서 품질 추세 가시성 및 관리 보고가 필요하면 SonarQube를 추가하십시오.

얌

# .github/workflows/quality.yml
name: JavaScript Code Quality
on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: "20" }
      - run: npm ci
      - run: npx tsc --noEmit
      - run: npx eslint src/ --max-warnings 0

  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: "20" }
      - run: npm ci
      - run: npm audit --audit-level=high
      - run: npx semgrep scan --config=p/javascript --error src/

자바스크립트가 대규모 엔터프라이즈 시스템에서 사용될 때

기업 환경에서 JavaScript 및 TypeScript 서비스는 COBOL 프로그램, Java 백엔드, Python 데이터 파이프라인, 그리고 기존 메인프레임 시스템과 점점 더 공존하고 있습니다. 이러한 맥락에서 위의 정적 분석 도구들은 JavaScript 경계 내에서는 철저한 가시성을 제공하지만, 그 경계를 넘어서는 연결에 대해서는 전혀 파악하지 못합니다.

COBOL 배치 작업으로 채워진 데이터베이스에서 데이터를 읽는 Node.js 서비스는 어떤 JavaScript 분석 도구도 파악할 수 없는 방식으로 해당 COBOL 프로그램에 의존합니다. COBOL 프로그램을 호출하는 Java API를 호출하는 React 프런트엔드는 세 가지 언어 경계를 넘나드는 의존성 체인을 가지고 있는데, 이 체인은 어떤 단일 언어 분석 도구의 관점에서도 보이지 않습니다.

SMART TS XL 이 솔루션은 전체 애플리케이션 포트폴리오에 걸쳐 언어 간 의존성 분석을 제공함으로써 이러한 문제를 해결합니다. JavaScript 모듈이 공유 데이터 구조에 어떻게 의존하는지, API 계약이 프런트엔드와 백엔드 서비스를 어떻게 연결하는지, 그리고 시스템의 한 부분에서 발생한 변경 사항이 다른 언어의 구성 요소에 어떻게 전파되는지를 나타내는 통합 모델을 구축합니다. 이것이 바로 그 솔루션입니다. 다국어 아키텍처 분석 이는 엔터프라이즈 아키텍처 팀이 여러 언어와 플랫폼에 걸쳐 있는 시스템 변경을 계획할 때 필요한 기능이며, 이 가이드에서 다루는 자바스크립트 관련 도구와 경쟁하는 것이 아니라 보완하는 기능입니다. 이러한 맥락에서 설명하자면, 의존성 그래프 및 애플리케이션 위험변경을 하기 전에 시스템의 전체 의존성 구조를 이해하는 것이 안전한 리팩토링과 아무도 테스트할 생각을 하지 못한 구성 요소에서 예상치 못한 오류를 발생시키는 변경을 구분하는 기준입니다.

이러한 대규모 환경 내에서 JavaScript에 특화된 분석을 수행하려면, SMART TS XL의 엔터프라이즈 코드 인텔리전스 이 솔루션은 COBOL, JCL, Java, Python 및 기타 엔터프라이즈 언어는 물론 JavaScript 및 TypeScript를 지원하며, 단일 플랫폼에서 통합된 품질 지표와 종속성 가시성을 제공합니다.

상황에 맞는 적절한 도구 선택하기

단일 도구로 자바스크립트 정적 분석의 모든 측면을 다룰 수는 없습니다. 어떤 도구를 선택할지는 팀 규모, 보안 요구 사항, 기존 도구 모음, 그리고 자바스크립트 애플리케이션이 독립적으로 작동하는지 아니면 더 큰 다국어 엔터프라이즈 시스템의 일부로 작동하는지에 따라 달라집니다.

새로운 프로젝트를 진행하는 1인 개발자 또는 소규모 팀의 경우: Biome(린팅 및 포맷팅)과 TypeScript 엄격 모드부터 시작하세요. npm audit 종속성 보안을 위해서입니다.

중규모 팀이 실제 운영 환경에 맞는 웹 애플리케이션을 개발할 경우, ESLint(typescript-eslint 포함), Prettier, TypeScript 엄격 모드, CI 환경에서의 보안 강화를 위한 Semgrep, 그리고 사용되지 않는 코드 탐지를 위한 Knip을 추천합니다.

규정 준수 및 보안 요구 사항이 있는 엔터프라이즈 팀의 경우: 품질 게이트 및 추세 추적을 위한 SonarQube, 심층 취약점 스캔을 위한 CodeQL, 개발자 대상 보안 피드백을 위한 Snyk Code, SMART TS XL 자바스크립트 애플리케이션이 레거시 시스템이나 다국어 시스템과 상호 작용하는 경우.

모노레포 환경에서 성능 때문에 ESLint 대안을 평가하는 팀이라면, 속도에 중점을 둔 OxcLint 또는 린터와 포맷터를 완벽하게 대체할 수 있는 Biome을 고려해 볼 수 있습니다.