github-blog.png


โœ๏ธ Today I Learned


  • TypeScript๋ฅผ ๊ธฐ๋ณธ ์–ธ์–ด๋กœ ์ฑ„ํƒํ•˜์—ฌ ๊ตฌ์„ฑ๋œ NestJS ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ๊ณต์‹๋ฌธ์„œ์—์„œ๋Š” Type Check๋ฅผ ์œ„ํ•ด DTO ์‚ฌ์šฉ์„ ์•ˆ๋‚ดํ•˜๊ณ  ์žˆ๋‹ค.

  • ๊ณต์‹๋ฌธ์„œ๋ฅผ ํ† ๋Œ€๋กœ DTO๋ฅผ ์™œ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์ฐพ์•„๋ณด๋Š” ๊ทธ ๊ณผ์ •์—์„œ Interface์™€์˜ ์ฐจ์ด์ ์„ ๊ฐ„๋‹จํžˆ ์•Œ์•„๋ณด์•˜๋‹ค.



1. DTO (Data Transfer Object)


  • ์šฐ์„  DTO๋ž€ **๊ณ„์ธต***๊ฐ„ ๋ฐ์ดํ„ฐ ๊ตํ™˜์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๊ฐ์ฒด์ด๋‹ค.

    ๊ณ„์ธต์ด๋ž€?

    ํŒจํ„ด๋งˆ๋‹ค ๋‹ค๋ฅด๊ฒŒ ํ‘œํ˜„๋œ๋‹ค.

    Repository ํŒจํ„ด์—์„œ๋Š” Controller, Service, Repository๋ฅผ ๊ฐ๊ฐ ๊ณ„์ธต์ด๋ผ ์นญํ•˜๋ฉฐ, MVC ํŒจํ„ด์—์„œ๋Š” Model, View, Controller์˜ ๊ณ„์ธต์ด ์กด์žฌํ•œ๋‹ค.

  • ๊ณ„์ธต๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›์„ ๋•Œ ์–ด๋–ค ๋ชจ์–‘์˜ ๋ฐ์ดํ„ฐ ๊ฐ์ฒด๋กœ ์ฃผ๊ณ  ๋ฐ›์„์ง€๋ฅผ DTO์—์„œ ๊ฒฐ์ •ํ•˜๊ฒŒ ๋˜๋ฏ€๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์„ค๊ณ„ํ• ๋•Œ ์ตœ์šฐ์„ ์œผ๋กœ ๊ณ ๋ ค๋˜์•ผ ํ•  ์š”์†Œ์ด๋‹ค.

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

  • ๋˜ํ•œ, ํƒ€์ž…์„ ์ฒดํฌํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ DTO์™ธ์— Interface๊ฐ€ ์กด์žฌํ•˜๋ฉฐ ์ด๋Š” ์•„๋ž˜์—์„œ ๋‹ค์‹œ ์„ค๋ช…ํ•˜๊ฒ ๋‹ค.



2. Interface


  • ๊ฐ„๋‹จํ•˜๊ฒŒ ์„ค๋ช…ํ•˜์ž๋ฉด ์ธํ„ฐํŽ˜์ด์Šค๋Š” TypeScript์—์„œ ๋ณ€์ˆ˜, ํ•จ์ˆ˜, ํด๋ž˜์Šค์˜ ํƒ€์ž… ์ฒดํฌ๋ฅผ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋ฉฐ ๋ณด๊ธฐ์—๋Š” ํด๋ž˜์Šค์™€ ์œ ์‚ฌํ•˜์ง€๋งŒ ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ณ  ๋ชจ๋“  ๋ฉ”์†Œ๋“œ๋Š” ์ถ”์ƒ ๋ฉ”์†Œ๋“œ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.

  • ๋˜ํ•œ โ€œES6์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๊ณ  TypeScript์—์„œ๋งŒ ์ง€์›ํ•œ๋‹ค.โ€

  • ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ์ฒดํฌํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋Šฅ์ ์ธ ๋ฉด๋ชจ๋กœ์จ๋Š” DTO์™€ ๋™์ผํ•˜์ง€๋งŒ ์œ„์—์„œ ๊ฐ•์กฐํ•œ๊ฒƒ ์ฒ˜๋Ÿผ ES6์—์„œ๋Š” ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ฐจ์ด์ ์ด ์žˆ๋‹ค.



3. Why DTO?


  • ์œ„ ์งˆ๋ฌธ์˜ ํ•ด๋‹ต์€ NestJS ๊ณต์‹๋ฌธ์„œ(Request payloads ๋ถ€๋ถ„)์—์„œ๋Š” ์™œ DTO๋กœ ์•ˆ๋‚ดํ•˜๋Š”์ง€ ์„ค๋ช…์ด ์ž์„ธํžˆ ์•ˆ๋‚ด๋˜์–ด ์žˆ๋‹ค.

    แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-24 แ„‹แ…ฉแ„’แ…ฎ 10 11 12

    ์œ„ ๋‚ด์šฉ์„ ์œ„ Interface๋ฅผ ์„ค๋ช…ํ–ˆ๋˜ ๋‚ด์šฉ๊ณผ ๋ง๋ถ™ํ˜€ ๊ฐ„๋žตํžˆ ์ค„์ด์ž๋ฉด TypeScript์˜ ํด๋ž˜์Šค๋Š” JavaScript ES6 ํ‘œ์ค€์„ ๋”ฐ๋ฅด๋ฏ€๋กœ TypeScript๋กœ ์ž‘์„ฑ๋˜์—ˆ์ง€๋งŒ ์ปดํŒŒ์ผ ๋œ JavaScript์—์„œ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋Š” ์ปดํŒŒ์ผ ๋„์ค‘ ์ œ๊ฑฐ๋˜๋ฏ€๋กœ(Interface๋Š” ES6 ํ‘œ์ค€์ด ์•„๋‹ˆ๋ฏ€๋กœ) NestJS์—์„œ ๋Ÿฐํƒ€์ž„์— ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๊ฒŒ๋œ๋‹ค.

  • ๋”ฐ๋ผ์„œ NestJS์—์„œ๋Š” ๋Ÿฐํƒ€์ž„ ์ดํ›„ Input๊ฐ’์— ๋Œ€ํ•œ ์œ ํšจ์„ฑ ๊ฒ€์ฆ์ด๋ผ๋˜์ง€ ๊ทธ ์™ธ์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ์ง€์†์ ์œผ๋กœ ์ถ”์ ํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ DTO๋Š” Class๋กœ ์ž‘์„ฑ๋˜๊ธฐ์— ES6 ํ‘œ์ค€์ด๋ฏ€๋กœ ์ฐธ์กฐ๊ฐ€ ๊ฐ€๋Šฅ ํ•˜์ง€๋งŒ, Interface๋Š” ES6 ํ‘œ์ค€ ๋ฌธ๋ฒ•์ด ์•„๋‹ˆ๋ฏ€๋กœ ์ œ๊ฑฐ๋˜๊ธฐ์— ์ฐธ์กฐํ•  ์ˆ˜ ์—†๊ฒŒ๋œ๋‹ค.



๐Ÿค” Understanding

  • ๊ทธ๋ƒฅ ํ•™์Šตํ•œ ๋Œ€๋กœ ์Šต๊ด€์ ์œผ๋กœ DTO๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค ๋ถˆํ˜„๋“ฏ ๋– ์˜ค๋ฅธ ๊ถ๊ธˆ์ฆ์ธ โ€œํด๋ž˜์Šค ๋ฌธ๋ฒ•์œผ๋กœ ์ƒ์„ฑ๋˜์ง€๋งŒ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ๋„ ์•„๋‹ˆ๊ณ .. ๋‹จ์ˆœ ํƒ€์ž… ๊ฒ€์ฆ๋งŒ์„ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š”๊ฒŒ ์•„๋‹Œ๊ฐ€? ๊ทธ๋Ÿผ ์ธํ„ฐํŽ˜์ด์Šค๋ž‘ ๋‹ค๋ฅธ๊ฒŒ ๋ฌด์—‡์ด์ง€?โ€ ๋ผ๋Š” ์˜๋ฌธ์ ์—์„œ ์ฐพ์•„๋ณด๋‹ˆ ์ด์™€๊ฐ™์€ ๊ฒฐ๋ก ์— ๋„๋‹ฌํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

  • NestJS ๊ณต์‹ ๋ฌธ์„œ๋Š” ๋Œ€๋‹จํ•˜๋‹ค.

    ๋ชจ๋“  ๊ถ๊ธˆ์ฆ์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด ์ด๋ฏธ ๋ชจ๋‘ ๊ธฐ์žฌ๋˜์–ด ์žˆ์—ˆ๋‹ค. (๋‚ด๊ฐ€ ์ฐพ์•„๋ณด์งˆ ์•Š์•˜์„ ๋ฟโ€ฆ)

  • ์ง€๊ธˆ์€ ํ”„๋กœ์ ํŠธ ํ•œ์ฐฝ์ด๋ผ ๋„ˆ๋ฌด ๋ฐ”์˜๊ณ , ์–ด๋А์ •๋„ ์•ˆ์ •๋˜๋ฉด ๊ณต์‹๋ฌธ์„œ ์ •์ฃผํ–‰์„ ํ•œ๋ฒˆ ํ•ด์•ผ๊ฒ ๋‹ค.