๐Ÿ“œ jsconfig.json

kcj_dev96ยท2022๋…„ 3์›” 28์ผ
0

Learn Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
9/12

jsconfig.json์„ ์—ฌ๊ธฐ์ €๊ธฐ์„œ ๋”ฐ๋ผ์“ฐ๊ธด ํ•˜์˜€๋Š”๋ฐ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š” file์ธ์ง€ ์งš๊ณ  ๋„˜์–ด๊ฐ€๊ณ  ์‹ถ์–ด ์•Œ์•„๋ณด๋ ค ํ•œ๋‹ค.

Why do I need a jsconfig.json file?

jsconfig.json ํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๊ฐ€ ๋ญ˜๊นŒ?
ํ”„๋กœ์ ํŠธ ๋””๋ ‰ํ„ฐ๋ฆฌ ๋ฃจํŠธ์— jsconfig.json์„ ์ƒ์„ฑํ•จ์œผ๋กœ์จ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๊ฐ€ js ๊ด€๋ จ ํ”„๋กœ์ ํŠธ๋ผ๋Š” ๊ฒƒ์„ ์•Œ๋ ค์ค„ ์ˆ˜ ์žˆ๋‹ค.

๋งŒ์•ฝ jsconfig.json ํŒŒ์ผ์ด ์—†๋‹ค๋ฉด ์„œ๋กœ ๋‹ค๋ฅธ ๊ฐ๊ฐ์˜ ํŒŒ์ผ์€ ๊ฐ™์€ ํ”„๋กœ์ ํŠธ(project context)๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์žˆ์ง€ ์•Š๋Š”๋‹ค.

๋”ฐ๋ผ์„œ ํ•ด๋‹น ํŒŒ์ผ์„ ์ฒ˜๋ฆฌํ•˜๊ณ  ํ•ด์„ํ•˜๋Š”๋ฐ ๊ฒฝ์šฐ์— ๋”ฐ๋ผ์„œ ์ฐจ์ด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค.

๋˜ํ•œ ํ”„๋กœ์ ํŠธ์— ํฌํ•จํ•  ํŒŒ์ผ, ์ œ์™ธํ•  ํŒŒ์ผ, ์ปดํŒŒ์ผ ์˜ต์…˜๋„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

Location of jsconfig.json

jsconfig.json์˜ ์œ„์น˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ”„๋กœ์ ํŠธ root ์œ„์น˜์— ์žˆ์–ด์•ผํ•œ๋‹ค.

์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ๋กœ ๊ตฌ์„ฑํ•ด์•ผํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋ผ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด๋„ ๊ตฌ์„ฑํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์ง€์ •ํ•˜์˜€์„ ๋•Œ ๊ฐ๊ฐ์˜ config์˜ต์…˜์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค.

exclude

exclude ์˜ต์…˜์€ ํ”„๋กœ์ ํŠธ๋‚ด์—์„œ ์ œ์™ธํ•  ํŒŒ์ผ๋ช…์„ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด๋‹ค.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ๊ฐ€ ํฌ๋‹ค๋ฉด ์„ฑ๋Šฅ(intellisense)์ด ๋‚ฎ์•„์งˆ ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด ๋•Œ ๋‚ด๊ฐ€ ์‹ค์งˆ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ํŒŒ์ผ๋“ค์„ ์ œ์™ธํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

include

๋ฐ˜๋Œ€๋กœ include์˜ต์…˜์€ ํฌํ•จํ•  ํŒŒ์ผ๋“ค์„ ๋ช…์‹œํ•ด์ค€๋‹ค.
default๊ฐ’์œผ๋กœ ๋ชจ๋“  ํŒŒ์ผ์„ ํฌํ•จํ•˜๋„๋ก ์„ค์ •๋˜์–ด์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ์•„๋ž˜์ฒ˜๋Ÿผ ๋ช…์‹œํ•ด์ค€๋‹ค๋ฉด ํ”„๋กœ์ ํŠธ์— ํ•ด๋‹น ํŒŒ์ผ๋งŒ ํฌํ•จํ•˜๋„๋ก ์„ค์ •์ด ๋œ๋‹ค.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

compilerOptions

์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ปดํŒŒ์ผ ์˜ต์…˜์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด๋‹ค.

์ฃผ์š”์˜ต์…˜๋“ค์„ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
     "baseUrl":".",
    "paths":{
    "@app/*": ["app/*"]
    }
  }
}
  • target | ์‚ฌ์šฉํ•  javascript ๋ฌธ๋ฒ• ๋ฒ„์ „์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค.
    ์„ ํƒ ์˜ต์…˜์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
    "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext"

  • module | module system์„ ๋ช…์‹œํ•ด์ค€๋‹ค.
    ์„ ํƒ ์˜ต์…˜์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
    amd", "commonJS", "es2015", "es6", "esnext", "none", "system", "umd"

์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์ด es6๋‚˜ commonJS์ผํ…๋ฐ commonJS๋Š” ๋…ธ๋“œ์—์„œ ์‚ฌ์šฉ๋  ๋•Œ ์ง€์ •๋˜๋Š” ์˜ต์…˜์ด๋‹ค.

  • baseURL | ํ”„๋กœ์ ํŠธ์˜ ๋ฒ ์ด์Šค ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.
    ๊ฒฝ๋กœ๊ฐ€ ๋ณต์žกํ•œ ๊ฒฝ์šฐ, ํŠน์ • ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•˜์—ฌ ํŽธ๋ฆฌํ•˜๊ฒŒ ์ƒ๋Œ€๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ๊ฒ ๋‹ค

  • paths | baseURL์„ ๊ธฐ์ค€์œผ๋กœ, ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ ๊ธฐ์ค€์ ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด๋‹ค.

์ดํ•ด๊ฐ€ ์ž˜ ์•ˆ๋˜๋‹ˆ ๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด์ž.

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"], // @๋Š” ์•ˆ ๋ถ™์—ฌ์ค˜๋„ ๋จ.
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

๊ธฐ๋ณธ ๊ฒฝ๋กœ๋ฅผ src ํด๋”๋กœ ์„ค์ •์„ ํ•œ ๋’ค์— paths์— ๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•ด์ค€๋‹ค.

๋‹ค์Œ์œผ๋กœ appํด๋”์— ์žˆ๋Š” ํŒŒ์ผ๋“ค์„ ๋ถˆ๋Ÿฌ์˜ค๋ ค ํ• ๋•Œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด @app/index๋กœ ๋ถˆ๋Ÿฌ์˜ค๋ฉด ๋œ๋‹ค.

import { Example } from '@app/index';

ํด๋” ๊ตฌ์กฐ๊ฐ€ ๋ณต์žกํ•˜์ง€ ์•Š๋‹ค๋ฉด ๊ตณ์ด ์„ค์ •ํ•ด์ค„ ํ•„์š”๊ฐ€ ์—†์ง€๋งŒ ํด๋” ๊ตฌ์กฐ๊ฐ€ ๋ณต์žกํ•˜๋‹ค๋ฉด ๊ตณ์ด ์„ค์ •ํ•ด์ค„ ํ•„์š”๊ฐ€ ์—†์„ ๊ฒƒ ๊ฐ™๋‹ค.

๋˜ํ•œ Autoimport( vscode ์ž๋™ import extension)๊ฐ€ ์„ค์น˜๋˜์–ด์žˆ๋‹ค๋ฉด ์•Œ์•„์„œ importํ•ด์ค„ํ…Œ๋‹ˆ ๊ตณ์ด ์‚ฌ์šฉํ•ด์ค„ ํ•„์š”๋Š” ์—†๊ฒ ์ง€๋งŒ ๋ณต์žกํ•˜๋‹ค๋ฉด ์œ ์ง€๋ณด์ˆ˜์ธก๋ฉด์—์„œ ์„ค์ •ํ•ด์ฃผ๋Š” ๊ฒƒ๋„ ๋‚˜์˜์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™๋‹ค.

์ฃผ์˜
paths ์˜ต์…˜์„ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด์„  baseURL ์˜ต์…˜์ด ๋ช…์‹œ๋˜์žˆ์–ด์•ผํ•œ๋‹ค.

์ •๋ฆฌ

๋‚ด๊ฐ€ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ jsconfig.json์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ž˜ ์—†์—ˆ๋Š”๋ฐ, ์ด์— ๋Œ€ํ•ด ํ•œ๋ฒˆ ์•Œ์•„๋ณด๋‹ˆ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ณต์žกํ•˜๊ฑฐ๋‚˜ ์ด์— ๊ด€ํ•œ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค๋ฉด jsconfig.jsonํŒŒ์ผ์„ ์„ค์ •ํ•ด์ฃผ๋„๋ก ํ•ด์•ผ๊ฒ ๋‹ค.

-์ด์ƒ-

Reference

https://code.visualstudio.com/docs/languages/jsconfig

profile
๊ฐœ๋ฐœ์ž์—ฌ์„œ ํ–‰๋ณตํ•œ Jev ๐Ÿ˜™ FE DEVELOPER JEV

0๊ฐœ์˜ ๋Œ“๊ธ€