2. TSyringe

์‹ค์Šต ๋ ˆํฌ

TypeScript์šฉ DI ๋„๊ตฌ(IoC Container). (์˜์กด์„ฑ ์ฃผ์ž…)

External Store๋ฅผ ๊ด€๋ฆฌํ•˜๋Š”๋ฐ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. React ์ปดํฌ๋„ŒํŠธ ์ž…์žฅ์—์„œ๋Š” โ€œ์ „์—ญโ€์ฒ˜๋Ÿผ ์—ฌ๊ฒจ์ง„๋‹ค.

โ€œProp Drillingโ€ ๋ฌธ์ œ๋ฅผ ์šฐ์•„ํ•˜๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜(React๋กœ ํ•œ์ •ํ•˜๋ฉด Context๋„ ์“ธ ์ˆ˜ ์žˆ๋‹ค).

์ปจํ…์ŠคํŠธ๋ณด๋‹ค ํšจ์œจ์ ์ด๋ผํ•จ.

์„ค์น˜

npm i tsyringe reflect-metadata

core-js, reflection๋“ฑ์„ reflect-metadata ๋Œ€์‹  ์“ธ์ˆ˜๋„ ์žˆ๋‹ค.

์‹ฑ๊ธ€ํ†ค์œผ๋กœ ๊ด€๋ฆฌํ•  CounterStore ํด๋ž˜์Šค๋ฅผ ์ค€๋น„:

import { singleton } from "tsyringe";

@singleton() // ์ด๋Ÿฐ ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ ์จ์ฃผ๋ ค๋ฉด tsconfig.json ์—์„œ ์•„๋ž˜ ๋‘๊ฐœ ์ฃผ์„์„ ํ‘ผ๋‹ค.
// "experimentalDecorators" : true,
// "emitDecoratorMetadata" : true
class CounterStore {
  // โ€ฆ(์ค‘๋žต)...
}

์‹ฑ๊ธ€ํ†ค CounterStore ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉ:

import { container } from "tsyringe";

const counterStore = container.resolve(CounterStore);

sington (์‹ฑ๊ธ€ํ†ค)

๊ฐ์ฒด์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ์˜ค์ง 1๊ฐœ๋งŒ ์ƒ์„ฑ๋˜๋Š” ํŒจํ„ด์„ ์˜๋ฏธํ•œ๋‹ค.

ํ•˜๋‚˜์˜ external store๋ฅผ ์—ฌ๋Ÿฌ๊ณณ์—์„œ ๋ถˆ๋Ÿฌ ์“ฐ๋Š” ๊ฐœ๋…. ๊ฐ’์ด๋‚˜ ๋ฉ”์„œ๋“œ๋ฅผ ๊ณต์œ ํ•จ.

singleton์„ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

  1. ๋ฉ”๋ชจ๋ฆฌ

์ตœ์ดˆ ํ•œ๋ฒˆ์˜ new ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋œ ๊ณ ์ •๋œ ๋ฉ”๋ชจ๋ฆฌ ์˜์—ญ์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ถ”ํ›„ ํ•ด๋‹น ๊ฐ์ฒด์— ์ ‘๊ทผํ•  ๋•Œ ๋ฉ”๋ชจ๋ฆฌ ๋‚ญ๋น„๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ด๋ฏธ ์ƒ์„ฑ๋œ ์ธ์Šคํ„ด์Šค๋ฅผ ํ™œ์šฉํ•˜๋‹ˆ ์†๋„ ์ธก๋ฉด์—์„œ๋„ ์ด์ ์ด ์žˆ๋‹ค.

  1. ํด๋ž˜์Šค ๊ฐ„์— ๋ฐ์ดํ„ฐ ๊ณต์œ ๊ฐ€ ์‰ฝ๋‹ค.

๋‹จ์ 

  1. ์ฝ”๋“œ ์ž์ฒด๊ฐ€ ๋งŽ์ด ํ•„์š”ํ•˜๋‹ค. ์•ž์„œ ์†Œ๊ฐœํ•œ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•์™ธ์—๋„ ์ •์  ํŒฉํ† ๋ฆฌ ๋ฉ”์„œ๋“œ์—์„œ ๊ฐ์ฒด ์ƒ์„ฑ์„ ํ™•์ธํ•˜๊ณ  ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒฝ์šฐ์—

๋ฉ€ํ‹ฐ์Šค๋ ˆ๋”ฉ ํ™˜๊ฒฝ์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋™์‹œ์„ฑ ๋ฌธ์ œ ํ•ด๊ฒฐ์„ ์œ„ํ•ด syncronized ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

  1. ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์–ด๋ ต๋‹ค.

์‹ฑ๊ธ€ํ†ค ์ธ์Šคํ„ด์Šค๋Š” ์ž์›์„ ๊ณต์œ ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ…Œ์ŠคํŠธ๊ฐ€ ๊ฒฐ์ •์ ์œผ๋กœ ๊ฒฉ๋ฆฌ๋œ ํ™˜๊ฒฝ์—์„œ ์ˆ˜ํ–‰๋˜๋ ค๋ฉด ๋งค๋ฒˆ ์ธ์Šคํ„ด์Šค์˜ ์ƒํƒœ๋ฅผ ์ดˆ๊ธฐํ™”์‹œ์ผœ์ฃผ์–ด์•ผ ํ•œ๋‹ค.

๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์—์„œ ์ƒํƒœ๋ฅผ ๊ณต์œ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ…Œ์ŠคํŠธ๊ฐ€ ์˜จ์ „ํ•˜๊ฒŒ ์ˆ˜ํ–‰๋˜์ง€ ๋ชปํ•œ๋‹ค.

์ด์™ธ์—๋„ ์ž์‹ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค์ˆ˜ ์—†๋‹ค๋Š” ์ ๊ณผ, ๋‚ด๋ถ€ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์–ด๋ ต๋‹ค๋Š” ์  ๋“ฑ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฌธ์ œ๋“ค์ด ์กด์žฌํ•œ๋‹ค.

๊ฒฐ๊ณผ์ ์œผ๋กœ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋“ค์„ ์•ˆ๊ณ ์žˆ๋Š” ์‹ฑ๊ธ€ํ†ค ํŒจํ„ด์€ ์œ ์—ฐ์„ฑ์ด ๋งŽ์ด ๋–จ์–ด์ง€๋Š” ํŒจํ„ด์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

์˜ค์ง ํ•œ ๊ฐœ์˜ ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ์„ ๋ณด์ฆํ•˜์—ฌ ํšจ์œจ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์ง€๋งŒ ๊ทธ์— ๋ชป์ง€๋งŽ๊ฒŒ ์ˆ˜๋ฐ˜๋˜๋Š” ๋ฌธ์ œ์ ๋„ ๋งŽ๋‹ค.

์‹ฑ๊ธ€ํ†ค ํŒจํ„ด์€ ์•ˆํ‹ฐํŒจํ„ด์œผ๋กœ ๋ถˆ๋ฆด ๋งŒํผ ๋‹จ๋…์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๊ฐ์ฒด ์ง€ํ–ฅ์— ์œ„๋ฐ˜๋˜๋Š” ์‚ฌ๋ก€๊ฐ€ ๋งŽ๋‹ค.

Last updated