TypeScript ์์กด์ฑ ์ฃผ์ , IoC ์ปจํ ์ด๋, ํต์ฌ ํ์ ์์ ์ฑ ์ ๋ต์ ํ์ํ์ฌ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๊ณ ํ ์คํธ ๊ฐ๋ฅํ๋ฉฐ ๊ฒฌ๊ณ ํ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ์ธ์. ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ์ค์ ์์ ์ฌ์ธต ๋ถ์.
TypeScript ์์กด์ฑ ์ฃผ์ : ๊ฒฌ๊ณ ํ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ IoC ์ปจํ ์ด๋ ํ์ ์์ ์ฑ ๊ฐํ
ํ๋ ์ํํธ์จ์ด ๊ฐ๋ฐ์ ์ํธ ์ฐ๊ฒฐ๋ ์ธ์์์ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ ํ ์คํธ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ํ์ด ์ ์ ๋ ๋ถ์ฐ๋๊ณ ํ๋ก์ ํธ๊ฐ ์ ์ ๋ ๋ณต์กํด์ง์ ๋ฐ๋ผ ์ ๊ตฌ์กฐํ๋๊ณ ๋ถ๋ฆฌ๋ ์ฝ๋์ ๋ํ ํ์์ฑ์ด ์ปค์ง๊ณ ์์ต๋๋ค. ์์กด์ฑ ์ฃผ์ (DI) ๋ฐ ์ ์ด ์ญ์ (IoC) ์ปจํ ์ด๋๋ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ์ ๋ฉด์ผ๋ก ํด๊ฒฐํ๋ ๊ฐ๋ ฅํ ์ํคํ ์ฒ ํจํด์ ๋๋ค. TypeScript์ ์ ์ ํ์ดํ ๊ธฐ๋ฅ๊ณผ ๊ฒฐํฉํ๋ฉด ์ด๋ฌํ ํจํด์ ์์ธก ๊ฐ๋ฅ์ฑ๊ณผ ๊ฒฌ๊ณ ์ฑ์ ์๋ก์ด ์์ค์ ์ด์ด์ค๋๋ค. ์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋๋ TypeScript ์์กด์ฑ ์ฃผ์ , IoC ์ปจํ ์ด๋์ ์ญํ , ๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ์ค์ํ๊ฒ๋ ๊ฒฌ๊ณ ํ ํ์ ์์ ์ฑ์ ๋ฌ์ฑํ์ฌ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ฐ๋ฐ ๋ฐ ๋ณ๊ฒฝ์ ์๊ฒฉํจ์ ์ ๊ฒฌ๋ ์ ์๋๋ก ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์ธํ ์ค๋ช ํฉ๋๋ค.
ํต์ฌ: ์์กด์ฑ ์ฃผ์ ์ดํดํ๊ธฐ
IoC ์ปจํ ์ด๋์ ํ์ ์์ ์ฑ์ ํ๊ตฌํ๊ธฐ ์ ์ ์์กด์ฑ ์ฃผ์ ์ ๊ฐ๋ ์ ํ๊ณ ํ ์ดํดํด ๋ด ์๋ค. ํต์ฌ์ ์ผ๋ก DI๋ ์ ์ด ์ญ์ ์์น์ ๊ตฌํํ๋ ๋์์ธ ํจํด์ ๋๋ค. ๊ตฌ์ฑ ์์๊ฐ ์์กด์ฑ์ ์ง์ ์์ฑํ๋ ๋์ ์ธ๋ถ ์์ค์์ ์์กด์ฑ์ ๋ฐ์ต๋๋ค. ์ด๋ฌํ '์ฃผ์ '์ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ์ด๋ฃจ์ด์ง ์ ์์ต๋๋ค:
- ์์ฑ์ ์ฃผ์ : ์์กด์ฑ์ ๊ตฌ์ฑ ์์์ ์์ฑ์ ์ธ์๋ก ์ ๊ณต๋ฉ๋๋ค. ๊ตฌ์ฑ ์์๊ฐ ํญ์ ํ์ํ ๋ชจ๋ ์์กด์ฑ์ผ๋ก ์ด๊ธฐํ๋๋๋ก ๋ณด์ฅํ๊ณ ์๊ตฌ ์ฌํญ์ ๋ช ํํ๊ฒ ๋ง๋ค๊ธฐ ๋๋ฌธ์ ์ข ์ข ์ ํธ๋๋ ๋ฐฉ๋ฒ์ ๋๋ค.
- ์ธํฐ ์ฃผ์ (ํ๋กํผํฐ ์ฃผ์ ): ๊ตฌ์ฑ ์์๊ฐ ์์ฑ๋ ํ ๊ณต๊ฐ ์ธํฐ ๋ฉ์๋ ๋๋ ํ๋กํผํฐ๋ฅผ ํตํด ์์กด์ฑ์ด ์ ๊ณต๋ฉ๋๋ค. ์ด๋ ์ ์ฐ์ฑ์ ์ ๊ณตํ์ง๋ง ์์กด์ฑ์ด ์ค์ ๋์ง ์์ ๊ฒฝ์ฐ ๊ตฌ์ฑ ์์๊ฐ ๋ถ์์ ํ ์ํ๊ฐ ๋ ์ ์์ต๋๋ค.
- ๋ฉ์๋ ์ฃผ์ : ์์กด์ฑ์ ์ด๋ฅผ ํ์๋ก ํ๋ ํน์ ๋ฉ์๋์ ์ ๊ณต๋ฉ๋๋ค. ์ด๋ ๊ตฌ์ฑ ์์์ ์ ์ฒด ์๋ช ์ฃผ๊ธฐ๋ณด๋ค ํน์ ์์ ์๋ง ํ์ํ ์์กด์ฑ์ ์ ํฉํฉ๋๋ค.
์์กด์ฑ ์ฃผ์ ์ ์์ฉํด์ผ ํ๋ ์ด์ ? ๊ธ๋ก๋ฒ ์ด์
๊ฐ๋ฐ ํ์ ๊ท๋ชจ๋ ์ง๋ฆฌ์ ๋ถํฌ์ ๊ด๊ณ์์ด ์์กด์ฑ ์ฃผ์ ์ ์ด์ ์ ๋ณดํธ์ ์ผ๋ก ์ธ์ ๋ฉ๋๋ค:
- ํฅ์๋ ํ ์คํธ ์ฉ์ด์ฑ: DI๋ฅผ ์ฌ์ฉํ๋ฉด ๊ตฌ์ฑ ์์๊ฐ ์์ฒด ์์กด์ฑ์ ์์ฑํ์ง ์์ต๋๋ค. ์ฆ, ํ ์คํธ ์ค์ ์์กด์ฑ์ ๋ชจ์(mock) ๋๋ ์คํ (stub) ๋ฒ์ ์ ์ฝ๊ฒ '์ฃผ์ 'ํ์ฌ ํ๋ ฅ์์ ๋ถ์์ฉ ์์ด ๋จ์ผ ์ฝ๋ ๋จ์๋ฅผ ๊ฒฉ๋ฆฌํ๊ณ ํ ์คํธํ ์ ์์ต๋๋ค. ์ด๋ ๋ชจ๋ ๊ฐ๋ฐ ํ๊ฒฝ์์ ๋น ๋ฅด๊ณ ์์ ์ ์ธ ํ ์คํธ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ๊ฐ์ ๋ ์ ์ง๋ณด์์ฑ: ๋์จํ๊ฒ ๊ฒฐํฉ๋ ๊ตฌ์ฑ ์์๋ ์ดํด, ์์ ๋ฐ ํ์ฅ์ด ๋ ์ฝ์ต๋๋ค. ํ ์์กด์ฑ์ ๋ณ๊ฒฝ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ด๋ จ ์๋ ๋ถ๋ถ์ผ๋ก ํ๊ธ๋ ๊ฐ๋ฅ์ฑ์ด ์ ์ด ๋ค์ํ ์ฝ๋๋ฒ ์ด์ค์ ํ ๊ฐ์ ์ ์ง๋ณด์๊ฐ ๋จ์ํ๋ฉ๋๋ค.
- ์ฆ๊ฐ๋ ์ ์ฐ์ฑ ๋ฐ ์ฌ์ฌ์ฉ์ฑ: ๊ตฌ์ฑ ์์๋ ๋ ๋ชจ๋ํ๋๊ณ ๋ ๋ฆฝ์ ์ผ๋ก ๋ฉ๋๋ค. ์ด๋ฅผ ์ฌ์ฉํ๋ ๊ตฌ์ฑ ์์๋ฅผ ๋ณ๊ฒฝํ์ง ์๊ณ ๋ ์์กด์ฑ์ ๊ตฌํ์ ๊ต์ฒดํ ์ ์์ด ๋ค์ํ ํ๋ก์ ํธ ๋๋ ํ๊ฒฝ์์ ์ฝ๋ ์ฌ์ฌ์ฉ์ ์ด์งํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๊ฐ๋ฐ์์๋ `SQLiteDatabaseService`๋ฅผ, ํ๋ก๋์ ์์๋ `PostgreSQLDatabaseService`๋ฅผ ์ฃผ์ ํ ์ ์์ต๋๋ค. `UserService`๋ฅผ ๋ณ๊ฒฝํ์ง ์๊ณ ๋ง์ ๋๋ค.
- ์์ฉ๊ตฌ ์ฝ๋ ๊ฐ์: ์ฒ์์๋ ํนํ ์๋ DI์ ๊ฒฝ์ฐ ์ง๊ด์ ๋ฐํ๋ ๊ฒ์ฒ๋ผ ๋ณด์ผ ์ ์์ง๋ง, IoC ์ปจํ ์ด๋(๋ค์ ์น์ ์์ ์ค๋ช )๋ ์๋์ผ๋ก ์์กด์ฑ์ ์ฐ๊ฒฐํ๋ ๋ฐ ๊ด๋ จ๋ ์์ฉ๊ตฌ ์ฝ๋๋ฅผ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค.
- ๋ ๋ช ํํ ๋์์ธ ๋ฐ ๊ตฌ์กฐ: DI๋ ๊ฐ๋ฐ์๊ฐ ๊ตฌ์ฑ ์์์ ์ฑ ์๊ณผ ์ธ๋ถ ์๊ตฌ ์ฌํญ์ ๋ํด ์๊ฐํ๋๋ก ๊ฐ์ํ์ฌ ๊ธ๋ก๋ฒ ํ์ด ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ํ์ ํ ์ ์๋ ๋ ๊นจ๋ํ๊ณ ์ง์ค๋ ์ฝ๋๋ก ์ด์ด์ง๋๋ค.
IoC ์ปจํ ์ด๋ ์์ด ๊ฐ๋จํ TypeScript ์์ ๋ฅผ ๊ณ ๋ คํ์ฌ ์์ฑ์ ์ฃผ์ ์ ๋ณด์ฌ์ค๋๋ค:
interface ILogger {
log(message: string): void;
}
class ConsoleLogger implements ILogger {
log(message: string): void {
console.log(`[LOG]: ${message}`);
}
}
class DataService {
private logger: ILogger;
constructor(logger: ILogger) {
this.logger = logger;
}
fetchData(): string {
this.logger.log("Fetching data...");
// ... data fetching logic ...
return "Some important data";
}
}
// Manual Dependency Injection
const myLogger: ILogger = new ConsoleLogger();
const myDataService = new DataService(myLogger);
console.log(myDataService.fetchData());
์ด ์์ ์์๋ `DataService`๊ฐ `ConsoleLogger`๋ฅผ ์ง์ ์์ฑํ๋ ๋์ ์์ฑ์๋ฅผ ํตํด `ILogger` ์ธ์คํด์ค๋ฅผ ๋ฐ์ต๋๋ค. ์ด๋ฅผ ํตํด `DataService`๋ ๊ตฌ์ฒด์ ์ธ `ILogger` ๊ตฌํ์ ๋ํด ์ ์ ์๊ฒ ๋์ด ์ฝ๊ฒ ๊ต์ฒดํ ์ ์์ต๋๋ค.
์ค์ผ์คํธ๋ ์ดํฐ: ์ ์ด ์ญ์ (IoC) ์ปจํ ์ด๋
์๋ ์์กด์ฑ ์ฃผ์ ์ ์๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ํด ๊ฐ๋ฅํ์ง๋ง, ๋ ํฐ ์ํฐํ๋ผ์ด์ฆ๊ธ ์์คํ ์์ ๊ฐ์ฒด ์์ฑ ๋ฐ ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ ๋น ๋ฅด๊ฒ ๋ฒ๊ฑฐ๋ก์์ง ์ ์์ต๋๋ค. ์ฌ๊ธฐ์ ์ ์ด ์ญ์ (IoC) ์ปจํ ์ด๋, ์ฆ DI ์ปจํ ์ด๋๊ฐ ๋ฑ์ฅํฉ๋๋ค. IoC ์ปจํ ์ด๋๋ ๋ณธ์ง์ ์ผ๋ก ๊ฐ์ฒด์ ๊ทธ ์์กด์ฑ์ ์ธ์คํด์คํ ๋ฐ ์๋ช ์ฃผ๊ธฐ๋ฅผ ๊ด๋ฆฌํ๋ ํ๋ ์์ํฌ์ ๋๋ค.
IoC ์ปจํ ์ด๋ ์๋ ๋ฐฉ์
IoC ์ปจํ ์ด๋๋ ์ผ๋ฐ์ ์ผ๋ก ๋ ๊ฐ์ง ์ฃผ์ ๋จ๊ณ๋ฅผ ํตํด ์๋ํฉ๋๋ค:
-
๋ฑ๋ก (๋ฐ์ธ๋ฉ): ์ปจํ ์ด๋์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑ ์์์ ๊ทธ ๊ด๊ณ์ ๋ํด '๊ฐ๋ฅด์นฉ๋๋ค'. ์ฌ๊ธฐ์๋ ์ถ์ ์ธํฐํ์ด์ค ๋๋ ํ ํฐ์ ๊ตฌ์ฒด์ ์ธ ๊ตฌํ์ ๋งคํํ๋ ๊ฒ์ด ํฌํจ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ปจํ ์ด๋์ "๋๊ตฐ๊ฐ `ILogger`๋ฅผ ์์ฒญํ๋ฉด `ConsoleLogger` ์ธ์คํด์ค๋ฅผ ์ ๊ณตํ๋ผ"๊ณ ๋งํฉ๋๋ค.
// Conceptual registration container.bind<ILogger>("ILogger").to(ConsoleLogger); -
ํด๊ฒฐ (์ฃผ์ ): ๊ตฌ์ฑ ์์๊ฐ ์์กด์ฑ์ ํ์๋ก ํ ๋ ์ปจํ ์ด๋์ ์ ๊ณตํด๋ฌ๋ผ๊ณ ์์ฒญํฉ๋๋ค. ์ปจํ ์ด๋๋ ๊ตฌ์ฑ ์์์ ์์ฑ์(๋๋ DI ์คํ์ผ์ ๋ฐ๋ผ ํ๋กํผํฐ/๋ฉ์๋)๋ฅผ ๊ฒ์ฌํ๊ณ , ์์กด์ฑ์ ์๋ณํ๊ณ , ํด๋น ์์กด์ฑ์ ์ธ์คํด์ค๋ฅผ ์์ฑํ๊ณ (์ด ์์ฒด๋ก ์์ฒด ์์กด์ฑ์ ๊ฐ์ง๊ณ ์๋ค๋ฉด ์ฌ๊ท์ ์ผ๋ก ํด๊ฒฐ), ์์ฒญ๋ ๊ตฌ์ฑ ์์์ ์ฃผ์ ํฉ๋๋ค. ์ด ํ๋ก์ธ์ค๋ ์ข ์ข ์ฃผ์ ๋๋ ๋ฐ์ฝ๋ ์ดํฐ๋ฅผ ํตํด ์๋ํ๋ฉ๋๋ค.
// Conceptual resolution const dataService = container.resolve<DataService>(DataService);
์ปจํ ์ด๋๋ ๊ฐ์ฒด ์๋ช ์ฃผ๊ธฐ ๊ด๋ฆฌ์ ์ฑ ์์ ๋งก์ ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๋ฅผ ๋น์ฆ๋์ค ๋ก์ง์ ๋ ์ง์ค์ํค๊ณ ์ธํ๋ผ ๋ฌธ์ ๋ณด๋ค๋ ๋น์ฆ๋์ค ๋ก์ง์ ์ง์คํ๋๋ก ํฉ๋๋ค. ์ด๋ฌํ ๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ๋ ๋๊ท๋ชจ ๊ฐ๋ฐ ๋ฐ ๋ถ์ฐ ํ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
TypeScript ์ฅ์ : ์ ์ ํ์ดํ ๋ฐ ๊ทธ DI ๊ณผ์
TypeScript๋ JavaScript์ ์ ์ ํ์ดํ์ ๋์ ํ์ฌ ๊ฐ๋ฐ์๊ฐ ๋ฐํ์์ด ์๋ ๊ฐ๋ฐ ์ค์ ์ค๋ฅ๋ฅผ ์กฐ๊ธฐ์ ๋ฐ๊ฒฌํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ฌํ ์ปดํ์ผ ํ์ ์์ ์ฑ์ ํนํ ๋ค์ํ ๊ธ๋ก๋ฒ ํ์์ ์ ์ง ๊ด๋ฆฌ๋๋ ๋ณต์กํ ์์คํ ์์ ์ฝ๋ ํ์ง์ ํฅ์์ํค๊ณ ๋๋ฒ๊น ์๊ฐ์ ์ค์ฌ์ฃผ๋ฏ๋ก ์๋นํ ์ด์ ์ ๋๋ค.
๊ทธ๋ฌ๋ ๋ฌธ์์ด ๊ธฐ๋ฐ ์กฐํ ๋๋ ๋ฐํ์ ๋ฆฌํ๋ ์ ์ ํฌ๊ฒ ์์กดํ๋ ๊ธฐ์กด JavaScript DI ์ปจํ ์ด๋๋ TypeScript์ ์ ์ ํน์ฑ๊ณผ ์ถฉ๋ํ ์ ์์ต๋๋ค. ๊ทธ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ฐํ์ ๋ ์ปดํ์ผ ํ์: TypeScript์ ์ ํ์ ์ฃผ๋ก ์ปดํ์ผ ํ์ ๊ตฌ์ฑ ์์์ ๋๋ค. ์ปดํ์ผ ์ค์ ์ผ๋ฐ JavaScript๋ก ์ปดํ์ผ๋ ๋ ์ ๊ฑฐ๋ฉ๋๋ค. ์ฆ, ๋ฐํ์์ JavaScript ์์ง์ ๊ธฐ๋ณธ์ ์ผ๋ก TypeScript ์ธํฐํ์ด์ค ๋๋ ์ ํ ์ฃผ์์ ๋ํด ์์ง ๋ชปํฉ๋๋ค.
- ์ ํ ์ ๋ณด ์์ค: DI ์ปจํ ์ด๋๊ฐ ๋ฐํ์์ ๋์ ์ผ๋ก JavaScript ์ฝ๋๋ฅผ ๊ฒ์ฌํ๋ ๋ฐ ์์กดํ๋ ๊ฒฝ์ฐ(์: ํจ์ ์ธ์๋ฅผ ๊ตฌ๋ฌธ ๋ถ์ํ๊ฑฐ๋ ๋ฌธ์์ด ํ ํฐ์ ์์กดํ๋ ๊ฒฝ์ฐ) TypeScript์์ ์ ๊ณตํ๋ ํ๋ถํ ์ ํ ์ ๋ณด๋ฅผ ์์ ์ ์์ต๋๋ค.
- ๋ฆฌํฉํ ๋ง ์ํ: ์์กด์ฑ ์๋ณ์ ์ํด ๋ฌธ์์ด ๋ฆฌํฐ๋ด 'ํ ํฐ'์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ํด๋์ค ์ด๋ฆ ๋๋ ์ธํฐํ์ด์ค ์ด๋ฆ์ ๋ฆฌํฉํ ๋งํ๋ฉด DI ๊ตฌ์ฑ์์ ์ปดํ์ผ ํ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ง ์์ ๋ฐํ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ด๋ ํฌ๊ณ ์งํํ๋ ์ฝ๋๋ฒ ์ด์ค์์ ์๋นํ ์ํ์ ๋๋ค.
๋ฐ๋ผ์ TypeScript์์ IoC ์ปจํ ์ด๋๋ฅผ ํ์ฉํ์ฌ ์ปดํ์ผ ํ์ ์์ ์ฑ์ ๋ณด์ฅํ๊ณ ์์กด์ฑ ํด๊ฒฐ๊ณผ ๊ด๋ จ๋ ๋ฐํ์ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํ๋ ๋ฐฉ์์ผ๋ก ํ์ฉํ๋ ๊ฒ์ด ๊ณผ์ ์ ๋๋ค.
TypeScript์์ IoC ์ปจํ ์ด๋๋ฅผ ์ฌ์ฉํ์ฌ ํ์ ์์ ์ฑ ๋ฌ์ฑ
๋ชฉํ๋ ๊ตฌ์ฑ ์์๊ฐ `ILogger`๋ฅผ ์์ํ๋ ๊ฒฝ์ฐ IoC ์ปจํ ์ด๋๊ฐ ํญ์ `ILogger`๋ฅผ ์ค์ํ๋ ์ธ์คํด์ค๋ฅผ ์ ๊ณตํ๊ณ TypeScript๊ฐ ์ด๋ฅผ ์ปดํ์ผ ํ์์ ํ์ธํ ์ ์๋๋ก ํ๋ ๊ฒ์ ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด `UserService`๊ฐ ์ค์๋ก `PaymentProcessor` ์ธ์คํด์ค๋ฅผ ๋ฐ์ ๋ฏธ๋ฌํ๊ณ ๋๋ฒ๊น ํ๊ธฐ ์ด๋ ค์ด ๋ฐํ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ ์๋๋ฆฌ์ค๋ฅผ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
ํ๋ TypeScript ์ฐ์ IoC ์ปจํ ์ด๋๋ ์ด๋ฌํ ์ค์ํ ํ์ ์์ ์ฑ์ ๋ฌ์ฑํ๊ธฐ ์ํด ์ฌ๋ฌ ์ ๋ต๊ณผ ํจํด์ ์ฌ์ฉํฉ๋๋ค:
1. ์ถ์ํ๋ฅผ ์ํ ์ธํฐํ์ด์ค
์ด๊ฒ์ TypeScript๋ฟ๋ง ์๋๋ผ ์ข์ DI ์ค๊ณ์ ๊ธฐ๋ณธ์ ๋๋ค. ํญ์ ๊ตฌ์ฒด์ ์ธ ๊ตฌํ์ด ์๋ ์ถ์ํ(์ธํฐํ์ด์ค)์ ์์กดํ์ญ์์ค. TypeScript ์ธํฐํ์ด์ค๋ ํด๋์ค๊ฐ ์ค์ํด์ผ ํ๋ ๊ณ์ฝ์ ์ ๊ณตํ๋ฉฐ, ์์กด์ฑ ์ ํ์ ์ ์ํ๋ ๋ฐ ํ์ํฉ๋๋ค.
// Define the contract
interface IEmailService {
sendEmail(to: string, subject: string, body: string): Promise<void>;
}
// Concrete implementation 1
class SmtpEmailService implements IEmailService {
async sendEmail(to: string, subject: string, body: string): Promise<void> {
console.log(`Sending SMTP email to ${to}: ${subject}`);
// ... actual SMTP logic ...
}
}
// Concrete implementation 2 (e.g., for testing or different provider)
class MockEmailService implements IEmailService {
async sendEmail(to: string, subject: string, body: string): Promise<void> {
console.log(`[MOCK] Sending email to ${to}: ${subject}`);
// No actual sending, just for testing or development
}
}
class NotificationService {
constructor(private emailService: IEmailService) {}
async notifyUser(userId: string, message: string): Promise<void> {
// Imagine retrieving user email here
const userEmail = "user@example.com";
await this.emailService.sendEmail(userEmail, "Notification", message);
}
}
์ฌ๊ธฐ์ `NotificationService`๋ `SmtpEmailService`๊ฐ ์๋ `IEmailService`์ ์์กดํฉ๋๋ค. ์ด๋ฅผ ํตํด ๊ตฌํ์ ์ฝ๊ฒ ๊ต์ฒดํ ์ ์์ต๋๋ค.
2. ์ฃผ์ ํ ํฐ (์ฌ๋ณผ ๋๋ ์ ํ ๊ฐ๋๊ฐ ์๋ ๋ฌธ์์ด ๋ฆฌํฐ๋ด)
TypeScript ์ธํฐํ์ด์ค๋ ๋ฐํ์์ ์ ๊ฑฐ๋๋ฏ๋ก IoC ์ปจํ ์ด๋์ ์์กด์ฑ ํด๊ฒฐ์ ์ํ ํค๋ก ์ธํฐํ์ด์ค๋ฅผ ์ง์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๊ณ ์ ํ๊ฒ ์์กด์ฑ์ ์๋ณํ๋ ๋ฐํ์ 'ํ ํฐ'์ด ํ์ํฉ๋๋ค.
-
๋ฌธ์์ด ๋ฆฌํฐ๋ด: ๊ฐ๋จํ์ง๋ง ๋ฆฌํฉํ ๋ง ์ค๋ฅ์ ์ทจ์ฝํฉ๋๋ค. ๋ฌธ์์ด์ ๋ณ๊ฒฝํด๋ TypeScript๊ฐ ๊ฒฝ๊ณ ํ์ง ์์ต๋๋ค.
// container.bind<IEmailService>("EmailService").to(SmtpEmailService); // container.get<IEmailService>("EmailService"); -
์ฌ๋ณผ: ๋ฌธ์์ด์ ๋ํ ๋ ์์ ํ ๋์์ ๋๋ค. ์ฌ๋ณผ์ ๊ณ ์ ํ๋ฉฐ ์ถฉ๋ํ์ง ์์ต๋๋ค. ๋ฐํ์ ๊ฐ์ด์ง๋ง ์ ํ๊ณผ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
// Define a unique Symbol as an injection token const TYPES = { EmailService: Symbol.for("IEmailService"), NotificationService: Symbol.for("NotificationService"), }; // Example with InversifyJS (a popular TypeScript IoC container) import { Container, injectable, inject } from "inversify"; import "reflect-metadata"; // Required for decorators interface IEmailService { sendEmail(to: string, subject: string, body: string): Promise<void>; } @injectable() class SmtpEmailService implements IEmailService { async sendEmail(to: string, subject: string, body: string): Promise<void> { console.log(`Sending SMTP email to ${to}: ${subject}`); } } @injectable() class NotificationService { constructor( @inject(TYPES.EmailService) private emailService: IEmailService ) {} async notifyUser(userId: string, message: string): Promise<void> { const userEmail = "user@example.com"; await this.emailService.sendEmail(userEmail, "Notification", message); } } const container = new Container(); container.bind<IEmailService>(TYPES.EmailService).to(SmtpEmailService); container.bind<NotificationService>(TYPES.NotificationService).to(NotificationService); const notificationService = container.get<NotificationService>(TYPES.NotificationService); notificationService.notifyUser("123", "Hello, world!");`Symbol.for`๊ฐ ์๋ `TYPES` ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ฉด ํ ํฐ์ ๊ด๋ฆฌํ๋ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. TypeScript๋ `bind` ๋ฐ `get` ํธ์ถ์์ `<IEmailService>`๋ฅผ ์ฌ์ฉํ ๋ ์ฌ์ ํ ์ ํ ๊ฒ์ฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
3. ๋ฐ์ฝ๋ ์ดํฐ ๋ฐ `reflect-metadata`
TypeScript๊ฐ IoC ์ปจํ ์ด๋์ ๊ฒฐํฉํ์ฌ ์ง์ ํ ๋น์ ๋ฐํ๋ ๊ณณ์ ๋๋ค. JavaScript์ `reflect-metadata` API(์ด์ ํ๊ฒฝ์ ๋ํ ํด๋ฆฌํ ๋๋ ํน์ TypeScript ๊ตฌ์ฑ์ด ํ์ํจ)๋ ๊ฐ๋ฐ์๊ฐ ํด๋์ค, ๋ฉ์๋ ๋ฐ ํ๋กํผํฐ์ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ฒจ๋ถํ ์ ์๋๋ก ํฉ๋๋ค. TypeScript์ ์คํ์ ์ธ ๋ฐ์ฝ๋ ์ดํฐ๋ ์ด๋ฅผ ํ์ฉํ์ฌ IoC ์ปจํ ์ด๋๊ฐ ๋์์ธ ํ์์ ์์ฑ์ ๋งค๊ฐ๋ณ์๋ฅผ ๊ฒ์ฌํ ์ ์๋๋ก ํฉ๋๋ค.
`tsconfig.json`์์ `emitDecoratorMetadata`๋ฅผ ํ์ฑํํ๋ฉด TypeScript๋ ํด๋์ค ์์ฑ์์ ๋งค๊ฐ๋ณ์ ์ ํ์ ๋ํ ์ถ๊ฐ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ๋ด๋ณด๋ ๋๋ค. IoC ์ปจํ ์ด๋๋ ์ด ๋ฉํ๋ฐ์ดํฐ๋ฅผ ๋ฐํ์์ ์ฝ์ด ์์กด์ฑ์ ์๋์ผ๋ก ํด๊ฒฐํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ ํ ์ ๋ณด๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํ๋ฏ๋ก ์ข ์ข ๊ตฌ์ฒด์ ์ธ ํด๋์ค์ ๋ํด ๋ช ์์ ์ผ๋ก ํ ํฐ์ ์ง์ ํ ํ์๊ฐ ์์ต๋๋ค.
// tsconfig.json excerpt:
// {
// "compilerOptions": {
// "experimentalDecorators": true,
// "emitDecoratorMetadata": true
// }
// }
import { Container, injectable, inject } from "inversify";
import "reflect-metadata"; // Essential for decorator metadata
// --- Dependencies ---
interface IDataRepository {
findById(id: string): Promise<any>;
}
@injectable()
class MongoDataRepository implements IDataRepository {
async findById(id: string): Promise<any> {
console.log(`Fetching data from MongoDB for ID: ${id}`);
return { id, name: "MongoDB User" };
}
}
interface ILogger {
log(message: string): void;
}
@injectable()
class ConsoleLogger implements ILogger {
log(message: string): void {
console.log(`[App Logger]: ${message}`);
}
}
// --- Service requiring dependencies ---
@injectable()
class UserService {
constructor(
@inject(TYPES.DataRepository) private dataRepository: IDataRepository,
@inject(TYPES.Logger) private logger: ILogger
) {
this.logger.log("UserService initialized.");
}
async getUser(id: string): Promise<any> {
this.logger.log(`Attempting to get user with ID: ${id}`);
const user = await this.dataRepository.findById(id);
this.logger.log(`User ${user.name} retrieved.`);
return user;
}
}
// --- IoC Container Setup ---
const TYPES = {
DataRepository: Symbol.for("IDataRepository"),
Logger: Symbol.for("ILogger"),
UserService: Symbol.for("UserService"),
};
const appContainer = new Container();
// Bind interfaces to concrete implementations using symbols
appContainer.bind<IDataRepository>(TYPES.DataRepository).to(MongoDataRepository);
appContainer.bind<ILogger>(TYPES.Logger).to(ConsoleLogger);
// Bind the concrete class for UserService
// The container will automatically resolve its dependencies based on @inject decorators and reflect-metadata
appContainer.bind<UserService>(TYPES.UserService).to(UserService);
// --- Application Execution ---
const userService = appContainer.get<UserService>(TYPES.UserService);
userService.getUser("user-123").then(user => {
console.log("User fetched successfully:", user);
});
์ด ํฅ์๋ ์์ ์์ `reflect-metadata`์ `@inject` ๋ฐ์ฝ๋ ์ดํฐ๋ `InversifyJS`๊ฐ `UserService`๊ฐ `IDataRepository`์ `ILogger`๋ฅผ ํ์๋ก ํ๋ค๋ ๊ฒ์ ์๋์ผ๋ก ์ดํดํ๋๋ก ํฉ๋๋ค. `bind` ๋ฉ์๋์ ํ์ ๋งค๊ฐ๋ณ์ `<IDataRepository>`๋ `MongoDataRepository`๊ฐ ์ค์ ๋ก `IDataRepository`๋ฅผ ๊ตฌํํจ์ ๋ณด์ฅํ๋ ์ปดํ์ผ ํ์ ๊ฒ์ฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
`TYPES.DataRepository`์ `IDataRepository`๋ฅผ ๊ตฌํํ์ง ์๋ ํด๋์ค๋ฅผ ์ค์๋ก ๋ฐ์ธ๋ฉํ๋ฉด TypeScript๋ ์ปดํ์ผ ํ์ ์ค๋ฅ๋ฅผ ๋ฐ์์์ผ ์ ์ฌ์ ์ธ ๋ฐํ์ ์ถฉ๋์ ๋ฐฉ์งํฉ๋๋ค. ์ด๊ฒ์ด TypeScript์์ IoC ์ปจํ ์ด๋๋ฅผ ์ฌ์ฉํ ํ์ ์์ ์ฑ์ ๋ณธ์ง์ ๋๋ค. ์ฌ์ฉ์์๊ฒ ๋๋ฌํ๊ธฐ ์ ์ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๋ฉฐ, ์ด๋ ์ค์ํ ์์คํ ์ ์ ์ง ๊ด๋ฆฌํ๋ ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ํ์๊ฒ ํฐ ์ด์ ์ ๋๋ค.
TypeScript IoC ์ปจํ ์ด๋ ๊ณตํต ์ฌ์ธต ๋ถ์
์์น์ ์ผ๊ด๋์ง๋ง, ๋ค๋ฅธ IoC ์ปจํ ์ด๋๋ ๋ค์ํ ๊ธฐ๋ฅ๊ณผ API ์คํ์ผ์ ์ ๊ณตํฉ๋๋ค. TypeScript์ ํ์ ์์ ์ฑ์ ํ์ฉํ๋ ๋ ๊ฐ์ง ์ธ๊ธฐ ์๋ ์ ํ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
InversifyJS
InversifyJS๋ TypeScript๋ฅผ ์ํ ๊ฐ์ฅ ์ฑ์ํ๊ณ ๋๋ฆฌ ์ฑํ๋ IoC ์ปจํ ์ด๋ ์ค ํ๋์ ๋๋ค. TypeScript ๊ธฐ๋ฅ, ํนํ ๋ฐ์ฝ๋ ์ดํฐ ๋ฐ `reflect-metadata`๋ฅผ ํ์ฉํ๊ธฐ ์ํด ์ฒ์๋ถํฐ ๊ตฌ์ถ๋์์ต๋๋ค. ๋์์ธ์ ํ์ ์์ ์ฑ์ ์ ์งํ๊ธฐ ์ํด ์ธํฐํ์ด์ค์ ๊ธฐํธ ๊ธฐ๋ฐ ์ฃผ์ ํ ํฐ์ ๊ฐ๋ ฅํ๊ฒ ๊ฐ์กฐํฉ๋๋ค.
์ฃผ์ ๊ธฐ๋ฅ:
- ๋ฐ์ฝ๋ ์ดํฐ ๊ธฐ๋ฐ: ๋ช ํํ๊ณ ์ ์ธ์ ์ธ ์์กด์ฑ ๊ด๋ฆฌ๋ฅผ ์ํด `@injectable()`, `@inject()`, `@multiInject()`, `@named()`, `@tagged()`๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ๊ธฐํธ ์๋ณ์: ๋ฌธ์์ด์ ๋นํด ์ด๋ฆ ์ถฉ๋์ ์ค์ด๋ ์ ์ญ์ ์ผ๋ก ๊ณ ์ ํ ์ฃผ์ ํ ํฐ์ผ๋ก ์ฌ๋ณผ์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
- ์ปจํ ์ด๋ ๋ชจ๋ ์์คํ : ํนํ ๋๊ท๋ชจ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํด ๋ชจ๋๋ก ๋ฐ์ธ๋ฉ์ ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
- ์๋ช ์ฃผ๊ธฐ ๋ฒ์: ์์ฒญ ๋น ์ ์ธ์คํด์ค(์์ฒญ), ์ปจํ ์ด๋ ๋น ๋จ์ผ ์ธ์คํด์ค(์ฑ๊ธํค) ๋ฐ ์์ฒญ/์ปจํ ์ด๋ ๋ฒ์ ๋ฐ์ธ๋ฉ์ ์ง์ํฉ๋๋ค.
- ์กฐ๊ฑด๋ถ ๋ฐ์ธ๋ฉ: ์ปจํ ์คํธ ๊ท์น์ ๋ฐ๋ผ ๋ค๋ฅธ ๊ตฌํ์ ๋ฐ์ธ๋ฉํ ์ ์์ต๋๋ค(์: ๊ฐ๋ฐ ํ๊ฒฝ์ธ ๊ฒฝ์ฐ `DevelopmentLogger` ๋ฐ์ธ๋ฉ).
- ๋น๋๊ธฐ ํด๊ฒฐ: ๋น๋๊ธฐ์ ์ผ๋ก ํด๊ฒฐํด์ผ ํ๋ ์์กด์ฑ์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
InversifyJS ์์ : ์กฐ๊ฑด๋ถ ๋ฐ์ธ๋ฉ
์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฌ์ฉ์ ์ง์ญ ๋๋ ํน์ ๋น์ฆ๋์ค ๋ ผ๋ฆฌ์ ๋ฐ๋ผ ๋ค๋ฅธ ๊ฒฐ์ ํ๋ก์ธ์๋ฅผ ํ์๋ก ํ๋ค๊ณ ์์ํด ๋ณด์ธ์. InversifyJS๋ ์กฐ๊ฑด๋ถ ๋ฐ์ธ๋ฉ์ผ๋ก ์ด๋ฅผ ์ฐ์ํ๊ฒ ์ฒ๋ฆฌํฉ๋๋ค.
import { Container, injectable, inject, interfaces } from "inversify";
import "reflect-metadata";
const APP_TYPES = {
PaymentProcessor: Symbol.for("IPaymentProcessor"),
OrderService: Symbol.for("IOrderService"),
};
interface IPaymentProcessor {
processPayment(amount: number): Promise<boolean>;
}
@injectable()
class StripePaymentProcessor implements IPaymentProcessor {
async processPayment(amount: number): Promise<boolean> {
console.log(`Processing ${amount} with Stripe...`);
return true;
}
}
@injectable()
class PayPalPaymentProcessor implements IPaymentProcessor {
async processPayment(amount: number): Promise<boolean> {
console.log(`Processing ${amount} with PayPal...`);
return true;
}
}
@injectable()
class OrderService {
constructor(
@inject(APP_TYPES.PaymentProcessor) private paymentProcessor: IPaymentProcessor
) {}
async placeOrder(orderId: string, amount: number, paymentMethod: 'stripe' | 'paypal'): Promise<boolean> {
console.log(`Placing order ${orderId} for ${amount}...`);
const success = await this.paymentProcessor.processPayment(amount);
if (success) {
console.log(`Order ${orderId} placed successfully.`);
} else {
console.log(`Order ${orderId} failed.`);
}
return success;
}
}
const container = new Container();
// Bind Stripe as default
container.bind<IPaymentProcessor>(APP_TYPES.PaymentProcessor).to(StripePaymentProcessor);
// Conditionally bind PayPal if the context requires it (e.g., based on a tag)
container.bind<IPaymentProcessor>(APP_TYPES.PaymentProcessor)
.to(PayPalPaymentProcessor)
.whenTargetTagged("paymentMethod", "paypal");
container.bind<OrderService>(APP_TYPES.OrderService).to(OrderService);
// Scenario 1: Default (Stripe)
const orderServiceDefault = container.get<OrderService>(APP_TYPES.OrderService);
orderServiceDefault.placeOrder("ORD001", 100, "stripe");
// Scenario 2: Request PayPal specifically
// This approach for conditional binding requires the consumer to know about the tag,
// or more commonly, the tag is applied to the consumer's dependency directly.
// A more direct way to get the PayPal processor for OrderService would be:
// Re-binding for demonstration (in a real app, you'd configure this once)
const containerForPayPal = new Container();
containerForPayPal.bind<IPaymentProcessor>(APP_TYPES.PaymentProcessor).to(StripePaymentProcessor);
containerForPayPal.bind<IPaymentProcessor>(APP_TYPES.PaymentProcessor)
.to(PayPalPaymentProcessor)
.when((request: interfaces.Request) => {
// A more advanced rule, e.g., inspect a request-scoped context
return request.parentRequest?.serviceIdentifier === APP_TYPES.OrderService && request.parentRequest.target.name === "paypal";
});
// For simplicity in direct consumption, you might define named bindings for processors
container.bind<IPaymentProcessor>("StripeProcessor").to(StripePaymentProcessor);
container.bind<IPaymentProcessor>("PayPalProcessor").to(PayPalPaymentProcessor);
// If OrderService needs to choose based on its own logic, it would @inject all processors and select
// Or if the *consumer* of OrderService determines the payment method:
const orderContainer = new Container();
orderContainer.bind<IPaymentProcessor>(APP_TYPES.PaymentProcessor).to(StripePaymentProcessor).whenTargetNamed("stripe");
orderContainer.bind<IPaymentProcessor>(APP_TYPES.PaymentProcessor).to(PayPalPaymentProcessor).whenTargetNamed("paypal");
@injectable()
class SmartOrderService {
constructor(
@inject(APP_TYPES.PaymentProcessor) @named("stripe") private stripeProcessor: IPaymentProcessor,
@inject(APP_TYPES.PaymentProcessor) @named("paypal") private paypalProcessor: IPaymentProcessor
) {}
async placeOrder(orderId: string, amount: number, method: 'stripe' | 'paypal'): Promise<boolean> {
console.log(`SmartOrderService placing order ${orderId} for ${amount} via ${method}...`);
if (method === 'stripe') {
return this.stripeProcessor.processPayment(amount);
} else if (method === 'paypal') {
return this.paypalProcessor.processPayment(amount);
}
return false;
}
}
orderContainer.bind<SmartOrderService>(APP_TYPES.OrderService).to(SmartOrderService);
const smartOrderService = orderContainer.get<SmartOrderService>(APP_TYPES.OrderService);
smartOrderService.placeOrder("SMART-001", 150, "paypal");
smartOrderService.placeOrder("SMART-002", 250, "stripe");
์ด๊ฒ์ InversifyJS๊ฐ ์ผ๋ง๋ ์ ์ฐํ๊ณ ํ์ ์์ ํ์ง ๋ณด์ฌ์ฃผ๋ฉฐ, ๋ช ํํ ์๋๋ฅผ ๊ฐ์ง๊ณ ๋ณต์กํ ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ๊ด๋ฆฌํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ๋๊ท๋ชจ์ ์ ์ญ์ ์ผ๋ก ์ก์ธ์ค ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์์ ์ธ ํน์ฑ์ ๋๋ค.
TypeDI
TypeDI๋ ๋ ๋ค๋ฅธ ํ๋ฅญํ TypeScript ์ฐ์ DI ์๋ฃจ์ ์ ๋๋ค. ๋จ์์ฑ๊ณผ ์ต์ํ์ ์์ฉ๊ตฌ์ ์ค์ ์ ๋๋ฉฐ, ๊ธฐ๋ณธ ์ฌ์ฉ ์ฌ๋ก์ ๊ฒฝ์ฐ InversifyJS๋ณด๋ค ๊ตฌ์ฑ ๋จ๊ณ๊ฐ ์ ์ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ๋ํ `reflect-metadata`๋ฅผ ๋ง์ด ์ฌ์ฉํฉ๋๋ค.
์ฃผ์ ๊ธฐ๋ฅ:
- ์ต์ ๊ตฌ์ฑ: ๊ท์น์ ์ํ ๊ตฌ์ฑ(convention over configuration)์ ๋ชฉํ๋ก ํฉ๋๋ค. `emitDecoratorMetadata`๊ฐ ํ์ฑํ๋๋ฉด `@Service()` ๋ฐ `@Inject()`๋ง์ผ๋ก๋ ๊ฐ๋จํ ๊ฒฝ์ฐ๊ฐ ๋ง์ด ์ฐ๊ฒฐ๋ ์ ์์ต๋๋ค.
- ๊ธ๋ก๋ฒ ์ปจํ ์ด๋: ๊ธฐ๋ณธ ์ ์ญ ์ปจํ ์ด๋๋ฅผ ์ ๊ณตํ๋ฏ๋ก ์๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ๋๋ ๋น ๋ฅธ ํ๋กํ ํ์ดํ์ ํธ๋ฆฌํ ์ ์์ง๋ง, ๋๊ท๋ชจ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ๋ช ์์ ์ธ ์ปจํ ์ด๋๊ฐ ๊ถ์ฅ๋ฉ๋๋ค.
- ์๋น์ค ๋ฐ์ฝ๋ ์ดํฐ: `@Service()` ๋ฐ์ฝ๋ ์ดํฐ๋ ํด๋์ค๋ฅผ ์ปจํ ์ด๋์ ์๋์ผ๋ก ๋ฑ๋กํ๊ณ ์์กด์ฑ์ ์ฒ๋ฆฌํฉ๋๋ค.
- ํ๋กํผํฐ ๋ฐ ์์ฑ์ ์ฃผ์ : ๋ ๋ค ์ง์ํฉ๋๋ค.
- ์๋ช ์ฃผ๊ธฐ ๋ฒ์: ํธ๋์ง์ธํธ ๋ฐ ์ฑ๊ธํค์ ์ง์ํฉ๋๋ค.
TypeDI ์์ : ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
import { Service, Inject } from 'typedi';
import "reflect-metadata"; // Required for decorators
interface ICurrencyConverter {
convert(amount: number, from: string, to: string): number;
}
@Service()
class ExchangeRateConverter implements ICurrencyConverter {
private rates: { [key: string]: number } = {
"USD_EUR": 0.85,
"EUR_USD": 1.18,
"USD_GBP": 0.73,
"GBP_USD": 1.37,
};
convert(amount: number, from: string, to: string): number {
const rateKey = `${from}_${to}`;
if (this.rates[rateKey]) {
return amount * this.rates[rateKey];
}
console.warn(`No exchange rate found for ${rateKey}. Returning original amount.`);
return amount; // Or throw an error
}
}
@Service()
class FinancialService {
constructor(@Inject(() => ExchangeRateConverter) private currencyConverter: ICurrencyConverter) {}
calculateInternationalTransfer(amount: number, fromCurrency: string, toCurrency: string): number {
console.log(`Calculating transfer of ${amount} ${fromCurrency} to ${toCurrency}.`);
return this.currencyConverter.convert(amount, fromCurrency, toCurrency);
}
}
// Resolve from the global container
// const financialService = FinancialService.prototype.constructor.length === 0 ? new FinancialService(new ExchangeRateConverter()) : Service.get(FinancialService); // Example for direct instantiation or container get
// More robust way to get from container if using actual service calls
import { Container } from 'typedi';
const financialServiceFromContainer = Container.get(FinancialService);
const convertedAmount = financialServiceFromContainer.calculateInternationalTransfer(100, "USD", "EUR");
console.log(`Converted amount: ${convertedAmount} EUR`);
TypeDI์ `@Service()` ๋ฐ์ฝ๋ ์ดํฐ๋ ๊ฐ๋ ฅํฉ๋๋ค. `@Service()`๋ก ํด๋์ค๋ฅผ ํ์ํ๋ฉด ์ปจํ ์ด๋์ ๋ฑ๋ก๋ฉ๋๋ค. ๋ค๋ฅธ ํด๋์ค(`FinancialService`)๊ฐ `@Inject()`๋ฅผ ์ฌ์ฉํ์ฌ ์์กด์ฑ์ ์ ์ธํ๋ฉด TypeDI๋ `reflect-metadata`๋ฅผ ์ฌ์ฉํ์ฌ `currencyConverter`์ ์ ํ(์ด ์ค์ ์์๋ `ExchangeRateConverter`)์ ๊ฒ์ํ๊ณ ์ธ์คํด์ค๋ฅผ ์ฃผ์ ํฉ๋๋ค. `@Inject`์ ํฉํ ๋ฆฌ ํจ์ `() => ExchangeRateConverter` ์ฌ์ฉ์ ๋๋๋ก ์ํ ์์กด์ฑ ๋ฌธ์ ๋ฅผ ๋ฐฉ์งํ๊ฑฐ๋ ํน์ ์๋๋ฆฌ์ค์์ ์ฌ๋ฐ๋ฅธ ์ ํ ๋ฐ์ฌ๋ฅผ ๋ณด์ฅํ๋ ๋ฐ ํ์ํฉ๋๋ค. ๋ํ ์ ํ์ด ์ธํฐํ์ด์ค์ผ ๋ ๋ ๊น๋ํ ์์กด์ฑ ์ ์ธ์ ํ์ฉํฉ๋๋ค.
TypeDI๋ ๊ธฐ๋ณธ ์ค์ ์ ๋ ๊ฐ๋จํ๊ฒ ๋๊ปด์ง ์ ์์ง๋ง, ๋ช ์์ ์ธ ์ปจํ ์ด๋ ๊ด๋ฆฌ๊ฐ ์ ํธ๋ ์ ์๋ ๋๊ท๋ชจ, ๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ์ ์ญ ์ปจํ ์ด๋ ์ํฅ์ ์ดํดํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
๊ธ๋ก๋ฒ ํ์ ์ํ ๊ณ ๊ธ ๊ฐ๋ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
ํนํ ๊ธ๋ก๋ฒ ๊ฐ๋ฐ ๋งฅ๋ฝ์์ TypeScript DI์ IoC ์ปจํ ์ด๋๋ฅผ ์ง์ ์ผ๋ก ๋ง์คํฐํ๋ ค๋ฉด ์ด๋ฌํ ๊ณ ๊ธ ๊ฐ๋ ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
1. ์๋ช ์ฃผ๊ธฐ ๋ฐ ๋ฒ์ (์ฑ๊ธํค, ํธ๋์ง์ธํธ, ์์ฒญ)
์์กด์ฑ ์๋ช ์ฃผ๊ธฐ ๊ด๋ฆฌ๋ ์ฑ๋ฅ, ๋ฆฌ์์ค ๊ด๋ฆฌ ๋ฐ ์ ํ์ฑ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. IoC ์ปจํ ์ด๋๋ ์ผ๋ฐ์ ์ผ๋ก ๋ค์์ ์ ๊ณตํฉ๋๋ค:
- ํธ๋์ง์ธํธ (๋๋ ๋ฒ์): ์์กด์ฑ์ ์ ์ธ์คํด์ค๋ ์์ฒญ๋ ๋๋ง๋ค ์์ฑ๋ฉ๋๋ค. ์ํ ์ ์ฅ ์๋น์ค ๋๋ ์ค๋ ๋๋ก๋ถํฐ ์์ ํ์ง ์์ ๊ตฌ์ฑ ์์์ ์ด์์ ์ ๋๋ค.
- ์ฑ๊ธํค: ์์กด์ฑ์ ๋จ์ผ ์ธ์คํด์ค๋ง ์ ํ๋ฆฌ์ผ์ด์ ์๋ช ์ฃผ๊ธฐ(๋๋ ์ปจํ ์ด๋ ์๋ช ์ฃผ๊ธฐ) ๋์ ์์ฑ๋ฉ๋๋ค. ์ด ์ธ์คํด์ค๋ ์์ฒญ๋ ๋๋ง๋ค ์ฌ์ฌ์ฉ๋ฉ๋๋ค. ์ํ ์ ์ฅ ์๋น์ค, ๊ตฌ์ฑ ๊ฐ์ฒด ๋๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฐ๊ฒฐ ํ๊ณผ ๊ฐ์ ๋น์ฉ์ด ๋ง์ด ๋๋ ๋ฆฌ์์ค์ ์๋ฒฝํฉ๋๋ค.
- ์์ฒญ ๋ฒ์: (์น ํ๋ ์์ํฌ์์ ์ผ๋ฐ์ ) ๋ค์ด์ค๋ ๊ฐ HTTP ์์ฒญ์ ๋ํด ์ ์ธ์คํด์ค๊ฐ ์์ฑ๋ฉ๋๋ค. ์ด ์ธ์คํด์ค๋ ํด๋น ํน์ ์์ฒญ์ ์ฒ๋ฆฌ ์ ์ฒด์ ์ฌ์ฌ์ฉ๋ฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ํ ์ฌ์ฉ์์ ์์ฒญ ๋ฐ์ดํฐ๊ฐ ๋ค๋ฅธ ์ฌ์ฉ์์ ๋ฐ์ดํฐ๋ก ์ ์ถ๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
์ฌ๋ฐ๋ฅธ ๋ฒ์๋ฅผ ์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๊ธ๋ก๋ฒ ํ์ ์๊ธฐ์น ์์ ๋์์ด๋ ๋ฆฌ์์ค ๊ณ ๊ฐ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ด๋ฌํ ๊ท์น์ ์ค์ํด์ผ ํฉ๋๋ค.
2. ๋น๋๊ธฐ ์์กด์ฑ ํด๊ฒฐ
ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๊ธฐํ(์: ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฐ๊ฒฐ, ์ด๊ธฐ ๊ตฌ์ฑ ๊ฐ์ ธ์ค๊ธฐ)๋ฅผ ์ํด ๋น๋๊ธฐ ์์ ์ ์์กดํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ผ๋ถ IoC ์ปจํ ์ด๋๋ ๋น๋๊ธฐ ํด๊ฒฐ์ ์ง์ํ์ฌ ์ฃผ์ ์ ์ ์์กด์ฑ์ `await`ํ ์ ์์ต๋๋ค.
// Conceptual example with async binding
container.bind<IDatabaseClient>(TYPES.DatabaseClient)
.toDynamicValue(async () => {
const client = new DatabaseClient();
await client.connect(); // Asynchronous initialization
return client;
})
.inSingletonScope();
3. ๊ณต๊ธ์ ํฉํ ๋ฆฌ
๋๋ก๋ ์กฐ๊ฑด๋ถ๋ก ๋๋ ์๋น ์์ ์๋ง ์๋ ค์ง๋ ๋งค๊ฐ๋ณ์๋ก ์์กด์ฑ ์ธ์คํด์ค๋ฅผ ์์ฑํด์ผ ํ ๋๊ฐ ์์ต๋๋ค. ๊ณต๊ธ์ ํฉํ ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์์กด์ฑ์ ์์ฑํ๋ ํจ์๋ฅผ ์ฃผ์ ํ ์ ์์ต๋๋ค.
import { Container, injectable, inject, interfaces } from "inversify";
import "reflect-metadata";
interface IReportGenerator {
generateReport(data: any): string;
}
@injectable()
class PdfReportGenerator implements IReportGenerator {
generateReport(data: any): string {
return `PDF Report for: ${JSON.stringify(data)}`;
}
}
@injectable()
class CsvReportGenerator implements IReportGenerator {
generateReport(data: any): string {
return `CSV Report for: ${Object.keys(data).join(',')}\n${Object.values(data).join(',')}`;
}
}
const REPORT_TYPES = {
Pdf: Symbol.for("PdfReportGenerator"),
Csv: Symbol.for("CsvReportGenerator"),
ReportService: Symbol.for("ReportService"),
};
// The ReportService will depend on a factory function
interface ReportGeneratorFactory {
(format: 'pdf' | 'csv'): IReportGenerator;
}
@injectable()
class ReportService {
constructor(
@inject(REPORT_TYPES.ReportGeneratorFactory) private reportGeneratorFactory: ReportGeneratorFactory
) {}
createReport(format: 'pdf' | 'csv', data: any): string {
const generator = this.reportGeneratorFactory(format);
return generator.generateReport(data);
}
}
const reportContainer = new Container();
// Bind specific report generators
reportContainer.bind<IReportGenerator>(REPORT_TYPES.Pdf).to(PdfReportGenerator);
reportContainer.bind<IReportGenerator>(REPORT_TYPES.Csv).to(CsvReportGenerator);
// Bind the factory function
reportContainer.bind<ReportGeneratorFactory>(REPORT_TYPES.ReportGeneratorFactory)
.toFactory<IReportGenerator>((context: interfaces.Context) => {
return (format: 'pdf' | 'csv') => {
if (format === 'pdf') {
return context.container.get<IReportGenerator>(REPORT_TYPES.Pdf);
} else if (format === 'csv') {
return context.container.get<IReportGenerator>(REPORT_TYPES.Csv);
}
throw new Error(`Unknown report format: ${format}`);
};
});
reportContainer.bind<ReportService>(REPORT_TYPES.ReportService).to(ReportService);
const reportService = reportContainer.get<ReportService>(REPORT_TYPES.ReportService);
const salesData = { region: "EMEA", totalSales: 150000, month: "January" };
console.log(reportService.createReport("pdf", salesData));
console.log(reportService.createReport("csv", salesData));
์ด ํจํด์ ์์กด์ฑ์ ์ ํํ ๊ตฌํ์ด ๋์ ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ฐํ์์ ๊ฒฐ์ ๋์ด์ผ ํ ๋ ๋งค์ฐ ์ ์ฉํ๋ฉฐ, ์ด๋ฌํ ์ ์ฐ์ฑ์๋ ๋ถ๊ตฌํ๊ณ ํ์ ์์ ์ฑ์ ๋ณด์ฅํฉ๋๋ค.
4. DI๋ฅผ ์ฌ์ฉํ ํ ์คํธ ์ ๋ต
DI์ ์ฃผ์ ๋์ธ ์ค ํ๋๋ ํ ์คํธ ์ฉ์ด์ฑ์ ๋๋ค. ํ ์คํธ ํ๋ ์์ํฌ๊ฐ ์ ํํ IoC ์ปจํ ์ด๋์ ์ฝ๊ฒ ํตํฉ๋์ด ์์กด์ฑ์ ํจ๊ณผ์ ์ผ๋ก ๋ชจ์(mock)ํ๊ฑฐ๋ ์คํ (stub)ํ ์ ์๋์ง ํ์ธํ์ญ์์ค. ๋จ์ ํ ์คํธ์ ๊ฒฝ์ฐ ์ข ์ข ํ ์คํธ ์ค์ธ ๊ตฌ์ฑ ์์์ ๋ชจ์ ๊ฐ์ฒด๋ฅผ ์ง์ ์ฃผ์ ํ์ฌ ์ปจํ ์ด๋๋ฅผ ์์ ํ ๊ฑด๋๋๋๋ค. ํตํฉ ํ ์คํธ์ ๊ฒฝ์ฐ ํ ์คํธ๋ณ ๊ตฌํ์ผ๋ก ์ปจํ ์ด๋๋ฅผ ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
5. ์ค๋ฅ ์ฒ๋ฆฌ ๋ฐ ๋๋ฒ๊น
์์กด์ฑ ํด๊ฒฐ์ด ์คํจํ๋ฉด(์: ๋๋ฝ๋ ๋ฐ์ธ๋ฉ ๋๋ ์ํ ์์กด์ฑ) ์ข์ IoC ์ปจํ ์ด๋๋ ๋ช ํํ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ ํํ ์ปจํ ์ด๋๊ฐ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ๋ณด๊ณ ํ๋ ๋ฐฉ๋ฒ์ ์ดํดํ์ญ์์ค. TypeScript์ ์ปดํ์ผ ํ์ ๊ฒ์ฌ๋ ์ด๋ฌํ ์ค๋ฅ๋ฅผ ํฌ๊ฒ ์ค์ด์ง๋ง ๋ฐํ์ ๊ตฌ์ฑ ์ค๋ฅ๋ ์ฌ์ ํ ๋ฐ์ํ ์ ์์ต๋๋ค.
6. ์ฑ๋ฅ ๊ณ ๋ ค ์ฌํญ
IoC ์ปจํ ์ด๋๋ ๊ฐ๋ฐ์ ๋จ์ํํ์ง๋ง ๋ฆฌํ๋ ์ ๋ฐ ๊ฐ์ฒด ๊ทธ๋ํ ์์ฑ๊ณผ ๊ด๋ จ๋ ์ฝ๊ฐ์ ๋ฐํ์ ์ค๋ฒํค๋๊ฐ ์์ต๋๋ค. ๋๋ถ๋ถ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ์ด ์ค๋ฒํค๋๋ ๋ฌด์ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๊ทน๋๋ก ์ฑ๋ฅ์ ๋ฏผ๊ฐํ ์๋๋ฆฌ์ค์์๋ ์ด์ ๊ณผ ์ ์ฌ์ ์ํฅ ๊ฐ์ ๊ท ํ์ ์ ์คํ๊ฒ ๊ณ ๋ คํ์ญ์์ค. ์ต์ JIT ์ปดํ์ผ๋ฌ์ ์ต์ ํ๋ ์ปจํ ์ด๋ ๊ตฌํ์ ์ด๋ฌํ ์ฐ๋ ค์ ๋๋ถ๋ถ์ ์ํํฉ๋๋ค.
์ ์ญ ํ๋ก์ ํธ์ ์ ํฉํ IoC ์ปจํ ์ด๋ ์ ํ
TypeScript ํ๋ก์ ํธ, ํนํ ๊ธ๋ก๋ฒ ๋์ ๋ฐ ๋ถ์ฐ ๊ฐ๋ฐ ํ์ ์ํ IoC ์ปจํ ์ด๋๋ฅผ ์ ํํ ๋ ๋ค์ ์์๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ํ์ ์์ ์ฑ ๊ธฐ๋ฅ: `reflect-metadata`๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํฉ๋๊น? ๊ฐ๋ฅํ ํ ์ปดํ์ผ ํ์์ ํ์ ์ ํ์ฑ์ ๊ฐ์ ํฉ๋๊น?
- ์ฑ์๋ ๋ฐ ์ปค๋ฎค๋ํฐ ์ง์: ํ๋ฐํ ๊ฐ๋ฐ๊ณผ ๊ฐ๋ ฅํ ์ปค๋ฎค๋ํฐ๋ฅผ ๊ฐ์ถ ์ ํ๋ฆฝ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ ๋์ ๋ฌธ์, ๋ฒ๊ทธ ์์ ๋ฐ ์ฅ๊ธฐ์ ์ธ ์์กด ๊ฐ๋ฅ์ฑ์ ๋ณด์ฅํฉ๋๋ค.
- ์ ์ฐ์ฑ: ๋ค์ํ ๋ฐ์ธ๋ฉ ์๋๋ฆฌ์ค(์กฐ๊ฑด๋ถ, ๋ช ๋ช ๋, ํ๊ทธ)๋ฅผ ์ฒ๋ฆฌํ ์ ์์ต๋๊น? ๋ค๋ฅธ ์๋ช ์ฃผ๊ธฐ๋ฅผ ์ง์ํฉ๋๊น?
- ์ฌ์ฉ ํธ์์ฑ ๋ฐ ํ์ต ๊ณก์ : ๋ค์ํ ๊ต์ก ๋ฐฐ๊ฒฝ์ ๊ฐ์ง ์๋ก์ด ํ์์ด ์ผ๋ง๋ ๋นจ๋ฆฌ ์๋ฌํ ์ ์์ต๋๊น?
- ๋ฒ๋ค ํฌ๊ธฐ: ํ๋ก ํธ์๋ ๋๋ ์๋ฒ๋ฆฌ์ค ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฐ์๊ตญ์ด ์์ธ์ด ๋ ์ ์์ต๋๋ค.
- ํ๋ ์์ํฌ ํตํฉ: NestJS(์์ฒด DI ์์คํ ๋ณด์ ), Express ๋๋ Angular์ ๊ฐ์ ์ธ๊ธฐ ์๋ ํ๋ ์์ํฌ์ ์ ํตํฉ๋ฉ๋๊น?
InversifyJS์ TypeDI ๋ชจ๋ TypeScript์ ํ๋ฅญํ ์ ํ์ด๋ฉฐ ๊ฐ๊ฐ ์ฅ์ ์ด ์์ต๋๋ค. ๋ณต์กํ ์์กด์ฑ ๊ทธ๋ํ์ ๋ช ์์ ๊ตฌ์ฑ์ ๋ํ ๋์ ๊ฐ์กฐ๋ฅผ ๊ฐ์ง ๊ฐ๋ ฅํ ์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ InversifyJS๋ ์ข ์ข ๋ ์ธ๋ถํ๋ ์ ์ด๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ท์น๊ณผ ์ต์ํ์ ์์ฉ๊ตฌ๋ฅผ ์ ํธํ๋ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ TypeDI๊ฐ ๋งค์ฐ ๋งค๋ ฅ์ ์ผ ์ ์์ต๋๋ค.
๊ฒฐ๋ก : ํ๋ ฅ ์๊ณ ํ์ ์์ ํ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ
TypeScript์ ์ ์ ํ์ดํ๊ณผ ์ ๊ตฌํ๋ ์์กด์ฑ ์ฃผ์ ์ ๋ต์ IoC ์ปจํ ์ด๋์ ๊ฒฐํฉํ๋ฉด ํ๋ ฅ์ ์ด๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ ๊ณ ๋๋ก ํ ์คํธ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๊ธฐ๋ฐ์ด ๋ง๋ค์ด์ง๋๋ค. ๊ธ๋ก๋ฒ ๊ฐ๋ฐ ํ์ ๊ฒฝ์ฐ ์ด ์ ๊ทผ ๋ฐฉ์์ ๋จ์ํ ๊ธฐ์ ์ ์ ํธ๊ฐ ์๋๋ผ ์ ๋ต์ ํ์ ์์์ ๋๋ค.
์์กด์ฑ ์ฃผ์ ์์ค์์ ํ์ ์์ ์ฑ์ ๊ฐ์ ํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ์ค๋ฅ๋ฅผ ๋ ๋นจ๋ฆฌ ๊ฐ์งํ๊ณ , ์์ ๊ฐ์ ๊ฐ์ง๊ณ ๋ฆฌํฉํ ๋งํ๋ฉฐ, ๋ฐํ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์ด ๊ณ ํ์ง ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ์ด๋ ๋๋ฒ๊น ์๊ฐ ๊ฐ์, ๊ฐ๋ฐ ์ฃผ๊ธฐ ๋จ์ถ, ๊ถ๊ทน์ ์ผ๋ก ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ์์ ์ ์ด๊ณ ๊ฒฌ๊ณ ํ ์ ํ์ผ๋ก ์ด์ด์ง๋๋ค.
์ด๋ฌํ ํจํด๊ณผ ๋๊ตฌ๋ฅผ ์์ฉํ๊ณ , ๋ฏธ๋ฌํ ์ฐจ์ด๋ฅผ ์ดํดํ๊ณ , ์ด๋ฅผ ์ฑ์คํ๊ฒ ์ ์ฉํ์ญ์์ค. ์ฝ๋๋ ๋ ๊นจ๋ํด์ง๊ณ , ํ์ ๋ ์์ฐ์ ์ด ๋ ๊ฒ์ด๋ฉฐ, ์ ํ๋ฆฌ์ผ์ด์ ์ ํ๋ ๊ธ๋ก๋ฒ ์ํํธ์จ์ด ํ๊ฒฝ์ ๋ณต์ก์ฑ๊ณผ ๊ท๋ชจ๋ฅผ ์ฒ๋ฆฌํ ์ ์๋ ๋ ๋์ ์ค๋น๋ฅผ ๊ฐ์ถ๊ฒ ๋ ๊ฒ์ ๋๋ค.
TypeScript ์์กด์ฑ ์ฃผ์ ์ ๋ํ ๊ฒฝํ์ ์ด๋ป์ต๋๊น? ์๋ ๋๊ธ์์ ์ฌ๋ฌ๋ถ์ ํต์ฐฐ๋ ฅ๊ณผ ์ ํธํ๋ IoC ์ปจํ ์ด๋๋ฅผ ๊ณต์ ํ์ญ์์ค!