Community

๐Ÿช“ ํŒจํ„ด ๋งค์นญ ๊ธฐ๋ฒ•์œผ๋กœ ์•ˆ์ „ํ•œ ์กฐ๊ฑด๋ฌธ ์ž‘์„ฑ์„ ๋•๋Š” ts-pattern

- ํŒจํ„ด ๋งค์นญ์„ ์‚ฌ์šฉํ•ด ๋ณต์žกํ•œ ์กฐ๊ฑด์„ ํ•˜๋‚˜์˜ ๊ฐ„๊ฒฐํ•œ ํ‘œํ˜„์œผ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. --- ์ผ๋ฐ˜์ ์ธ ๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ๋Š” if, else, switch ๋“ฑ์˜ ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์กฐ๊ฑด๋ฌธ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ์ฒด์˜ ์†์„ฑ์ด๋‚˜ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ฒดํฌํ•ด์•ผ ํ•˜๋Š” ๋กœ์ง์ด ๊นŠ์–ด์ง€๊ฑฐ๋‚˜, ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด ์–ด๋ ค์›Œ ์งˆ์ˆ˜๋ก ์ฝ”๋“œ๊ฐ€ ์žฅํ™ฉํ•ด์ง‘๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐ€๋…์„ฑ์„ ํ•ด์น˜๊ณ  ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์–ด๋ ต๊ฒŒ ๋งŒ๋“œ๋Š” ์š”์†Œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋‹จ์ ์„ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด ์ œ์•ˆ๋œ ts-pattern์€ TypeScript๋ฅผ ํ™œ์šฉํ•œ ํŒจํ„ด ๋งค์นญ(pattern match) ๊ธฐ๋ฒ•์œผ๋กœ ์กฐ๊ฑด๋ฌธ ์ž‘์„ฑ์„ ๋„์™€์ค๋‹ˆ๋‹ค. ํŒจํ„ด ๋งค์นญ์ด๋ž€ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ์•ˆ์ „ํ•˜๊ณ  ์งง์€ ์ฝ”๋“œ๋กœ ์กฐ๊ฑด ๋ถ„๊ธฐ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ฌ์šฉ๋ฒ•์„ ์„ค๋ช…ํ•ด๋ณด์ž๋ฉด, ์šฐ์„  match ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ํ‰๊ฐ€ํ•  ๊ฐ’์„ ๋„˜๊น๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ๋ฉ”์„œ๋“œ ์ฒด์ด๋‹์„ ํ†ตํ•ด with, when, exhaustive ๋“ฑ์˜ ํ•จ์ˆ˜๋ฅผ ๋ง๋ถ™์ผ ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. with๋Š” ๋‘ ๊ฐœ์˜ ์ธ์ž๋ฅผ ๋ฐ›๋Š”๋ฐ, ์ฒซ ๋ฒˆ์งธ ์ธ์ž๊ฐ€ ๋งค์นญํ•  ํŒจํ„ด, ๋‘ ๋ฒˆ์งธ ์ธ์ž๊ฐ€ ์ฝœ๋ฐฑ์ž…๋‹ˆ๋‹ค. ํ‰๊ฐ€ํ•  ๊ฐ’์ด ํŒจํ„ด์˜ ๋ถ€๋ถ„ ์ง‘ํ•ฉ์„ ๋งŒ์กฑ์‹œํ‚จ๋‹ค๋ฉด ์ฝœ๋ฐฑ์ด ์‹คํ–‰๋˜๋Š” ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. ์„ค๋ช…์ด ๊ธฐ๋‹ˆ๊นŒ ์ฝ”๋“œ๋กœ ๋ณด์‹œ๋Š” ๊ฒŒ ๋‚ซ๊ฒ ๋„ค์š”. const html = match(result) .with({ type: 'error' }, () => Oups! An error occured) .with({ type: 'ok', data: { type: 'text' } }, (res) => {res.data.content}) .with({ type: 'ok', data: { type: 'img', src: P.select() } }, (src) => ) .exhaustive(); ์œ„ ์˜ˆ์‹œ ์™ธ์—๋„ ๋” ๋ณต์žกํ•œ ํŒจํ„ด์— ๋Œ€ํ•œ ๋Œ€์‘๋„ ๊ฐ€๋Šฅํ•˜๊ณ , TypeScript ์ฝ”๋“œ์ด๋‹ค ๋ณด๋‹ˆ TSX ๋‚ด์—์„œ๋„ ํ™œ์šฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์ผํ•˜๊ณ  ์žˆ๋Š” ํŒ€์—์„œ๋„ ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์ข€ ๋” ๊ฐ€๋…์„ฑ ์ข‹์€ ์กฐ๊ฑด๋ฌธ์„ ์ž‘์„ฑํ•˜๋ ค๊ณ  ๋…ธ๋ ฅ ์ค‘์ž…๋‹ˆ๋‹ค. ํ˜น์‹œ๋ผ๋„ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ์˜ ์šฐ์•„ํ•œ ์กฐ๊ฑด๋ฌธ ๋ถ„๊ธฐ์— ๋Œ€ํ•œ ๋ฐฉ๋ฒ•์„ ๊ณ ๋ฏผ ์ค‘์ด์‹  ๋ถ„์ด๋ผ๋ฉด, ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋„์ž…์„ ํ•œ ๋ฒˆ ๊ณ ๋ คํ•ด๋ณด์„ธ์š”. https://github.com/gvergnaud/ts-pattern

์•Œ๋ฆผ

์•Œ๋ฆผ์ด ์—†์Šต๋‹ˆ๋‹ค