Module Resolution

์ด๋ฒˆ ์„น์…˜์€ ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ๊ธฐ์ดˆ์ ์ธ ์ง€์‹์„ ์ „์ œ๋กœ ํ•ฉ๋‹ˆ๋‹ค. ๋” ๋งŽ์€ ์ •๋ณด๋Š” ๋ชจ๋“ˆ์„ ๋ณด๋„๋ก ํ•˜์„ธ์š”.

๋ชจ๋“ˆ ํ•ด์„ (module resolution) ์€ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ import๊ฐ€ ๋ฌด์—‡์„ ์ฐธ์กฐํ•˜๋Š”์ง€ ์•Œ์•„๋‚ด๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์„ธ์Šค์ž…๋‹ˆ๋‹ค. import { a } from "moduleA"๊ฐ™์€ import ๋ฌธ์„ ์ƒ๊ฐํ•ด๋ณด์„ธ์š”; a์˜ ๋ชจ๋“  ์‚ฌ์šฉ์„ ๊ฒ€์‚ฌํ•˜๊ธฐ ์œ„ํ•ด, ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋ฌด์—‡์„ ์ฐธ์กฐํ•˜๋Š”์ง€ ์ •ํ™•ํžˆ ์•Œ์•„์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค, ๊ทธ๋ฆฌ๊ณ  moduleA ์ •์˜๋ฅผ ๊ฒ€์‚ฌํ•ด์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ์‹œ์ ์—, ์ปดํŒŒ์ผ๋Ÿฌ๋Š” โ€moduleA์˜ ํ˜•ํƒœ๊ฐ€ ๋ญ˜๊นŒ?โ€๋ผ๊ณ  ์งˆ๋ฌธํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•ด ๋ณด์ด์ง€๋งŒ, moduleA๋Š” .ts/.tsx ํŒŒ์ผ์— ์ •์˜๋˜์–ด ์žˆ๊ฑฐ๋‚˜ ํ˜น์€ ์ฝ”๋“œ๊ฐ€ ์˜์กดํ•˜๋Š” .d.ts์— ์ •์˜๋˜์–ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฒซ ๋ฒˆ์งธ๋กœ, ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๊ฐ€์ ธ์˜จ ๋ชจ๋“ˆ์„ ๋‚˜ํƒ€๋‚ด๋Š” ํŒŒ์ผ์˜ ์œ„์น˜๋ฅผ ์ฐพ์œผ๋ ค๊ณ  ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋‘ ๊ฐ€์ง€ ๋‹ค๋ฅธ ์ „๋žต ์ค‘ ํ•˜๋‚˜๋ฅผ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค: ํด๋ž˜์‹ ํ˜น์€ ๋…ธ๋“œ. ์ด ์ „๋žต๋“ค์€ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ moduleA๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ์–ด๋””๋ฅผ ๋ด์•ผ ํ• ์ง€ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

๋งŒ์•ฝ ์ด ๋ฐฉ๋ฒ•์ด ์ž˜ ์•ˆ๋˜๊ณ  ๋ชจ๋“ˆ ์ด๋ฆ„์ด ๋น„-์ƒ๋Œ€์ ์ด๋ผ๋ฉด ("moduleA์˜ ๊ฒฝ์šฐ๊ฐ€ ๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค), ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ambient ๋ชจ๋“ˆ ์„ ์–ธ์„ ์ฐพ์œผ๋ ค๊ณ  ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋น„-์ƒ๋Œ€์  import๋Š” ๋‹ค์Œ์— ๋‹ค๋ฃฐ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋งˆ์ง€๋ง‰์œผ๋กœ, ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ๋ชจ๋“ˆ์„ ํ•ด์„ํ•  ์ˆ˜ ์—†๋‹ค๋ฉด, ์˜ค๋ฅ˜ ๋กœ๊ทธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ์—, ์˜ค๋ฅ˜๋Š” error TS2307: Cannot find module 'moduleA'์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ƒ๋Œ€์  vs. ๋น„-์ƒ๋Œ€์  ๋ชจ๋“ˆ import (Relative vs. Non-relative module imports)

๋ชจ๋“ˆ ์ฐธ์กฐ๊ฐ€ ์ƒ๋Œ€์  ํ˜น์€ ๋น„-์ƒ๋Œ€์ ์ด๋ƒ์— ๋”ฐ๋ผ ๋ชจ๋“ˆ import๋Š” ๋‹ค๋ฅด๊ฒŒ ํ•ด์„๋ฉ๋‹ˆ๋‹ค.

์ƒ๋Œ€์  import ๋Š” /, ./ ํ˜น์€ ../. ์ค‘์— ํ•˜๋‚˜๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ์˜ˆ์ œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  • import Entry from "./components/Entry";
  • import { DefaultHeaders } from "../constants/http";
  • import "/mod";

๋‹ค๋ฅธ ๋ชจ๋“  import๋Š” ๋น„-์ƒ๋Œ€์  ์œผ๋กœ ๊ฐ„์ฃผ๋ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ์˜ˆ์ œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  • import * as $ from "jquery";
  • import { Component } from "@angular/core";

์ƒ๋Œ€์  import๋Š” ๊ฐ€์ ธ์˜จ ํŒŒ์ผ์— ์ƒ๋Œ€์ ์œผ๋กœ ํ•ด์„๋˜๊ณ  ambient ๋ชจ๋“ˆ ์„ ์–ธ์œผ๋กœ ํ•ด์„ ๋  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ž์‹ ์˜ ๋ชจ๋“ˆ์— ๋Œ€ํ•ด์„œ๋Š” ๋Ÿฐํƒ€์ž„์— ์ƒ๋Œ€์  ์œ„์น˜๋ฅผ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋ณด์žฅํ•˜๋Š” ์ƒ๋Œ€์  import๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋น„-์ƒ๋Œ€์  import๋Š” baseUrl๋กœ ํ•ด์„๋˜๊ฑฐ๋‚˜, ๋ฐ‘์—์„œ ๋‹ค๋ฃจ๊ฒŒ ๋  ๊ฒฝ๋กœ ๋งคํ•‘์œผ๋กœ ํ•ด์„๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ambient ๋ชจ๋“ˆ ์„ ์–ธ์œผ๋กœ๋„ ํ•ด์„๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์™ธ๋ถ€ ์˜์กด์„ฑ์„ import ํ•  ๋•Œ, ๋น„-์ƒ๋Œ€์  ๊ฒฝ๋กœ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

๋ชจ๋“ˆ ํ•ด์„ ์ „๋žต (Module Resolution Strategies)

๋‘ ๊ฐ€์ง€ ๊ฐ€๋Šฅํ•œ ๋ชจ๋“ˆ ํ•ด์„ ์ „๋žต์ด ์žˆ์Šต๋‹ˆ๋‹ค: ๋…ธ๋“œ์™€ ํด๋ž˜์‹. --moduleResolution ํ”Œ๋ž˜๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“ˆ ํ•ด์„ ์ „๋žต์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€์ •๋˜์ง€ ์•Š์•˜์œผ๋ฉด, ๋””ํดํŠธ๋Š” --module AMD | System | ES2015์—์„œ๋Š” [ํด๋ž˜์‹][#ํด๋ž˜์‹-classic]์ด๊ณ  ๋‚˜๋จธ์ง€๋Š” ๋…ธ๋“œ์ž…๋‹ˆ๋‹ค.

ํด๋ž˜์‹ (Classic)

TypeScript์˜ ๋””ํดํŠธ ํ•ด์„ ์ „๋žต์œผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์š”์ฆ˜์—, ์ด ์ „๋žต์€ ์ฃผ๋กœ ์ด์ „ ๋ฒ„์ „๊ณผ์˜ ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

์ƒ๋Œ€์  import๋Š” importํ•˜๋Š” ํŒŒ์ผ์— ์ƒ๋Œ€์ ์œผ๋กœ ํ•ด์„๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์†Œ์Šค ํŒŒ์ผ /root/src/folder/A.ts์•ˆ์— import { b } from โ€œ./moduleBโ€`๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์กฐํšŒํ•ฉ๋‹ˆ๋‹ค:

  1. /root/src/folder/moduleB.ts
  2. /root/src/folder/moduleB.d.ts

๊ทธ๋Ÿฌ๋‚˜, ๋น„-์ƒ๋Œ€์  ๋ชจ๋“ˆ import์—์„œ๋Š”, ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ๊ฐ€์ ธ์˜จ ํŒŒ์ผ์„ ๊ฐ–๊ณ  ์žˆ๋Š” ๋””๋ ‰ํ„ฐ๋ฆฌ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ ๋””๋ ‰ํ„ฐ๋ฆฌ ํŠธ๋ฆฌ๋ฅผ ๊ฑฐ์Šฌ๋Ÿฌ ์˜ฌ๋ผ๊ฐ€ ๋งž๋Š” ์ •์˜ ํŒŒ์ผ์˜ ์œ„์น˜๋ฅผ ์ฐพ์œผ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด:

์†Œ์Šค ํŒŒ์ผ /root/src/folder/A.ts์•ˆ์— import { b } from "moduleB"์ฒ˜๋Ÿผ moduleB์˜ ๋น„-์ƒ๋Œ€์  import์€ "moduleB"์˜ ์œ„์น˜๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์œ„์น˜๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.

  1. /root/src/folder/moduleB.ts
  2. /root/src/folder/moduleB.d.ts
  3. /root/src/moduleB.ts
  4. /root/src/moduleB.d.ts
  5. /root/moduleB.ts
  6. /root/moduleB.d.ts
  7. /moduleB.ts
  8. /moduleB.d.ts

๋…ธ๋“œ (Node)

์ด ํ•ด์„ ์ „๋žต์€ ๋Ÿฐํƒ€์ž„์— Node.js์˜ ๋ชจ๋“ˆ ํ•ด์„ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ๋ชจ๋ฐฉํ•˜๋ ค๊ณ  ์‹œ๋„ํ•ฉ๋‹ˆ๋‹ค. ์ „์ฒด Node.js ํ•ด์„ ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ Node.js ๋ชจ๋“ˆ ๋ฌธ์„œ์— ์š”์•ฝ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

Node.js๊ฐ€ ๋ชจ๋“ˆ์„ ํ•ด์„ํ•˜๋Š” ๋ฐฉ๋ฒ• (How Node.js resolves modules)

TS ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์–ด๋–ค ๊ณผ์ •์„ ๋”ฐ๋ฅผ์ง€ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š”, Node.js ๋ชจ๋“ˆ์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ „ํ†ต์ ์œผ๋กœ, Node.js์˜ import๋Š” require ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. Node.js์˜ ๋™์ž‘์€ require์— ์ƒ๋Œ€์  ๊ฒฝ๋กœ ํ˜น์€ ๋น„-์ƒ๋Œ€์  ๊ฒฝ๋กœ๊ฐ€ ์ฃผ์–ด์ง€๋Š”์ง€์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

์ƒ๋Œ€์  ๊ฒฝ๋กœ๋Š” ์•„์ฃผ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, var x = require("./moduleB");๋ผ๋Š” import ๋ฌธ์„ ํฌํ•จํ•œ /root/src/moduleA.js์— ์œ„์น˜ํ•œ ํŒŒ์ผ์„ ์ƒ๊ฐํ•ด๋ด…์‹œ๋‹ค. Node.js๋Š” ๋‹ค์Œ ์ˆœ์„œ๋กœ import๋ฅผ ํ•ด์„ํ•ฉ๋‹ˆ๋‹ค:

  1. /root/src/moduleB.js๋ผ๋Š” ํŒŒ์ผ์ด ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธ.

  2. ๋งŒ์•ฝ "main" ๋ชจ๋“ˆ์„ ์ง€์ •ํ•˜๋Š” package.json๋ผ๋Š” ํŒŒ์ผ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์œผ๋ฉด, /root/src/moduleB ํด๋” ํ™•์ธํ•˜๊ธฐ.

์ด ์˜ˆ์ œ์—์„œ๋Š”, ๋งŒ์•ฝ Node.js๊ฐ€ { "main": "lib/mainModule.js" }์„ ํฌํ•จํ•˜๋Š” /root/src/moduleB/package.jsonํŒŒ์ผ์„ ์ฐพ์•˜๋‹ค๋ฉด, Node.js๊ฐ€ /root/src/moduleB/lib/mainModule.js๋ฅผ ์ฐธ์กฐํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

  1. index.js ๋ผ๋Š” ํŒŒ์ผ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์œผ๋ฉด, /root/src/moduleB ํ™•์ธํ•˜๊ธฐ. ์ด ํŒŒ์ผ์€ ํด๋”์˜ โ€œmainโ€ ๋ชจ๋“ˆ์ž„์„ ์•”์‹œ์ ์œผ๋กœ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์ž์„ธํ•œ ๋‚ด์šฉ์€ Node.js ๋ฌธ์„œ ํŒŒ์ผ ๋ชจ๋“ˆ๊ณผ ํด๋” ๋ชจ๋“ˆ์—์„œ ๋” ์ฝ์–ด๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜, ๋น„-์ƒ๋Œ€์  ๋ชจ๋“ˆ ์ด๋ฆ„์— ๋Œ€ํ•œ ํ•ด์„์€ ๋‹ค๋ฅด๊ฒŒ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. Node๋Š” node_modules๋กœ ๋ถˆ๋ฆฌ๋Š” ํŠน๋ณ„ํ•œ ํด๋”์—์„œ ๋ชจ๋“ˆ์„ ์ฐพ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. node_modules ํด๋”๋Š” ํ˜„์žฌ ํŒŒ์ผ๊ณผ ๋™์ผํ•œ ๋ ˆ๋ฒจ์ด๊ฑฐ๋‚˜, ๋””๋ ‰ํ„ฐ๋ฆฌ ์ฒด์ธ์—์„œ ๋” ๋†’์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. Node๋Š” ๋””๋ ‰ํ„ฐ๋ฆฌ ์ฒด์ธ์„ ์˜ฌ๋ผ๊ฐ€, ๋กœ๋“œํ•˜๋ ค๋Š” ๋ชจ๋“ˆ์„ ์ฐพ์„ ๋•Œ๊นŒ์ง€ ๊ฐ node_modules์„ ์ฐพ์Šต๋‹ˆ๋‹ค.

์œ„์˜ ์˜ˆ์ œ๋ฅผ ๋”ฐ๋ผ์„œ, /root/src/moduleA.js๊ฐ€ ๋Œ€์‹  ๋น„-์ƒ๋Œ€์  ๊ฒฝ๋กœ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  var x = require("moduleB"); import๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ด…์‹œ๋‹ค. Node๋Š” ํ•˜๋‚˜๊ฐ€ ์ผ์น˜ํ•  ๋•Œ๊นŒ์ง€ ๊ฐ ์œ„์น˜์—์„œ moduleB๋ฅผ ํ•ด์„ํ•˜๋ ค๊ณ  ์‹œ๋„ํ•ฉ๋‹ˆ๋‹ค.

  1. /root/src/node_modules/moduleB.js
  2. /root/src/node_modules/moduleB/package.json ("main" ํ•ญ๋ชฉ์„ ์ง€์ •ํ–ˆ๋‹ค๋ฉด)
  3. /root/src/node_modules/moduleB/index.js

  4. /root/node_modules/moduleB.js
  5. /root/node_modules/moduleB/package.json ("main" ํ•ญ๋ชฉ์„ ์ง€์ •ํ–ˆ๋‹ค๋ฉด)
  6. /root/node_modules/moduleB/index.js

  7. /node_modules/moduleB.js
  8. /node_modules/moduleB/package.json ("main" ํ•ญ๋ชฉ์„ ์ง€์ •ํ–ˆ๋‹ค๋ฉด)
  9. /node_modules/moduleB/index.js

Node.js๊ฐ€ (4) ์™€ (7)์—์„œ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ์ ํ”„ํ–ˆ๋‹ค๋Š” ๊ฒƒ์— ์ฃผ๋ชฉํ•˜์„ธ์š”.

ํ”„๋กœ์„ธ์Šค์— ๋Œ€ํ•œ ๋” ๋งŽ์€ ์ •๋ณด๋Š” Node.js ๋ฌธ์„œ node_modules์—์„œ ๋ชจ๋“ˆ ๋กœ๋“œํ•˜๊ธฐ์—์„œ ์ฝ์–ด๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

TypeScript๊ฐ€ ๋ชจ๋“ˆ์„ ํ•ด์„ํ•˜๋Š” ๋ฐฉ๋ฒ• (How TypeScript resolves modules)

TypeScript๋Š” ์ปดํŒŒ์ผ-ํƒ€์ž„์— ๋ชจ๋“ˆ์˜ ์ •์˜ ํŒŒ์ผ ์œ„์น˜๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด Node.js์˜ ๋Ÿฐํƒ€์ž„ ํ•ด์„ ์ „๋žต์„ ๋ชจ๋ฐฉํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ๋‹ฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด, TypeScript๋Š” TypeScript ์†Œ์Šค ํŒŒ์ผ ํ™•์žฅ์ž (.ts, .tsx ์™€ .d.ts)๋ฅผ Node์˜ ํ•ด์„ ๋กœ์ง ์œ„์— ์”Œ์›๋‹ˆ๋‹ค. TypeScript๋Š” "main"์˜ ๋ชฉ์  - ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฐธ์กฐํ•  โ€œmainโ€ ์ •์˜ ํŒŒ์ผ์„ ์ฐพ์Œ. ์„ ๋ฐ˜์˜ํ•˜๊ธฐ ์œ„ํ•ด "types"๋ผ๋Š” package.json์•ˆ์— ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค

์˜ˆ๋ฅผ ๋“ค์–ด, /root/src/moduleA.ts์•ˆ์— import { b } from "./moduleB" ๊ฐ™์€ import ๋ฌธ์€ "./moduleB"์˜ ์œ„์น˜๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์œ„์น˜๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.

  1. /root/src/moduleB.ts
  2. /root/src/moduleB.tsx
  3. /root/src/moduleB.d.ts
  4. /root/src/moduleB/package.json ("types" ํ•ญ๋ชฉ์„ ์ง€์ •ํ–ˆ๋‹ค๋ฉด)
  5. /root/src/moduleB/index.ts
  6. /root/src/moduleB/index.tsx
  7. /root/src/moduleB/index.d.ts

Node.js๊ฐ€ moduleB.js ํŒŒ์ผ์„ ์ฐพ๊ณ  ๋‚˜์„œ, ํ•ด๋‹นํ•˜๋Š” package.json์„ ์ฐพ๊ณ , index.js๋ฅผ ์ฐพ์•˜๋‹ค๋Š” ๊ฒƒ์„ ์ƒ๊ธฐํ•ด๋ด…์‹œ๋‹ค.

๋น„์Šทํ•˜๊ฒŒ, ๋น„-์ƒ๋Œ€์  import๋Š” Node.js ํ•ด์„ ๋กœ์ง์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค, ์ฒซ ๋ฒˆ์งธ๋กœ ํŒŒ์ผ์„ ์ฐพ๊ณ , ๊ทธ๋Ÿฌ๊ณ  ๋‚˜์„œ ํ•ด๋‹นํ•˜๋Š” ํด๋”๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ /root/src/moduleA.ts ์†Œ์Šค ํŒŒ์ผ ์•ˆ์— import { b } from "moduleB"๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์กฐํšŒ๋ฅผ ํ•ฉ๋‹ˆ๋‹ค.

  1. /root/src/node_modules/moduleB.ts
  2. /root/src/node_modules/moduleB.tsx
  3. /root/src/node_modules/moduleB.d.ts
  4. /root/src/node_modules/moduleB/package.json ("types" ํ”„๋กœํผํ‹ฐ๋ฅผ ์ง€์ •ํ–ˆ๋‹ค๋ฉด)
  5. /root/src/node_modules/@types/moduleB.d.ts
  6. /root/src/node_modules/moduleB/index.ts
  7. /root/src/node_modules/moduleB/index.tsx
  8. /root/src/node_modules/moduleB/index.d.ts

  9. /root/node_modules/moduleB.ts
  10. /root/node_modules/moduleB.tsx
  11. /root/node_modules/moduleB.d.ts
  12. /root/node_modules/moduleB/package.json ("types" ํ•ญ๋ชฉ์„ ์ง€์ •ํ–ˆ๋‹ค๋ฉด)
  13. /root/node_modules/@types/moduleB.d.ts
  14. /root/node_modules/moduleB/index.ts
  15. /root/node_modules/moduleB/index.tsx
  16. /root/node_modules/moduleB/index.d.ts

  17. /node_modules/moduleB.ts
  18. /node_modules/moduleB.tsx
  19. /node_modules/moduleB.d.ts
  20. /node_modules/moduleB/package.json ("types" ํ•ญ๋ชฉ์„ ์ง€์ •ํ–ˆ๋‹ค๋ฉด)
  21. /node_modules/@types/moduleB.d.ts
  22. /node_modules/moduleB/index.ts
  23. /node_modules/moduleB/index.tsx
  24. /node_modules/moduleB/index.d.ts

์Šคํ… ์ˆ˜ ๋•Œ๋ฌธ์— ๋‘๋ ค์›Œํ•˜์ง€ ๋งˆ์„ธ์š” - TypeScript๊ฐ€ ์—ฌ์ „ํžˆ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ (9)์™€ (17)์—์„œ ๋‘ ๋ฒˆ ์ ํ”„ํ•ฉ๋‹ˆ๋‹ค.

Node.js๊ฐ€ ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋” ๋ณต์žกํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ถ”๊ฐ€ ๋ชจ๋“ˆ ํ•ด์„ ํ”Œ๋ž˜๊ทธ (Additional module resolution flags)

ํ”„๋กœ์ ํŠธ ์†Œ์Šค ๋ ˆ์ด์•„์›ƒ์ด ์ถœ๋ ฅ๊ณผ ์ผ์น˜ํ•˜์ง€ ์•Š์„ ๋•Œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ผ๋ จ์˜ ๋นŒ๋“œ ์Šคํ…์ด ์ƒ์„ฑ๋œ ์ตœ์ข… ์ถœ๋ ฅ์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค. .tsํŒŒ์ผ์„ .js๋กœ ์ปดํŒŒ์ผํ•˜๊ณ , ๋‹ค๋ฅธ ์†Œ์Šค ์œ„์น˜์—์„œ ํ•˜๋‚˜์˜ ์ถœ๋ ฅ ์œ„์น˜๋กœ ์˜์กด์„ฑ์„ ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. ์ตœ์ข… ๊ฒฐ๊ณผ๋Š” ๋Ÿฐํƒ€์ž„์˜ ๋ชจ๋“ˆ์ด ํ•ด๋‹น ์ •์˜๋ฅผ ํฌํ•จํ•˜๋Š” ์†Œ์Šค ํŒŒ์ผ๊ณผ ๋‹ค๋ฅธ ์ด๋ฆ„์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ํ˜น์€ ์ตœ์ข… ์ถœ๋ ฅ์˜ ๋ชจ๋“ˆ ๊ฒฝ๋กœ๊ฐ€ ์ปดํŒŒ์ผ ํƒ€์ž„์— ํ•ด๋‹นํ•˜๋Š” ์†Œ์Šค ํŒŒ์ผ ๊ฒฝ๋กœ์™€ ์ผ์น˜ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

TypeScript ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์ถ”๊ฐ€ ํ”Œ๋ž˜๊ทธ๋ฅผ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. The TypeScript compiler has a set of additional flags to inform the compiler of transformations that are expected to happen to the sources to generate the final output. TypeScript ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์ตœ์ข… ์ถœ๋ ฅ์„ ์ƒ์„ฑํ•˜๊ธฐ์œ„ํ•ด ์†Œ์Šค์— ๋ฐœ์ƒํ•  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋˜๋Š” ๋ณ€ํ™˜์„ ์ปดํŒŒ์ผ๋Ÿฌ์—๊ฒŒ ์•Œ๋ฆฌ๊ธฐ ์œ„ํ•œ ์ถ”๊ฐ€ ํ”Œ๋ž˜๊ทธ ์„ธํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์ด๋Ÿฌํ•œ ๋ณ€ํ™˜๋„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋Š” ๋‹ค๋Š” ๊ฒƒ์— ์œ ์˜ํ•˜์‹ญ์‹œ์˜ค; ์ •์˜ ํŒŒ์ผ๋กœ ๋ชจ๋“ˆ import๋ฅผ ํ•ด์„ํ•˜๋Š” ๊ณผ์ •์„ ์•ˆ๋‚ดํ•˜๊ธฐ ์œ„ํ•ด ์ด๋Ÿฌํ•œ ์ •๋ณด๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ณธ URL (Base URL)

baseUrl์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๋ชจ๋“ˆ๋“ค์ด ๋Ÿฐํƒ€์ž„์— ๋‹จ์ผ ํด๋”๋กœ โ€œ๋ฐฐํฌโ€๋˜๋Š” AMD ๋ชจ๋“ˆ ๋กœ๋”๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ด ๋ชจ๋“ˆ๋“ค์˜ ์†Œ์Šค๋Š” ๋‹ค๋ฅธ ๋””๋ ‰ํ„ฐ๋ฆฌ ์•ˆ์— ์žˆ์„ ์ˆ˜ ์žˆ์ง€๋งŒ, ๋นŒ๋“œ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ชจ๋‘ ํ•˜๋‚˜๋กœ ๋งŒ๋“ค ๊ฒƒ์ž…๋‹ˆ๋‹ค.

baseUrl์„ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์€ ์ปดํŒŒ์ผ๋Ÿฌ์—๊ฒŒ ์–ด๋””์—์„œ ๋ชจ๋“ˆ์„ ์ฐพ์„์ง€ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  ๋น„-์ƒ๋Œ€์  ์ด๋ฆ„์˜ ๋ชจ๋“ˆ import๋Š” baseUrl์— ์ƒ๋Œ€์ ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

baseUrl์˜ ๊ฐ’์€ ๋‹ค์Œ ์ค‘ ํ•˜๋‚˜๋กœ ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค:

  • baseUrl ๋ช…๋ น ์ค„ ์ธ์ˆ˜ ๊ฐ’ (๋งŒ์•ฝ ์ฃผ์–ด์ง„ ๊ฒฝ๋กœ๊ฐ€ ์ƒ๋Œ€์ ์ด๋ฉด, ํ˜„์žฌ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ณ„์‚ฐ๋จ)
  • โ€˜tsconfig.jsonโ€™์•ˆ์— baseUrl ํ”„๋กœํผํ‹ฐ ๊ฐ’ (๋งŒ์•ฝ ์ฃผ์–ด์ง„ ๊ฒฝ๋กœ๊ฐ€ ์ƒ๋Œ€์ ์ด๋ฉด, โ€˜tsconfig.jsonโ€™์˜ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ณ„์‚ฐ๋จ)

์ƒ๋Œ€์  ๋ชจ๋“ˆ import๋Š” ํ•ญ์ƒ ๊ฐ€์ ธ์˜จ ํŒŒ์ผ์˜ ์ƒ๋Œ€์ ์œผ๋กœ ํ•ด์„๋˜๊ธฐ ๋•Œ๋ฌธ์—, baseUrl์„ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๋Š” ์ ์— ์œ ์˜ํ•˜์‹ญ์‹œ์˜ค.

baseUrl์— ๋Œ€ํ•œ ๋” ๋งŽ์€ ๋ฌธ์„œ๋Š” RequireJS์™€ SystemJS ๋ฌธ์„œ์—์„œ ์ฐพ์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒฝ๋กœ ๋งคํ•‘ (Path mapping)

๊ฐ€๋” ๋ชจ๋“ˆ์ด baseUrl ์•„๋ž˜์— ์œ„์น˜ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, "jquery" ๋ชจ๋“ˆ์˜ import๋Š” ๋Ÿฐํƒ€์ž„์— "node_modules/jquery/dist/jquery.slim.min.js"๋กœ ๋ฒˆ์—ญ๋ฉ๋‹ˆ๋‹ค. ๋กœ๋”๋Š” ๋Ÿฐํƒ€์ž„์— ๋ชจ๋“ˆ ์ด๋ฆ„์„ ํŒŒ์ผ์— ๋งคํ•‘ํ•˜๊ธฐ ์œ„ํ•ด ๋งคํ•‘ ๊ตฌ์„ฑ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค, RequireJs ๋ฌธ์„œ์™€ SystemJS ๋ฌธ์„œ๋ฅผ ๋ณด์„ธ์š”.

TypeScript ์ปดํŒŒ์ผ๋Ÿฌ๋Š” tsconfig.json ํŒŒ์ผ ์•ˆ์— "paths" ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•œ ๋งคํ•‘์˜ ์„ ์–ธ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. jquery๋ฅผ ์œ„ํ•œ "paths" ํ”„๋กœํผํ‹ฐ๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์˜ˆ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

json
{
"compilerOptions": {
"baseUrl": ".", // "paths"๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ๋ฐ˜๋“œ์‹œ ์ง€์ •๋˜์–ด์•ผํ•จ.
"paths": {
"jquery": ["node_modules/jquery/dist/jquery"] // ์ด ๋งคํ•‘์€ "baseUrl"์— ์ƒ๋Œ€์ ์ž„.
}
}
}

"paths"๊ฐ€ "baseUrl"์— ์ƒ๋Œ€์ ์œผ๋กœ ํ•ด์„๋œ๋‹ค๋Š” ์ ์— ์ฃผ๋ชฉํ•˜์„ธ์š”. "baseUrl"์„ "."๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ๊ฐ’, ์˜ˆ tsconfig.json์˜ ๋””๋ ‰ํ„ฐ๋ฆฌ,์œผ๋กœ ์„ค์ •ํ•˜๋ฉด, ๊ทธ์— ๋”ฐ๋ผ ๋งคํ•‘๋„ ๋ฐ”๋€๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์œ„ ์˜ˆ์ œ์—์„œ โ€œbaseUrlโ€: โ€œ./srcโ€ ๋กœ ์„ค์ •ํ•œ๋‹ค๋ฉด, jquery๋Š” โ€œ../node_modules/jquery/dist/jqueryโ€ ๋กœ ๋งคํ•‘๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

"paths"๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ด์ „ ์œ„์น˜๋ฅผ ํฌํ•จํ•œ ์ •๊ตํ•œ ๋งคํ•‘์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ๋ชจ๋“ˆ๋งŒ ํ•œ ์œ„์น˜์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ณ , ๋‚˜๋จธ์ง€๋Š” ๋‹ค๋ฅธ ๊ณณ์— ์žˆ๋Š” ํ”„๋กœ์ ํŠธ ๊ตฌ์„ฑ์„ ์ƒ๊ฐํ•ด๋ณด์„ธ์š”. ๋นŒ๋“œ ์Šคํ…์ด ํ•œ๊ณณ์œผ๋กœ ๋ชจ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ์˜ ๋ ˆ์ด์•„์›ƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณด์ž…๋‹ˆ๋‹ค:

projectRoot โ”œโ”€โ”€ folder1 โ”‚ โ”œโ”€โ”€ file1.ts (imports 'folder1/file2' and 'folder2/file3') โ”‚ โ””โ”€โ”€ file2.ts โ”œโ”€โ”€ generated โ”‚ โ”œโ”€โ”€ folder1 โ”‚ โ””โ”€โ”€ folder2 โ”‚ โ””โ”€โ”€ file3.ts โ””โ”€โ”€ tsconfig.json

tsconfig.json๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณด์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค:

json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"generated/*"
]
}
}
}

์ด๋Š” ์ปดํŒŒ์ผ๋Ÿฌ์—๊ฒŒ ๋‘ ์œ„์น˜์—์„œ ํŒจํ„ด "*" (i.e. ๋ชจ๋“  ๊ฐ’) ๊ณผ ์ผ์น˜ํ•˜๋Š” ๋ชจ๋“  ๋ชจ๋“ˆ import๋ฅผ ์•Œ๋ ค์ค๋‹ˆ๋‹ค

  1. "*": ๊ฐ™์€ ์ด๋ฆ„์€ ๋ฐ”๋€Œ์ง€ ์•Š์Œ์„ ์˜๋ฏธ, ๊ทธ๋ž˜์„œ <moduleName> => <baseUrl>/<moduleName>์œผ๋กœ ๋งคํ•‘
  2. "generated/*" ์ ‘๋‘์‚ฌ โ€œgeneratedโ€๊ฐ€ ์ถ”๊ฐ€๋œ ๋ชจ๋“ˆ ์ด๋ฆ„์„ ์˜๋ฏธ, ๊ทธ๋ž˜์„œ <moduleName> => <baseUrl>/generated/<moduleName>๋กœ ๋งคํ•‘

์ด ๋กœ์ง์„ ๋”ฐ๋ฅด๋ฉด, ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‘ ๊ฐ€์ง€ import๋ฅผ ํ•ด์„ํ•˜๋ ค๊ณ  ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค:

import โ€˜folder1/file2โ€™:

  1. ๋ชจ๋“ˆ โ€™*โ€˜์€ ์ผ์น˜ํ•˜๊ณ  ์™€์ผ๋“œ์นด๋“œ๊ฐ€ ์ „์ฒด ๋ชจ๋“ˆ ์ด๋ฆ„์„ ์บก์ฒ˜ํ•จ
  2. ๋ชฉ๋ก์—์„œ ์ฒซ ๋ฒˆ์งธ ๋Œ€์ฒด ์‹œ๋„: โ€™*โ€™ -> folder1/file2
  3. ๋Œ€์ฒด์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋น„-์ƒ๋Œ€์  ์ด๋ฆ„ - baseUrl๊ณผ ๊ฒฐํ•ฉ -> projectRoot/folder1/file2.ts
  4. ํŒŒ์ผ์ด ์กด์žฌ. ์™„๋ฃŒ.

import โ€˜folder2/file3โ€™:

  1. ๋ชจ๋“ˆ โ€™*โ€˜์€ ์ผ์น˜ํ•˜๊ณ  ์™€์ผ๋“œ์นด๋“œ๊ฐ€ ์ „์ฒด ๋ชจ๋“ˆ ์ด๋ฆ„์„ ์บก์ฒ˜ํ•จ
  2. ๋ชฉ๋ก์—์„œ ์ฒซ ๋ฒˆ์งธ ๋Œ€์ฒด ์‹œ๋„: โ€™*โ€™ -> folder2/file3
  3. ๋Œ€์ฒด์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋น„-์ƒ๋Œ€์  ์ด๋ฆ„ - baseUrl๊ณผ ๊ฒฐํ•ฉ -> projectRoot/folder2/file3.ts
  4. ํŒŒ์ผ์ด ์กด์žฌํ•˜์ง€ ์•Š์Œ, ๋‘ ๋ฒˆ์งธ ๋Œ€์ฒด๋กœ ์ด๋™
  5. ๋‘ ๋ฒˆ์งธ ๋Œ€์ฒด โ€˜generated/*โ€™ -> generated/folder2/file3
  6. ๋Œ€์ฒด์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋น„-์ƒ๋Œ€์  ์ด๋ฆ„ - baseUrl๊ณผ ๊ฒฐํ•ฉ -> projectRoot/generated/folder2/file3.ts
  7. ํŒŒ์ผ์ด ์กด์žฌ. ์™„๋ฃŒ.

rootDirs ๊ฐ€์ƒ ๋””๋ ‰ํ„ฐ๋ฆฌ (Virtual Directories with rootDirs)

๋•Œ๋•Œ๋กœ ์ปดํŒŒ์ผ ํƒ€์ž„์— ์—ฌ๋Ÿฌ ๋””๋ ‰ํ„ฐ๋ฆฌ์˜ ํ”„๋กœ์ ํŠธ ์†Œ์Šค๊ฐ€ ๋ชจ๋‘ ๊ฒฐํ•ฉ๋˜์–ด ๋‹จ์ผ ์ถœ๋ ฅ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ์†Œ์Šค ๋””๋ ‰ํ„ฐ๋ฆฌ๊ฐ€ โ€œ๊ฐ€์ƒโ€ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

โ€˜rootDirsโ€™๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ์ปดํŒŒ์ผ๋Ÿฌ์—๊ฒŒ ์ด โ€œ๊ฐ€์ƒโ€ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” roots๋ฅผ ์•Œ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค; ๋”ฐ๋ผ์„œ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์ด๋Ÿฌํ•œ โ€œ๊ฐ€์ƒโ€๋””๋ ‰ํ„ฐ๋ฆฌ ๋‚ด์—์„œ ์ƒ๋Œ€์  ๋ชจ๋“ˆ import๋ฅผ ๋งˆ์น˜ ํ•˜๋‚˜์˜ ๋””๋ ‰ํ„ฐ๋ฆฌ์— ๊ฐ™์ด ๋ณ‘ํ•ฉ ํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ํ•ด์„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ์ด ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ฅผ ์ƒ๊ฐํ•ด๋ณด์„ธ์š”:

src โ””โ”€โ”€ views โ””โ”€โ”€ view1.ts (imports './template1') โ””โ”€โ”€ view2.ts generated โ””โ”€โ”€ templates โ””โ”€โ”€ views โ””โ”€โ”€ template1.ts (imports './view2')

src/views ์•ˆ์˜ ํŒŒ์ผ๋“ค์€ UI ์ปจํŠธ๋กค์„ ์œ„ํ•œ ์œ ์ € ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. generated/templated ์•ˆ์˜ ํŒŒ์ผ๋“ค์€, ๋นŒ๋“œ์˜ ์ผ๋ถ€๋กœ์จ ํ…œํ”Œ๋ฆฟ ์ƒ์„ฑ๊ธฐ์— ์˜ํ•ด ์ž๋™-์ƒ์„ฑ๋œ UI ํ…œํ”Œ๋ฆฟ ๋ฐ”์ธ๋”ฉ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋นŒ๋“œ ์Šคํ…์€ /src/view์™€ /generated/templates/views๋ฅผ ์ถœ๋ ฅ์—์„œ ๊ฐ™์€ ๋””๋ ‰ํ„ฐ๋ฆฌ๋กœ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋Ÿฐํƒ€์ž„์—์„œ, ๋ทฐ๋Š” ํ…œํ”Œ๋ฆฟ์ด ์˜†์— ์žˆ๋‹ค๊ณ  ๊ธฐ๋Œ€ํ•  ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์—, "./template"์ฒ˜๋Ÿผ ์ƒ๋Œ€์ ์ธ ์ด๋ฆ„์„ import์—์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ปดํŒŒ์ผ๋Ÿฌ์—๊ฒŒ ์ด ๊ด€๊ณ„๋ฅผ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด์„œ, "rootDirs"๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. "rootDirs"๋Š” ๋‚ด์šฉ๋ฌผ์ด ๋Ÿฐํƒ€์ž„์— ๋ณ‘ํ•ฉํ•  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋˜๋Š” roots ์˜ ๋ชฉ๋ก์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋‹ค์Œ์˜ ์˜ˆ์ œ์—์„œ, tsconfig.json ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค:

json
{
"compilerOptions": {
"rootDirs": [
"src/views",
"generated/templates/views"
]
}
}

์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ rootDirs ์ค‘ ํ•˜๋‚˜์˜ ํ•˜์œ„ ํด๋”์—์„œ ์ƒ๋Œ€์  ๋ชจ๋“ˆ import๋ฅผ ๋ณผ ๋•Œ๋งˆ๋‹ค, ๊ฐ rootDirs์˜ ์—”ํŠธ๋ฆฌ์—์„œ ์ด import๋ฅผ ์ฐพ์œผ๋ ค๊ณ  ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

rootDirs์˜ ์œ ์—ฐํ•จ์€ ๋…ผ๋ฆฌ์ ์œผ๋กœ ๋ณ‘ํ•ฉ๋˜๋Š” ๋ฌผ๋ฆฌ์  ์†Œ์Šค ๋””๋ ‰ํ„ฐ๋ฆฌ์˜ ๋ชฉ๋ก์„ ์ง€์ •ํ•˜๋Š”๋ฐ ์ œํ•œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ œ๊ณต๋˜๋Š” ๋ฐฐ์—ด์€ ์•„๋งˆ ์กด์žฌ ์—ฌ๋ถ€์— ๊ด€๊ณ„์—†์ด ์ž„์˜์˜ ์ˆ˜์˜ ad hoc, ์ž„์˜์˜ ๋””๋ ‰ํ„ฐ๋ฆฌ ์ด๋ฆ„์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์ปดํŒŒ์ผ๋Ÿฌ์—๊ฒŒ ์กฐ๊ฑด๋ถ€ ํฌํ•จ๊ณผ ํ”„๋กœ์ ํŠธ ์ „์šฉ ๋กœ๋” ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ๊ฐ™์€ ๋ณต์žกํ•œ ๋ฒˆ๋“ค๋ง๊ณผ ๋Ÿฐํƒ€์ž„ ๊ธฐ๋Šฅ์„ ์•ˆ์ „ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ์บก์ฒ˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

./#{locale}/messages์™€ ๊ฐ™์€ ์ƒ๋Œ€ ๋ชจ๋“ˆ ๊ฒฝ๋กœ์˜ ์ผ๋ถ€๋กœ #{locale}์™€ ๊ฐ™์€ ํŠน์ˆ˜ ๊ฒฝ๋กœ ํ† ํฐ์„ ๋ณด๊ฐ„ํ•˜์—ฌ ๋นŒ๋“œ ํˆด์ด ๋กœ์ผ€์ผ ์ „์šฉ ๋ฒˆ๋“ค์„ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•˜๋Š” ๊ตญ์ œํ™” ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ๊ณ ๋ คํ•ด๋ด…์‹œ๋‹ค. ์ด ๊ฐ€์ƒ์˜ ์„ค์ •์—์„œ ํˆด์ด ์ง€์›ํ•˜๋Š” ๋กœ์ผ€์ผ์„ ์—ด๊ฑฐํ•˜๊ณ , ์ถ”์ƒ ๊ฒฝ๋กœ๋ฅผ ./zh/messages, ./de/messages ๋“ฑ์œผ๋กœ ๋งคํ•‘ ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ ๋ชจ๋“ˆ์€ ๋ฌธ์ž์—ด ๋ฐฐ์—ด์„ export ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ./zh/messages๋Š” ๋‹ค์Œ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค:

ts
export default [
"ๆ‚จๅฅฝๅ—",
"ๅพˆ้ซ˜ๅ…ด่ฎค่ฏ†ไฝ "
];

rootDirs๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปดํŒŒ์ผ๋Ÿฌ์—๊ฒŒ ์ด ๋งคํ•‘์— ๋Œ€ํ•ด ์•Œ๋ ค์ฃผ์–ด ์‹ฌ์ง€์–ด ๋””๋ ‰ํ„ฐ๋ฆฌ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์•„๋„ ์•ˆ์ „ํ•˜๊ฒŒ ./#{locale}/messages๋ฅผ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹ค์Œ๊ณผ ๊ฐ™์€ tsconfig.json๋ฅผ ๋ณด์‹ญ์‹œ์˜ค:

json
{
"compilerOptions": {
"rootDirs": [
"src/zh",
"src/de",
"src/#{locale}"
]
}
}

์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์ด์ œ โ€˜./#{locale}/messagesโ€™๋ฅผ './zh/messages'๋กœ ํ•ด์„ํ•˜์—ฌ ์„ค๊ณ„ ์‹œ๊ฐ„ ์ง€์›์„ ํƒ€ํ˜‘ํ•˜์ง€ ์•Š๊ณ  ๋กœ์ผ€์ผ์— ๊ด€๊ณ„์—†๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“ˆ ํ•ด์„ ์ถ”์  (Tracing module resolution)

์•ž์—์„œ ๋…ผ์˜ํ•œ ๋ฐ”์™€ ๊ฐ™์ด ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋ชจ๋“ˆ์„ ํ•ด์„ํ•  ๋•Œ ํ˜„์žฌ ํด๋” ์™ธ๋ถ€์˜ ํŒŒ์ผ์„ ๋ฐฉ๋ฌธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋ชจ๋“ˆ์ด ํ•ด์„๋˜์ง€ ์•Š๊ฑฐ๋‚˜ ์ž˜๋ชป๋œ ์ •์˜๋กœ ํ•ด์„๋œ ์ด์œ ๋ฅผ ์ง„๋‹จํ•  ๋•Œ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. โ€˜โ€”traceResolutionโ€™์„ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํŒŒ์ผ๋Ÿฌ ๋ชจ๋“ˆ ํ•ด์„ ์ถ”์ ์„ ํ™œ์„ฑํ™”ํ•˜๋ฉด ๋ชจ๋“ˆ ํ•ด์„ ๊ณผ์ • ์ค‘์— ๋ฐœ์ƒํ•œ ์ž‘์—…์— ๋Œ€ํ•œ ์ธ์‚ฌ์ดํŠธ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

typescript ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜๋Š” ์˜ˆ์ œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์žˆ๋‹ค๊ณ  ํ•ด๋ด…์‹œ๋‹ค. app.ts๋Š” import * as ts from "typescript" ๊ฐ™์€ import๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

โ”‚ tsconfig.json โ”œโ”€โ”€โ”€node_modules โ”‚ โ””โ”€โ”€โ”€typescript โ”‚ โ””โ”€โ”€โ”€lib โ”‚ typescript.d.ts โ””โ”€โ”€โ”€src app.ts

--traceResolution์œผ๋กœ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ํ˜ธ์ถœ

shell
tsc --traceResolution

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ถœ๋ ฅ์ด ๋ฐœ์ƒ:

txt
======== Resolving module 'typescript' from 'src/app.ts'. ======== Module resolution kind is not specified, using 'NodeJs'. Loading module 'typescript' from 'node_modules' folder. File 'src/node_modules/typescript.ts' does not exist. File 'src/node_modules/typescript.tsx' does not exist. File 'src/node_modules/typescript.d.ts' does not exist. File 'src/node_modules/typescript/package.json' does not exist. File 'node_modules/typescript.ts' does not exist. File 'node_modules/typescript.tsx' does not exist. File 'node_modules/typescript.d.ts' does not exist. Found 'package.json' at 'node_modules/typescript/package.json'. 'package.json' has 'types' field './lib/typescript.d.ts' that references 'node_modules/typescript/lib/typescript.d.ts'. File 'node_modules/typescript/lib/typescript.d.ts' exist - use it as a module resolution result. ======== Module name 'typescript' was successfully resolved to 'node_modules/typescript/lib/typescript.d.ts'. ========

์ฃผ์˜์‚ฌํ•ญ (Things to look out for)

  • import์˜ ์ด๋ฆ„๊ณผ ์œ„์น˜

======== โ€˜src/app.tsโ€™ ์—์„œ โ€˜typesciprtโ€™ ๋ชจ๋“ˆ ํ•ด์„. ========

  • ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ๋”ฐ๋ฅด๋Š” ์ „๋žต

๋ชจ๋“ˆ ํ•ด์„ ์ข…๋ฅ˜๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š์œผ๋ฉด, โ€˜NodeJs ์‚ฌ์šฉ.

  • npm ํŒจํ‚ค์ง€์—์„œ types ๋กœ๋”ฉ

โ€˜package.jsonโ€™์€ โ€˜node_modules/typescript/lib/typescript.d.tsโ€™๋ฅผ ์ฐธ์กฐํ•˜๋Š” โ€˜typesโ€™ ํ•„๋“œ โ€˜./lib/typescript.d.tsโ€™๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ตœ์ข… ๊ฒฐ๊ณผ

======== ๋ชจ๋“ˆ ์ด๋ฆ„ โ€˜typescriptโ€™๋Š” โ€˜node_modules/typescript/lib/typescript.d.tsโ€™๋กœ ์„ฑ๊ณต์ ์œผ๋กœ ํ•ด์„ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ========

--noResolve ์‚ฌ์šฉํ•˜๊ธฐ (Using --noResolve)

์ผ๋ฐ˜์ ์œผ๋กœ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์ปดํŒŒ์ผ ๊ณผ์ •์„ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ๋ชจ๋“  ๋ชจ๋“ˆ import๋ฅผ ํ•ด์„ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ํŒŒ์ผ์˜ import๋ฅผ ์„ฑ๊ณต์ ์œผ๋กœ ํ•ด์„ํ•  ๋•Œ๋งˆ๋‹ค, ํŒŒ์ผ์€ ๋‚˜์ค‘์— ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์ฒ˜๋ฆฌํ•  ํŒŒ์ผ ์„ธํŠธ์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.

--noResolve ์ปดํŒŒ์ผ๋Ÿฌ ์˜ต์…˜์€ ๋ช…๋ น ์ค„์— ์ „๋‹ฌํ•˜์ง€ ์•Š์€ ํŒŒ์ผ์€ ์ปดํŒŒ์ผ์— โ€œ์ถ”๊ฐ€โ€ ํ•˜์ง€ ์•Š๋„๋ก ์ง€์‹œํ•ฉ๋‹ˆ๋‹ค. ์—ฌ์ „ํžˆ ํŒŒ์ผ์— ๋ชจ๋“ˆ์„ ํ•ด์„ํ•˜๋ ค๊ณ  ํ•˜์ง€๋งŒ, ํŒŒ์ผ์ด ์ง€์ •๋˜์ง€ ์•Š์•˜์œผ๋ฉด, ๊ทธ ํŒŒ์ผ์€ ํฌํ•จํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด:

app.ts

ts
import * as A from "moduleA" // ์„ฑ๊ณต, 'moduleA'๊ฐ€ ๋ช…๋ น์ค„๋กœ ์ „๋‹ฌ๋จ
import * as B from "moduleB" // Error TS2307: Cannot find module 'moduleB.
shell
tsc app.ts moduleA.ts --noResolve

--noResolve๋ฅผ ์‚ฌ์šฉํ•œ app.ts์˜ ์ปดํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค:

  • ๋ช…๋ น ์ค„๋กœ ์ „๋‹ฌํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— moduleA๋Š” ์ •ํ™•ํ•˜๊ฒŒ ์ฐพ์Œ.
  • ์ „๋‹ฌํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— moduleB๋ฅผ ์ฐพ๋Š”๋ฐ ์‹คํŒจํ•จ.

๊ณตํ†ต ์งˆ๋ฌธ (Common Questions)

์ œ์™ธ ๋ชฉ๋ก์— ์žˆ๋Š” ๋ชจ๋“ˆ์„ ์—ฌ์ „ํžˆ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์„ ํƒํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€? (Why does a module in the exclude list still get picked up by the compiler?)

tsconfig.json์€ ํด๋”๋ฅผ โ€œํ”„๋กœ์ ํŠธโ€๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค. "exclude" ๋‚˜ "files" ์—”ํŠธ๋ฆฌ๋ฅผ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด, tsconfig.json๋ฅผ ํฌํ•จํ•˜๋Š” ํด๋” ์•ˆ์˜ ๋ชจ๋“  ํŒŒ์ผ๊ณผ ๋ชจ๋“  ํ•˜์œ„-๋””๋ ‰ํ„ฐ๋ฆฌ๊ฐ€ ์ปดํŒŒ์ผ์— ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์ผ๋ถ€ ํŒŒ์ผ์„ ์ œ์™ธํ•˜๊ณ  ์‹ถ์œผ๋ฉด "exclude"๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์ฐพ๋„๋ก ํ•˜๊ฒŒ ํ•˜๋Š” ๋Œ€์‹  ๋ชจ๋“  ํŒŒ์ผ์„ ์ง€์ •ํ•˜๊ณ  ์‹ถ์œผ๋ฉด, "files"๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

tsconfig.json์˜ ์ž๋™ ํฌํ•จ์ž…๋‹ˆ๋‹ค. ์œ„์—์„œ ๋…ผ์˜ํ•œ ๋‚ด์žฅ ๋ชจ๋“ˆ ํ•ด์„์ด ์•„๋‹™๋‹ˆ๋‹ค. ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ํŒŒ์ผ์„ ๋ชจ๋“ˆ import ๋Œ€์ƒ์œผ๋กœ ์‹๋ณ„ํ•œ ๊ฒฝ์šฐ, ์ด์ „ ๋‹จ๊ณ„์—์„œ ์ œ์™ธ๋˜์—ˆ๋Š”์ง€์— ๊ด€๊ณ„์—†์ด ์ปดํŒŒ์ผ์— ํฌํ•จํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ปดํŒŒ์ผ์— ํŒŒ์ผ์€ ์ œ์™ธํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š”, ๊ทธ ํŒŒ์ผ์„ ์ œ์™ธํ•˜๊ณ  ๊ทธ ํŒŒ์ผ์— import๋‚˜ /// <reference path="..."" /> ์ง€์‹œ๋ฌธ์ด ์žˆ๋Š” ๋ชจ๋“  ํŒŒ์ผ์„ ์ œ์™ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request โค

Contributors to this page:
MHMohamed Hegazy  (70)
  (6)
AHAndy Hanson  (6)
DRDaniel Rosenwasser  (6)
DMDan Marshall  (3)
24+

Last updated: 2024๋…„ 3์›” 18์ผ

ย