๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒฑ๊ธฐํƒ€

๊ธ€๋˜ 10๊ธฐ ๋‹ค์ง๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š”! ๊ธ€๋˜ 10๊ธฐ์— ํ•ฉ๊ฒฉํ•œ ํ›„ ์ฒซ ๊ธ€์ž…๋‹ˆ๋‹ค. ใ…Žใ…Ž

0. ๊ธ€๋˜๋ž€

 

๊ธ€๋˜์˜ ๋งˆ์ง€๋ง‰ ๊ธฐ์ˆ˜์ธ 10๊ธฐ๋ฅผ ์ œ๊ฐ€ ์•„์ฃผ ์ข‹์•„ํ•˜๋Š” ์นœ๊ตฌ ๋•์— ์‹ ์ฒญํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ์šฐํ•˜ํ•˜, ์ข‹์€ ๊ธฐํšŒ๋ฅผ ์•Œ๋ ค์ค˜์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ใ…ˆใ…Ž๋‹˜ ๐Ÿ˜Š.

๊ธ€๋˜๋Š” ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ชจ์—ฌ ํ•จ๊ป˜ ๊ธ€์„ ์“ฐ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ ์ž…๋‹ˆ๋‹ค. https://geultto.github.io/ ๋งํฌ์— ๊ฐ€๋ฉด ์ข€ ๋” ์ž์„ธํ•œ ์„ค๋ช…์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ์—๋Š” ์•ฝ 600๋ช…์˜ ๊ฐœ๋ฐœ์ž์™€ PM ์ง๊ตฐ์ด ๋ชจ์˜€๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ •๋ง ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์ด ๊ณ„์…”์„œ ๋‘๊ทผ๋‘๊ทผํ•˜๋„ค์š”. ์ „๋ถ€ ๋‹ค ๋งŒ๋‚˜๋ณผ ์ˆ˜๋Š” ์—†์ง€๋งŒ 5๋ช…์ •๋„๋Š” ์ƒˆ๋กœ์šด ๊ฐœ๋ฐœ์ž๋ถ„์„ ์•Œ๊ฒŒ ๋œ๋‹ค๋ฉด ์ข‹๊ฒ ์–ด์š”.

๊ธ€๋˜๋Š” 6๊ฐœ์›”๊ฐ„ 2์ฃผ์— ํ•œ๋ฒˆ์”ฉ ๊ธ€์„ ์˜ฌ๋ ค์•ผ ํ•˜๋Š”๋ฐ, ์ž˜ ์˜ฌ๋ฆด ์ˆ˜ ์žˆ์„์ง€ ๊ฑฑ์ •์ด๋„ค์š”. ์š”์ฆ˜ ํ‡ด๊ทผํ•˜๋ฉด ๋งŒ์‚ฌ๊ฐ€ ๋‹ค ๊ท€์ฐฎ์•„์š”. ์ฒ˜์Œ ๋ชฉํ‘œ๋Š” 12๊ฐœ์˜ ๊ธ€์„ ํŒจ์Šค์—†์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด์—ˆ์ง€๋งŒ ์•„๋ฌด๋ž˜๋„ ํ•œ ๊ฐœ๋Š” ์จ์•ผํ•  ๊ฒƒ ๊ฐ™์•„์š”. (ํŒจ์Šค๊ถŒ ์“ฐ๊ณ  ์—ฌํ–‰๊ฐ€๋ ค๊ตฌ์š”~๐Ÿ˜†)

1. ๊ธ€๋˜์—์„œ ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ

์‹ค์€ ์ƒˆ๋กœ์šด ์‚ฌ๋žŒ๋“ค์„ ๋งŒ๋‚˜๋ณด๊ณ  ์‹ถ์–ด์„œ ์ปคํ”ผ์ฑ—์„ ํ•˜๊ณ ์‹ถ์€๋ฐ, ์˜ˆ์ „๋งŒํผ (42์„œ์šธํ•  ๋•Œ๋งŒํผ?) ์ ๊ทน์ ์ด์–ด์ง€์ง€๊ฐ€ ์•Š๋„ค์š”. ๊ทธ ์‚ฌ์ด์— ๋Š™์€ ๊ฑด๊ฐ€.. ๊ทธ๋ฆฌ๊ณ  ๊ธ€๋˜์˜ ๋ฐฉํƒˆ์ถœ ์†Œ๋ชจ์ž„์„ ๋“ค์–ด๊ฐ”์Šต๋‹ˆ๋‹ค. ์•„์ง ํ•œ๋งˆ๋””๋„ ํ•˜์ง€ ์•Š์•˜์–ด์š”. ํšŒ์‚ฌ ๋ฐฉํƒˆ์ถœ ๋™ํ˜ธํšŒ ๋“ค์–ด๊ฐ€๋ คํ–ˆ๋Š”๋ฐ ์‚ฌ๋žŒ์ด ๋งŽ์•„์„œ ์‹ ๊ทœํšŒ์› ์•ˆ ๋ฐ›๋”๋ผ๊ตฌ์š”. ๊ทธ๋ž˜์„œ ๊ธ€๋˜์—์„œ ์—ด์‹ฌํžˆ ์ฐธ์—ฌํ•ด๋ณผ๊นŒํ•ฉ๋‹ˆ๋‹ค. 77ใ…‘ ์š”์ฆ˜ ๊ถ๋”ฉ์ด๊ฐ€ ๋ฌด๊ฑฐ์›Œ์ ธ์„œ ์—ฌ๊ธฐ์ €๊ธฐ ์˜๋‹ค๋‹ˆ์ง€๋ฅผ ๋ชปํ•ฉ๋‹ˆ๋‹ค. ๊ธ€๋˜๋ฅผ ๊ณ„๊ธฐ๋กœ ์ œ ์—‰๋ฉ์ด๊ฐ€ ์ข€ ๊ฐ€๋ฒผ์›Œ์ง€๋ฉด ์ข‹๊ฒ ๋„ค์š”.

2. ๊ธ€๋˜์—์„œ ์“ฐ๊ณ ์‹ถ์€ ๊ธ€

์ด์ œ ํšŒ์‚ฌ์—์„œ ์กฐ๊ธˆ์”ฉ ์ผ์„ ๋งก๊ณ  ์žˆ๋Š”๋ฐ, ๋ชจ๋ฅด๋Š” ๊ฒŒ ๋„ˆ๋ฌด ๋งŽ๋‹ค๊ณ  ๋Š๊ปด์ง‘๋‹ˆ๋‹ค.

๋ฌด์—‡๋ณด๋‹ค...! Angular์˜ 'A'๋„ ๋ชจ๋ฅด๋Š” ๊ฒƒ ๊ฐ™์€ ๋Š๋‚Œ์ด ๋“ค์–ด์š”. (๊ทธ๋ฆฌ๊ณ  RxJS๋„)

์ผ์„ ํ•˜๊ณ  ์žˆ๊ธดํ•œ๋ฐ, ๋ƒ…๋‹ค ๋งŒ๋“ค๊ธฐ๋งŒ ํ•˜๋Š” ์‚ฌ๋žŒ์ด ๋œ ๊ธฐ๋ถ„์ž…๋‹ˆ๋‹ค. ์–ผ๋งˆ์ „์—๋Š” ํƒœ์–ด๋‚˜์„œ ์ฒ˜์Œ์œผ๋กœ Sentry๋ฅผ ์จ๋ดค์–ด์š”. ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์„ ์„ธํŒ…ํ•˜๋ ค๋Š”๋ฐ, Sentry๊ฐ€ ๋„ˆ๋ฌด ์˜›๋‚  ๋ฒ„์ „์ด์–ด์„œ ์—…๋ฐ์ดํŠธ๋„ ํ•ด์•ผํ•˜๋”๋ผ๊ตฌ์š”. '์•„์ง ์ˆ˜์Šต๋”ฐ๋ฆฌ์ธ ๋‚ด๊ฐ€ ์ด๋ ‡๊ฒŒ ๋ง‰ ๋ฐ”๊ฟ”๋„ ๋˜๋‚˜..?' ํ•˜๋Š” ์ƒ๊ฐ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•ด์„œ ์ž์‹ ๊ฐ์„ ๊ฐ–๊ณ  ์ผํ•˜๊ณ  ์‹ถ๋„ค์š”.

 

๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋ฐฐ์šด ๊ฒƒ๋“ค์„ ์ž˜ ์ •๋ฆฌํ•ด์„œ ๋ธ”๋กœ๊ทธ์— ์ž‘์„ฑํ•˜๋ ค๊ณ  ํ•ด์š”.

์“ฐ๊ณ ์‹ถ์€ ๊ธ€์„ ๋ช‡๊ฐœ ์ ์–ด๋ณด์ž๋ฉด

  • Angular Change Detection Strategy
  • Angular Component Life Cycle
  • RxJS Observable ๊ฐ„๋‹จ ๊ตฌํ˜„ํ•ด๋ณด๊ธฐ
  • NgRx ๊ด€๋ จํ•œ ๊ธ€
  • ...

๋“ฑ๋“ฑ~ ์•ต๋ฆฐ์ด์˜ ์„ฑ์žฅ์„ ์œ„ํ•œ ๊ธ€์„ ์ ์„ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค!

3. ๋งˆ๋ฌด๋ฆฌ

๊ธ€์„ ์“ฐ๊ธฐ ์œ„ํ•ด์„œ๋ผ๋„ ํ‡ด๊ทผ ํ›„ ๊ณต๋ถ€๋ฅผ ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•„ ๊ธฐ์ฉ๋‹ˆ๋‹ค.๐Ÿ˜‚  ์ผํ•˜๋ฉด์„œ ๋…ธ์…˜์— ๋Œ€์ถฉ ์จ๋‘” ๊ธ€๋“ค์„ ์ž˜ ์ •๋ฆฌํ•ด์•ผ๊ฒ ์–ด์š”.

๊ธ€๋˜๋ฅผ ํ†ตํ•ด์„œ 6๊ฐœ์›” ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ์ œ ๋ชจ์Šต์ด ๊ธฐ๋Œ€๋˜๋„ค์š”.. 6๊ฐœ์›”์ด ์ง€๋‚˜๊ณ ๋„ ๊ณ„์†ํ•ด์„œ ๊ธ€ ์“ฐ๋Š” ์Šต๊ด€์„ ์–ป๋Š”๋‹ค๋ฉด ์ด ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ํ†ตํ•ด ์–ป์„ ์ˆ˜ ์žˆ๋Š” ๊ฐ€์žฅ ํฐ ์ˆ˜ํ™•์ผ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์•„์ž์•„์ž!