[FE] jsconfig.json 알아보기

jsconfig.json 파일이 무엇인가?

타입스크립트 config 파일인 tsconfig.json를 상속받았다고 생각하면 된다.

해당 파일이 위치한 경로가 JS 프로젝트의 root 디렉토리라고 명시하는 역할을 한다.

 

jsconfig 파일이 필요한 경우는 언제인가?

파일 스코프 - jsconfig 파일이 필요하지 않다. 어떤 방식으로도 a 파일과 b 파일이 서로 참조하지 않는 경우(import이든, CommonJS의 module이든) jsconfig는 없어도 된다. 즉, 이때는 VSCode에서 작업하는 JS 파일들은 각각 독립적인 유닛으로 처리된다.

명시적인 프로젝트 - jsconfig 파일이 필요하다. JS 프로젝트는 jsconfig 파일을 통해 구성된다. jsconfig 파일이 위치한 경로가 root 디렉토리임을 명시하는 셈이고, jsconfig 내의 설정을 통해 추가적으로 포함시킬 파일, 제외시킬 파일, 컴파일러 옵션 등 세부적인 설정을 할 수 있다.

만약, jsconfig 파일을 생성하지 않았다면 VSCode에서는 디폴트로 node_modules 폴더를 제외한다.

또한 프로젝트 사이즈가 너무 커지면 VSCode가 jsconfig의 exclude 속성을 수정하라는 알림을 준다고 한다.

 

jsconfig 파일의 위치는 어디인가?

프로젝트의 root 디렉토리로 지정할 곳에 포함시키면 된다.

website
├── client    # root
│   ├── client.js
│   └── jsconfig.json
└── ...

좀 더 복잡한 프로젝트인 경우, 다수의 jsconfig 파일이 필요할 수도 있다.

client와 server로 나뉘어진 JS 프로젝트인 경우, 다음과 같이 각각 jsconfig 파일이 추가된다.

website
├── client    # root
│   ├── client.js
│   └── jsconfig.json
├── server    # root
│   ├── server.js
│   └── jsconfig.json
└── ...

 

그렇다면 jsconfig로 무엇을 설정할 수 있나?

exclude: 내 소스 코드의 일부가 아닌 것을 지정한다. 이들을 제외함으로써 성능이 향상된다. 예를 들어, 인텔리센스가 너무 느린 경우, 불필요한 코드를 exclude에 포함함으로써 문제를 개선할 수 있다. (이 경우, VSCode가 자체적으로 이를 추천한다고 한다) 주로 node_modules 경로를 포함한다.

include: 임의로 프로젝트에 포함할 파일을 지정할 수 있다. jsconfig에 이 속성을 포함하지 않는다면, 디폴트 값으로 경로 내의 모든 파일을 포함한다.

compilerOptions: 여기에는 아래와 같은 옵션들이 있다. compilerOption이라 오해할 수도 있지만, javascript language support이다. 원래는 TS가 컴파일될 때 사용되는 옵션이지만, JS는 컴파일되지 않는다. jsconfig가 tsconfig의 상속 형태라서 이름을 가져온 것뿐이라고 한다.

• noLib: 디폴트 라이브러리 파일(lib.d.ts)를 포함하지 않는다. 이 옵션을 활성화한다는 것은 Array, Boolean, Function, IArguments, Number, Object, RegExp, String과 같은 타입을 직접 새로 정의하여 사용하겠다는 뜻이다.😲
• target: 어떤 티폴트 라이브러리(lib.d.ts)를 포함할지 명시한다. "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext” 중에 선택할 수 있다.
• module: 어떤 모듈 시스템을 사용할지 명시한다. "amd", "commonJS", "es2015", "es6", "esnext", "none", "system", "umd” 중에 선택할 수 있다.
• checkJs: JS 파일의 type checking을 활성화한다. 모든 JS 파일에 각각 @ts-check를 포함시킨 것과 같다.
• allowSyntheticDefaultImports: 모듈이 명시적으로 default export를 지정하지 않았을 때, default import가 가능하도록 한다. 타입체킹에만 영향을 준다.

import * as React from "react";   // 여기에서
import React from "react";        // 이걸 가능하게 한다.

/* 출처: 타입스크립트 공식문서 */

• baseUrl: 모듈을 참조하는 과정을 훨씬 간단하게 만들어준다.

// baseUrl
// ├── ex.ts
// ├── hello
// │   └── world.ts
// └── tsconfig.json

// 예를들어 이 프로젝트에서  “baseUrl”: “./” 를 사용하면 JS는 jsconfig와 같은 경로에 위치한 모듈을 찾는다.

import { helloWorld } from "hello/world";

console.log(helloWorld);

//모듈을 import하는 과정에서 경로에 ../이나 ./가 포함되는 것이 불편했는데 훨씬 편리하게 사용할 수 있겠다!

/* 출처: 타입스크립트 공식문서 */

• paths: baseUrl을 상대적으로하여 custom prefix를 작성하여 코드에서 모듈참조를 간편하게 할 수 있다.

{
  "compilerOptions": {
    "baseUrl": ".", // 이 옵션은 반드시 "paths"가 명확할 때 지정해야 합니다.
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // 이 매핑은 "baseUrl"에 상대적입니다.
    }
  }
}

// 이렇게하면 import "jquery"를 작성하여 jquery 모듈을 사용할 수 있다.

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
        "app/*": ["app/*"],
        "config/*": ["app/_config/*"],
        "environment/*": ["environments/*"],
        "shared/*": ["app/_shared/*"],
        "helpers/*": ["helpers/*"],
        "tests/*": ["tests/*"]
    },
}

/* 출처: 타입스크립트 공식문서 */

 

• moduleResolution: 모듈 해결 전략을 지정한다고 한다. “node”, “classic” 중에 선택할 수 있다.
• experimentalDecorators

 

 

Reference

TypeScript 공식문서(https://www.typescriptlang.org/ko/tsconfig#compilerOptions)

VSCode 공식문서(https://code.visualstudio.com/docs/languages/jsconfig)