초기 세팅 / eslint, prettier / tsconfig.json / tsconfig 전역 속성

 

초기 세팅 이해하느라 

몇시간 걸렸다..

하지만.. 듣는다.. 강의를..

그리고 .. 기록 한다...

 

 

프론트엔드 초기 세팅 - exlint, prettier

 

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

 

exlint : 코드 검사 도구
prettier : 코드 정렬 도구

 

 

.eslintrc >

{
  "extends": ["plugin:prettier/recommended"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2021
  }
}

 

  "extends": ["plugin:prettier/recommended"],

: 프리티어가 추천한 대로 따르겠다라는 의미이다.

 

.prettierrc >

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

 

최대 글자수 120

스페이스 두칸

홑 따옴표 사용

항상 콤마를 붙이겠다

세미콜론을 항상 붙이겠다는 뜻

 

tsconfig.json

 

tsconfig.json은 타입스크립트를 자바스크립트로 변환시키는 컴파일 설정을 한꺼번에 정의 해놓는 파일이다.

프로젝트를 컴파일 하는데 필요한 루트파일, 컴파일러 옵션 등을 상세히 설정할 수 있다.

 

디렉토리에 tsconfig.json파일이 있다면 해당 디렉토리가 TypeScript프로젝트의 루트가 된다.

tsconfig.json파일은 프로젝트를 컨파일 하는데 필요한 루트 파일과 컴파일러 옵션을 지정한다.

 

JavaScript 프로젝트는 jsconfig.json 파일을 대신 사용할 수 있다.

이 파일은 tsconfig.json 파일과 거의 동일하게 동작하지만,

몇몇 JavaScript 관련 컴파일러 플래그가 기본으로 활성화되어 있다.

 

tsconfig에서 옵션들을 미리 정의해 놓으면, 더이상 컴파일 할 떄 명령어에 일일히 대상 파일이나 

옵션을 지정하지 않아도 된다.

그래서 tsc나 ts-node명령어를 그냥 실행하게 되면, 현재 폴더에 있는 tsconfig설정 내용을 기준으로 

프로젝트에서 소스들을 변환 작업(컴파일)을 진행하게 된다.

만약 현재 폴더에 tsconfig설정 파일이 없다면 프로젝트 폴더 내에서 상위 폴더의 경로를 검색해 나간다.

 

 

tsc --init

 

해당 명령어를실행하면, 미리 작성된 tsconfig.json파일을 자동으로 만들어준다.

파일을 열어보면 사진에서 보다시피 무수히 많은 옵션들이 있는 걸 볼 수 있다.

 

 

tsconfig 전역 속성

 

tsconfig전역 속성이란, 파일의 최상위에 위치하고 있는 속성들을 일컫는다.

 

{
    // TypeScript 컴파일러의 옵션들을 지정하는 속성
    "compilerOptions": { 
        "target": "es5", 
        "module": "commonjs", 
        "strict": true, 
        "sourceMap": true
        // ... 무수히 많은 속성들
    },

    // 컴파일할 파일들의 개별 목록을 지정하는 속성
    "files": ["src/main.ts", "src/utils.ts"],

    // 컴파일할 파일들을 지정하는 속성 (와일드 카드 패턴으로 묶어 표현) 
    "include": [ "src/**/*.ts" ], 
    
    // 컴파일 대상에서 제외할 파일들을 지정하는 속성 
    "exclude": [ "node_modules", "**/*.test.ts" ], 
    
    // 다른 tsconfig.json 파일을 상속받아서 설정을 재사용할 수 있게 해주는 속성 
    "extends": "./configs/base.json", 
    
    // 여러 개의 하위 프로젝트로 구성된 프로젝트의 의존 관계를 지정하는 속성 
    "references": [ 
        { "path": "./subproject1" }, 
        { "path": "./subproject2" } 
    ], 
    
    // 타입 습득(type acquisition)과 관련된 옵션들을 지정하는 속성 
    "typeAcquisition": { 
        "enable": true, 
        "include": ["jquery"], 
        "exclude": ["react"] 
    }, 
        
    // watch 모드와 관련된 옵션들을 지정하는 속성 
    "watchOptions": { 
        "watchFile": "useFsEvents", 
        "watchDirectory": "useFsEvents", 
        "fallbackPolling": "dynamicPriority"
    }
}

 

많은 전역 속성들이 있지만, 이 중에서 주로 쓰이는 다섯가지 속성으로는

compilerOptions, files, include, exclude, extends 정도가 있다.

 

files

 

프로젝트에서 컴파일할 목록들을 명시적으로 지정하는 속성

files 속성은 exclude보다 우선순위가 높다. 

만일 이 속성이 생략되면, include와 exclude속성으로 컴파일 대상을 결정한다.

 

{
  "files": [ // 파일 확장자까지 정확히 작성해줘야 한다
    "src/main.ts",
    "src/utils.ts",
    "src/types.d.ts"
  ]
}

 

extends

 

extends는 다른 tsconfig.json파일의 설정들을 가져와 재사용할 수 있게 해주는 옵션이다.

보통 extends속성은 tsconfig.json파일의 최상위에 위치한다.

 

예를들어 config/base.json 파일의 속성 설정을 

현 tsconfig.json 파일에 포맷이 맞으면 base파일의 설정을 상속 받게 된다.

 

// config/base.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

{
  "extends": "./configs/base",
  "compilerOptions": {
    "strictNullChecks": false
  },
  "files": [
    "src/main.ts",
    "src/utils.ts",
    "src/types.d.ts"
  ]
}

 

include

 

include 속성은 files 속성과 같이 프로젝트에서 컴파일할 파일들을 지정하는 속성이지만, 와일드 카드 패턴으로 지정한다는 점에서 차이가 있다. 또한 include는 files 속성과는 달리 exclude보다 약해 include에 명시되어 있어도 exclude에도 명시되어 있으면 제외 되게 된다.

 

{
  "compilerOptions": {
    ...
  },
  "include": [
    "src/*.ts", // src 디렉토리에 있는 모든 .ts 파일
    "dist/test?.ts" // dist 디렉토리에 있는 test1.ts, test2.ts , test3.ts ..등에 일치
    "test/**/*.spec.ts" // test 디렉토리와 그 하위 디렉토리에 있는 모든 .spec.ts 파일
  ]
}

 

와일드 카드 패턴이란 tsconfig.json 파일에서 include나 exclude 속성에 사용할 수 있는 파일이나 디렉토리를 그룹화하여 일치시키는 기호라고 보면 된다.

 

*  : 해당 디렉토리에 있는 모든 파일

? : 해당 디렉토리에 있는 파일들의 이름 중 한 글자라도 포함하면 해당

** : 해당 디렉토리의 하위 디렉토리의 모든 파일을 포함

 

exclude

 

exclude 속성은 프로젝트에서 컴파일 대상에서 제외할 파일들을 와일드카드 패턴으로 지정하는 속성이다.

즉, include의 반대버전이라고 보면 된다.

 

와일드 카드 패턴이란?

 

  컴퓨터나 특정 명령어로 명령을 내릴 때, 여러 파일을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킨다.

이 문자는 어느 곳에서 사용하느냐에 따라 약간의 차이를 보인다.

주로 특정한 패턴이 있는 문자열 혹은 파일을 찾거나, 긴 이름을 생략할 떄 쓰인다.

 

{
  "compilerOptions": {
    ...
  },
  
  "exclude": [
    "node_modules", // node_modules 디렉토리를 제외
    "**/*.test.ts" // 모든 .test.ts 파일을 제외
  ]
}

 

compilerOptions

 

컴파일 대상 파일들을 어떻게 변환할지 세세히 정하는 옵션

정말 많은 옵션들이 있다.

 

{
  "compilerOptions": {
  
    /* 기본 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "incremental": true,                   /* 증분 컴파일 활성화 */ 
    "target": "es5",                          /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "esnext",                       /* 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": ["dom", "dom.iterable", "esnext"], /* 컴파일 과정에 사용될 라이브러리 파일 설정 */
    "allowJs": true,                          /* JavaScript 파일 컴파일 허용 */
    "checkJs": true,                       /* .js 파일 오류 리포트 설정 */
    "jsx": "react",                           /* 생성될 JSX 코드 설정: 'preserve', 'react-native', or 'react'. */
    "declaration": true,                   /* '.d.ts' 파일 생성 설정 */
    "declarationMap": true,                /* 해당하는 각 '.d.ts'파일에 대한 소스 맵 생성 */
    "sourceMap": true,                     /* 소스맵 '.map' 파일 생성 설정 */
    "outFile": "./",                       /* 복수 파일을 묶어 하나의 파일로 출력 설정 */
    "outDir": "./dist",                    /* 출력될 디렉토리 설정 */
    "rootDir": "./",                       /* 입력 파일들의 루트 디렉토리 설정. --outDir 옵션을 사용해 출력 디렉토리 설정이 가능 */
    "composite": true,                     /* 프로젝트 컴파일 활성화 */
    "tsBuildInfoFile": "./",               /* 증분 컴파일 정보를 저장할 파일 지정 */
    "removeComments": true,                /* 출력 시, 주석 제거 설정 */
    "noEmit": true,                           /* 출력 방출(emit) 유무 설정 */
    "importHelpers": true,                 /* 'tslib'로부터 헬퍼를 호출할 지 설정 */
    "downlevelIteration": true,            /* 'ES5' 혹은 'ES3' 타겟 설정 시 Iterables 'for-of', 'spread', 'destructuring' 완벽 지원 설정 */
    "isolatedModules": true,                  /* 각 파일을 별도 모듈로 변환 ('ts.transpileModule'과 유사) */

    /* 엄격한 유형 검사 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "strict": true,                           /* 모든 엄격한 유형 검사 옵션 활성화 */
    "noImplicitAny": true,                 /* 명시적이지 않은 'any' 유형으로 표현식 및 선언 사용 시 오류 발생 */
    "strictNullChecks": true,              /* 엄격한 null 검사 사용 */
    "strictFunctionTypes": true,           /* 엄격한 함수 유형 검사 사용 */
    "strictBindCallApply": true,           /* 엄격한 'bind', 'call', 'apply' 함수 메서드 사용 */
    "strictPropertyInitialization": true,  /* 클래스에서 속성 초기화 엄격 검사 사용 */
    "noImplicitThis": true,                /* 명시적이지 않은 'any'유형으로 'this' 표현식 사용 시 오류 발생 */
    "alwaysStrict": true,                  /* 엄격모드에서 구문 분석 후, 각 소스 파일에 "use strict" 코드를 출력 */

    /* 추가 검사 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "noUnusedLocals": true,                /* 사용되지 않은 로컬이 있을 경우, 오류로 보고 */
    "noUnusedParameters": true,            /* 사용되지 않은 매개변수가 있을 경우, 오류로 보고 */
    "noImplicitReturns": true,             /* 함수가 값을 반환하지 않을 경우, 오류로 보고 */
    "noFallthroughCasesInSwitch": true,       /* switch 문 오류 유형에 대한 오류 보고 */
 	"noUncheckedIndexedAccess": true,      /* 인덱스 시그니처 결과에 'undefined' 포함 */

    /* 모듈 분석 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "moduleResolution": "node",               /* 모듈 분석 방법 설정: 'node' (Node.js) 또는 'classic' (TypeScript pre-1.6). */
    "baseUrl": "./",                       /* 절대 경로 모듈이 아닌, 모듈이 기본적으로 위치한 디렉토리 설정 (예: './modules-name') */
    "paths": {},                           /* 'baseUrl'을 기준으로 상대 위치로 가져오기를 다시 매핑하는 항목 설정 */
    "rootDirs": [],                        /* 런타임 시 프로젝트 구조를 나타내는 로트 디렉토리 목록 */
    "typeRoots": [],                       /* 유형 정의를 포함할 디렉토리 목록 */
    "types": [],                           /* 컴파일 시 포함될 유형 선언 파일 입력 */
    "allowSyntheticDefaultImports": true,     /* 기본 출력(default export)이 없는 모듈로부터 기본 호출을 허용 (이 코드는 단지 유형 검사만 수행) */
    "esModuleInterop": true,                   /* 모든 가져오기에 대한 네임스페이스 객체 생성을 통해 CommonJS와 ES 모듈 간의 상호 운용성을 제공. 'allowSyntheticDefaultImports' 암시 */
    "preserveSymlinks": true,              /* symlinks 실제 경로로 결정하지 않음 */
    "allowUmdGlobalAccess": true,          /* 모듈에서 UMD 글로벌에 접근 허용 */

    /* 소스맵 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "sourceRoot": "./",                    /* 디버거(debugger)가 소스 위치 대신 TypeScript 파일을 찾을 위치 설정 */
    "mapRoot": "./",                       /* 디버거가 생성된 위치 대신 맵 파일을 찾을 위치 설정 */
    "inlineSourceMap": true,               /* 하나의 인라인 소스맵을 내보내도록 설정 */
    "inlineSources": true,                 /* 하나의 파일 안에 소스와 소스 코드를 함께 내보내도록 설정. '--inlineSourceMap' 또는 '--sourceMap' 설정이 필요 */

    /* 실험적인 기능 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "experimentalDecorators": true,        /* ES7 데코레이터(decorators) 실험 기능 지원 설정 */
    "emitDecoratorMetadata": true,         /* 데코레이터를 위한 유형 메타데이터 방출 실험 기능 지원 설정 */
    
    /* 고급 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "skipLibCheck": true,                     /* 선언 파일 유형 검사 스킵 */
    "forceConsistentCasingInFileNames": true  /* 동일한 파일에 대한 일관되지 않은 케이스 참조를 허용하지 않음 */
    
  }
}