The 5th Generation

โฐ 2024-06-01 (ํ† ) 04:42:22

screener

Table of Contents

  • 1. 5๋ฒˆ ์งธ ๋ฆฌ๋‰ด์–ผ








5๋ฒˆ ์งธ ๋ฆฌ๋‰ด์–ผ

5๋ฒˆ ์งธ ๋ธ”๋กœ๊ทธ ๋ฆฌ๋‰ด์–ผ์ด๋‹ค. 4๋ฒˆ ์งธ ๋ฆฌ๋‰ด์–ผ์ด 23๋…„ 9์›”์ด๋‹ˆ, ๋ฐ˜ ๋…„๋งŒ์— ๋‹ค์‹œ ํ•œ ๋ฒˆ ๋Œ€๊ณต์‚ฌ๋ฅผ ์ˆ˜ํ–‰ํ–ˆ๋‹ค.

4๋ฒˆ ์งธ ๋ธ”๋กœ๊ทธ๋Š” ๋ธ”๋กœ๊ทธ์˜ UI ๊ฐœ์„  ๋ฐ ํ—ˆ์ˆ ํ•œ ์ฝ”๋“œ์˜ ๋ณด์™„์ด์˜€๋‹ค๋ฉด, 5๋ฒˆ ์งธ๋Š” ํ”„๋กœ์ ํŠธ์˜ ์ „๋ฐ˜์ ์ธ ๊ตฌ์กฐ ๊ฐœ์„  ๋ฐ ํ†ตํ•ฉ์„ ํ†ตํ•œ ๊ณ ๋„ํ™”๋ฅผ ์ค‘์ ์œผ๋กœ ์ˆ˜ํ–‰ํ–ˆ๋‹ค.

์ฃผ์š” ๊ฐœ์„ ์ ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  1. ๋ชจ๋…ธ๋ ˆํฌ ๋„์ž…
  2. ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ์žฌ์„ค๊ณ„
  3. ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ฐœ์„ ์„ ํ†ตํ•œ UI/UX ๊ณ ๋„ํ™”

์•ž์„œ ์ง„ํ–‰ํ•œ ๋ฆฌ๋‰ด์–ผ์— ๋น„ํ•ด, ์ด๋ฒˆ ๋ฆฌ๋‰ด์–ผ์€ ๊ฐœ๋ฐœ์ž์˜ ๊ด€์ ์—์„œ ํ›จ์”ฌ ๋†’์€ ์ˆ˜์ค€์˜ ๊ฐœ์„ ์ด ์ด๋ฃจ์–ด์กŒ๋‹ค.

1. ๋ชจ๋…ธ๋ ˆํฌ ๋„์ž…

์ฒซ ๋ฒˆ์งธ๋กœ, ํ”„๋กœ์ ํŠธ์— ๋ชจ๋…ธ๋ ˆํฌ๋ฅผ ๋„์ž…ํ–ˆ๋‹ค. ์†Œํ”„ํŠธ์›จ์–ด ์•„ํ‚คํ…์ณ์—์„œ ํ”„๋กœ์ ํŠธ ๊ด€๋ฆฌ ๋ฐฉ์‹์€ ํฌ๊ฒŒ ์„ธ ๊ฐ€์ง€๋กœ ๊ตฌ๋ถ„๋˜๋ฉฐ, ๊ฐ๊ฐ ๋ชจ๋†€๋ฆฌ์Šค(Monolith), ๋ฉ€ํ‹ฐ๋ ˆํฌ(Multi-Repo), ๋ชจ๋…ธ๋ ˆํฌ(Mono-Repo) ๋ช…์นญ์œผ๋กœ ์ •์˜ํ•œ๋‹ค.

๋ชจ๋†€๋ฆฌ์Šค, ๋ฉ€ํ‹ฐ๋ ˆํฌ, ๋ชจ๋…ธ๋ ˆํฌ

๊ฐ ํ”„๋กœ์ ํŠธ ๊ด€๋ฆฌ ๋ฐฉ์‹์„ ๋„์‹ํ™”ํ•˜๋ฉด ์œ„์™€ ๊ฐ™๋‹ค.

  • ๋ชจ๋†€๋ฆฌ์Šค
    • ๐Ÿ’ก ์„ธ ๋ฐฉ๋ฒ• ์ค‘ ๊ฐ€์žฅ ๊ฑฐ๋Œ€ํ•œ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง„๋‹ค. ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ชจ์—ฌ ํ•˜๋‚˜์˜ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์ด๋ฃฌ๋‹ค. ํ”„๋กœ์ ํŠธ์˜ ๊ทœ๋ชจ๊ฐ€ ์ž‘๊ณ , ๋น ๋ฅธ ์†๋„๋ฅผ ์š”๊ตฌํ•˜๋Š” ํ”„๋กœ์ ํŠธ์ผ์ˆ˜๋ก ์œ ์šฉํ•˜๋‹ค.
    • โœ… ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋†’๋‹ค.
    • โœ… ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค๊ฐ€ ๊ฐ์†Œํ•œ๋‹ค.
    • โœ… ๋นŒ๋“œ ํŒŒ์ดํ”„๋ผ์ธ ๋ฐ ๊ด€๋ฆฌ ํฌ์ธํŠธ๊ฐ€ ๋ช…ํ™•ํ•˜๋‹ค.
    • โŒ ํ”„๋กœ์ ํŠธ ๋ถ„์„์— ๋งŽ์€ ์‹œ๊ฐ„์ด ์†Œ์š”๋œ๋‹ค.
    • โŒ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ ์˜ํ–ฅ๋„๊ฐ€ ๊ธฐํ•˜๊ธ‰์ˆ˜์ ์œผ๋กœ ๋†’์•„์ง„๋‹ค.
    • โŒ ๊ทœ๋ชจ์— ๋น„๋ก€ํ•˜์—ฌ ํ…Œ์ŠคํŠธ ๋ฐ ๋นŒ๋“œ ์‹œ๊ฐ„์ด ํฌ๊ฒŒ ์ฆ๊ฐ€ํ•œ๋‹ค.
    • โŒ ๊ฐ ์ฝ”๋“œ์˜ ์‘์ง‘๋„๊ฐ€ ๋งค์šฐ ๋†’๋‹ค.
  • ๋ฉ€ํ‹ฐ๋ ˆํฌ
    • ๐Ÿ’ก ๊ฐ๊ฐ์˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋‚˜๋‰˜์–ด ๊ฐ๊ฐ์˜ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๊ฐ€์ง„๋‹ค. ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ๊ฐ€ ํฌ๊ณ , ๊ฐ ํ”„๋กœ์ ํŠธ์˜ ๋ฉ”์ธํ„ฐ๋„Œ์Šค ํ™•๋ณด๊ฐ€ ๊ฐ€๋Šฅํ•œ ํ”„๋กœ์ ํŠธ์— ์œ ์šฉํ•˜๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ์„œ๋น„์Šค์—์„œ ์ผ๋ฐ˜์ ์œผ๋กœ ์ฑ„ํƒํ•œ๋‹ค.
    • โœ… ํ”„๋กœ์ ํŠธ๋ณ„ ์˜ค๋„ˆ์‹ญ ๋ฐ ์ „๋ฌธ์„ฑ ํ™•๋ณด๊ฐ€ ์šฉ์ดํ•˜๋‹ค.
    • โœ… ๊ฐ ์ฝ”๋“œ์˜ ์‘์ง‘๋„๊ฐ€ ๋‚ฎ์•„์ง„๋‹ค.
    • โœ… ๊ฐ ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ์ตœ์ ํ™”๋œ ์„ค์ • ๋ฐ ์ธํ”„๋ผ ๊ตฌ์ถ•์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
    • โœ… ๊ทœ๋ชจ๊ฐ€ ์ž‘๊ณ , ๋ ˆํฌ์ง€ํ† ๋ฆฌ ๋ณ„ ์—ญํ• ์ด ๋น„๊ต์  ๋ช…ํ™•ํ•˜์—ฌ ๋ถ„์‚ฐ ์—…๋ฌด์— ์šฉ์ดํ•˜๋‹ค.
    • โœ… ํ…Œ์ŠคํŠธ ๋ฐ ๋นŒ๋“œ์˜ ๋ณ‘๋ ฌ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
    • โŒ ์ค‘๋ณต ์ฝ”๋“œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
    • โŒ ํ”„๋กœ์ ํŠธ๋ณ„ ์„ค์ •์ด ์„ธ๋ถ„ํ™”๋ ์ˆ˜๋ก ๊ด€๋ฆฌ ํฌ์ธํŠธ๊ฐ€ ๋งŽ์•„์ง„๋‹ค.
    • โŒ ๊ด€์‹ฌ์‚ฌ์— ๋”ฐ๋ผ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์˜ ๊ฐˆ๋ผํŒŒ๊ณ ์Šคํ™”๊ฐ€ ์ผ์–ด๋‚˜๊ธฐ ์‰ฝ๋‹ค.
    • โŒ ๊ฐ ํ”„๋กœ์ ํŠธ๋ณ„๋กœ ์˜์กด์„ฑ์ด ๊ฐ•ํ•ด์งˆ ๊ฒฝ์šฐ, ๊ฐ ํ”„๋กœ์ ํŠธ์˜ ๋ณ€ํ™”์— ๋”ฐ๋ฅธ ์ฆ‰๊ฐ์ ์ธ ๋Œ€์‘์ด ์–ด๋ ต๋‹ค.
  • ๋ชจ๋…ธ๋ ˆํฌ
    • ๐Ÿ’ก ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ชจ์—ฌ ํ•˜๋‚˜์˜ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์ด๋ฃจ์ง€๋งŒ, ๊ฐ ํ”„๋กœ์ ํŠธ๊ฐ€ ๊ตฌ์กฐ์ ์œผ๋กœ ๊ตฌ๋ถ„๋˜์–ด์žˆ๋‹ค. ๊ฐœ๋ฐœ์ž์˜ ์—ญ๋Ÿ‰๊ณผ ๊ตฌ์„ฑ์— ๋”ฐ๋ผ ๋ชจ๋†€๋ฆฌ์Šค์™€ ๋ฉ€ํ‹ฐ๋ ˆํฌ์˜ ์žฅ์ ์„ ์ทจํ•ด ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ณด๋‹ค ํšจ๊ณผ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ์‹์ด๋‹ค.
    • โœ… ์ „์ฒด ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜์—ฌ ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์œผ๋ฉด์„œ๋„, ๊ตฌ์กฐ์ ์œผ๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
    • โœ… ์„œ๋น„์Šค ์ฝ”๋“œ ์ „์ฒด์— ์ผ๊ด€์„ฑ์„ ๋ถ€์—ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
    • โœ… ๊ฐ ํ”„๋กœ์ ํŠธ ๋ณ„ ๋ณ€ํ™”์— ๊ธฐ๋ฏผํ•˜๊ฒŒ ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ๋‹ค.
    • โŒ ์ง„์ž…์žฅ๋ฒฝ์ด ๋†’๋‹ค. ๋ชจ๋…ธ๋ ˆํฌ์˜ ์ดํ•ด๋„๊ฐ€ ๋–จ์–ด์งˆ ๊ฒฝ์šฐ, ๋‹จ์ ๋งŒ์„ ์ทจํ•˜๋Š” ์ดŒ๊ทน์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.
    • โŒ ๊ตฌ์กฐ๋ฅผ ๋‚˜๋ˆŒ๋ฟ, ํ”„๋กœ์ ํŠธ์˜ ๊ทœ๋ชจ๋Š” ์—ฌ์ „ํžˆ ๊ฑฐ๋Œ€ํ•˜๋ฉฐ, ์ด๋กœ์ธํ•œ ๋‹จ์  ์—ญ์‹œ ๋”ฐ๋ผ์˜จ๋‹ค.

1-1. Y?

๊ทธ๋ ‡๋‹ค๋ฉด ์™œ ๋‚˜๋Š” ๋ชจ๋…ธ๋ ˆํฌ๋ฅผ ๋„์ž…ํ•˜๊ธฐ๋กœ ํ–ˆ์„๊นŒ? ๊ทธ ์ด์œ ๋Š” ๐Ÿ”— ์—ฐ๊ตฌ์†Œ์™€ ๐Ÿ”— ๋ธ”๋กœ๊ทธ์— ์žˆ๋‹ค.

๋‘ ์‚ฌ์ดํŠธ์˜ UI ๋ฐ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์กฐ๋Š” ๋งค์šฐ ํก์‚ฌํ•˜๋‹ค. ๊ทธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๊ฝค๋‚˜ ๋ณต์žกํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ๋˜ํ•œ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

์ผ๋ก€๋กœ, ์—ฐ๊ตฌ์†Œ ํ”„๋กœ์ ํŠธ ์„ค๋ช…๊ณผ ๋ธ”๋กœ๊ทธ์˜ ๊ฒŒ์‹œ๊ธ€์€ ๋ชจ๋‘ ๋งˆํฌ๋‹ค์šด์„ ํ™œ์šฉํ•˜๋ฉฐ, ์ด๋ฅผ ๋ณ€ํ™˜ํ•˜๋Š” ๋กœ์ง ๋ฐ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ๋‹น์—ฐํžˆ ๊ทธ ๋ถ„๋Ÿ‰ ๋˜ํ•œ ์ ์ง€ ์•Š์€๋ฐ, ์ด๋Ÿฌํ•œ ๋ณ€๊ฒฝ์ ์ด ์žˆ์„ ๋•Œ๋งˆ๋‹ค ์ผ์ผํžˆ ์ฝ”๋“œ๋ฅผ ์ˆ˜๋™์œผ๋กœ ๋ณต์ œํ•ด์•ผํ–ˆ๋‹ค.

๊ธ€ ์ž‘์„ฑ์ด ๋นˆ๋ฒˆํžˆ ์ผ์–ด๋‚˜๋Š” ๋ธ”๋กœ๊ทธ์— ๋น„ํ•ด, ๋น„๊ต์  ๋ณ€๊ฒฝ์˜ ์—ฌ์ง€๊ฐ€ ์ ์€ ์—ฐ๊ตฌ์†Œ ํŽ˜์ด์ง€๋Š” ์ƒ๋Œ€์ ์œผ๋กœ ๊ฐˆ๋ผํŒŒ๊ณ ์Šคํ™”๊ฐ€ ์‰ฝ๊ฒŒ ์ผ์–ด๋‚˜๊ธฐ ์ผ์‘ค์˜€๋‹ค.


์ƒ๊ฐํ•ด๋ณด๋ฉด, ์ด๋ ‡๊ฒŒ๋‚˜ ๋น„์Šทํ•œ ๋‘ ํŽ˜์ด์ง€๋ฅผ ๊ตณ์ด ๋‘ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ด€๋ฆฌํ•˜๋Š” ๊ฑด ์—ญ์‹œ ๋ถˆํŽธํ•˜๋‹ค.

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

์ด์ „ ํšŒ์‚ฌ์—์„œ ๋ชจ๋…ธ๋ ˆํฌ ๊ธฐ๋ฐ˜์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ๋‹ด๋‹นํ•œ ๋•๋ถ„์— ๋Œ€์ถฉ ๊ฐœ๋…์€ ์•Œ๊ณ  ์žˆ๊ธฐ๋„ ํ•˜๊ณ , ์š”์ฆ˜ ํŠธ๋ ŒํŠธ๋ผ ์ด ์ฐธ์— ์ ์šฉํ•ด๋ณด๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค.

1-2. How?

๋ชจ๋…ธ๋ ˆํฌ๋ฅผ ์“ธ ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ๊ฐ€ ๋ช‡ ๊ฐ€์ง€ ์žˆ๋Š”๋ฐ, ๋Œ€ํ‘œ์ ์œผ๋กœ ๐Ÿ”— turborepo, ๐Ÿ”— Lerna, ๐Ÿ”— NX๊ฐ€ ์žˆ๋‹ค.

๊ทธ ์ค‘ NX๋ฅผ ์„ ํƒํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ์„ ํƒํ•œ ์ด์œ ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  • turborepo๋Š” ์ง„์ž…์žฅ๋ฒฝ์ด ๋‚ฎ๋‹ค. ๋ฌผ๋ก  ์žฅ์ ์ธ๋ฐ, ๋ณดํ†ต ์ €๋Ÿฌ๋ฉด ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์ƒ๋Œ€์ ์œผ๋กœ ๋นˆ์•ฝํ•˜๋‹ค.
  • ์ด์™• ํ•˜๋Š”๊ฑฐ ์–ด๋ ค์šด ๊ฑธ๋กœ ํ•ด๋ด์•ผ์ง€ ํ•˜๋Š” ์ผ์ข…์˜ ๊ฐ๊ธฐ๋‹ค. ์–ด๋ ค์šด๊ฑธ ์‹œ๋„ํ•˜๋ฉด ๋‚˜์ค‘์— ์–ด๋””๊ฐ€์„œ ํ•œ ๋งˆ๋””๋ผ๋„ ๋” ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋น„์Šทํ•œ ์ด์œ ๋กœ, Hard -> Easy๋Š” ์ ๋‹นํ•œ๋ฐ, Easy -> Hard๋Š” Nothing -> Hard ๋ณด๋‹ค ํ›จ์”ฌ ์–ด๋ ต๋‹ค.
  • Lerna๋Š” ์ด์ „ ํšŒ์‚ฌ์—์„œ ์ ‘ํ•ด๋ณธ ๊ฒฝํ—˜์ด ์žˆ์ง€๋งŒ, NX๊ฐ€ ์ธ์ˆ˜ํ–ˆ๋‹ค. ์ฆ‰, ๋ฏธ๋ž˜๊ฐ€ ๋ถˆํˆฌ๋ช…ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’๋‹ค.
  • NX ์—ญ์‹œ ์ด์ „ ํšŒ์‚ฌ์—์„œ ์ ‘ํ•ด๋ดค๊ณ , ์–ด๋ ต์ง€๋งŒ ๊ทธ ๋งŒํผ ํƒ๊ตฌํ•  ์š”์†Œ๊ฐ€ ๋งŽ๋‹ค.

NX๋Š” VSCode์— ๋งค์šฐ ์นœํ™”์ ์ด๋‹ค. VSCode๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๐Ÿ”— Nx Console ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด NX์˜ ๊ธฐ๋Šฅ๊ณผ ๋ช…๋ น์–ด๋ฅผ UI ๊ธฐ๋ฐ˜์œผ๋กœ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๋‚˜ ๋˜ํ•œ ํ•ด๋‹น ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‹ญ๋ถ„ ํ™œ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์ถ•ํ–ˆ๋‹ค.

apps/์™€ packages/๋กœ ํฐ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ๋‚˜๋ˆด๋‹ค. apps/์—๋Š” ์•ฑ ๊ตฌ์ถ•๊ณผ ๊ด€๋ จ๋œ ์ฝ”๋“œ๋“ค์„ ๋‘๊ณ , packages/๋Š” ํ•ด๋‹น ์•ฑ์„ ๊ตฌํ˜„ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ, API, ์ƒํƒœ๊ด€๋ฆฌ ํ”„๋กœ์ ํŠธ๋“ค์ด ์œ„์น˜ํ•˜๋Š” ๊ตฌ์กฐ๋‹ค.

apps/๋Š” ๋นŒ๋“œ ๋Œ€์ƒ์œผ๋กœ, apps/ ํ•˜์œ„์˜ ํ”„๋กœ์ ํŠธ๋“ค์€ ๋ชจ๋‘ ๋นŒ๋“œ๋˜์–ด ๋ฐฐํฌ๋  ์ฝ”๋“œ๋“ค์ด๋‹ค.


turborepo๋‚˜ lerna์™€๋Š” ๋‹ค๋ฅด๊ฒŒ, package.json๊ณผ node_modules๊ฐ€ ์ตœ์ƒ๋‹จ ๋ฃจํŠธ์— ํ•˜๋‚˜๋งŒ ์œ„์น˜ํ•œ๋‹ค.

๊ณต์‹๋ฌธ์„œ๋ฅผ ๊นŠ๊ฒŒ ์ฐพ์•„๋ณด์ง„ ์•Š์•˜์ง€๋งŒ, ํŠน๋ณ„ํ•œ ์–ธ๊ธ‰์ด ์—†๋Š” ๊ฑธ๋กœ ๋ณด์•„, ๋ชจ๋“  ํ”„๋กœ์ ํŠธ๋“ค์ด ๋™์ผํ•œ ๋ฉ”ํƒ€, ๋™์ผํ•œ ๋””ํŽœ๋˜์‹œ ๊ด€๋ฆฌ ์ฒด๊ณ„๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•˜๋Š” ๋“ฏ ํ•˜๋‹ค.

์ƒ๊ฐํ•ด๋ณด๋ฉด, ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ๋ณ„๋„์˜ ๋””ํŽœ๋˜์‹œ ๋ฐ”์šด๋”๋ฆฌ๋ฅผ ๊ฐ€์งˆ ๊ฒฝ์šฐ, ๋™์ผํ•œ ๋””ํŽœ๋˜์‹œ์ž„์—๋„ ๋ฒ„์ „์ด ๋‹ค๋ฅด๊ฑฐ๋‚˜, ๋™์ผํ•œ ๋””ํŽœ๋˜์‹œ๋ฅผ ๊ฐ๊ฐ ์„ค์น˜ํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

๋””ํŽœ๋˜์‹œ๋“ค์€ Node.js์™€ React ๋“ฑ ๋งŽ์€ ๋ฒ„์ „์˜ ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค. ๋””ํŽœ๋˜์‹œ์˜ ์ผ๊ด€์„ฑ์ด ์•ฝํ•ด์งˆ ๊ฒฝ์šฐ, ํŠน์ • ๋””ํŽœ๋˜์‹œ๋ฅผ A๋Š” ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ๋ฐ, B๋Š” ๋‹ค๋ฅธ ์š”์ธ์œผ๋กœ ์ธํ•ด ๊ทธ ๋ณด๋‹ค ํ•˜์œ„ ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๋Š” ์ผ€์ด์Šค๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.

NX๋Š” ๋””ํŽœ๋˜์‹œ์˜ ์ผ๊ด€์„ฑ์„ ์ง€ํ‚ด์œผ๋กœ์จ ์–ป๋Š” ์ด๋“์— ์ข€ ๋” ์ดˆ์ ์„ ๋‘๋Š” ๋ชจ์–‘์ด๋‹ค. ๋‹คํ–‰ํžˆ, ๋‚˜ ์—ญ์‹œ ์ผ๊ด€์„ฑ์„ ํ†ตํ•ด ์–ป๋Š” ์ด๋“์ด ๋”์šฑ ํšจ์œจ์ ์ด๋ผ ์ƒ๊ฐํ•œ๋‹ค.

1-3. What the FXXX

๋ฌผ๋ก  ๋‹จ์ ๋„ ์žˆ๋Š”๋ฐ, ๋‚ด ๊ฒฝ์šฐ ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋กœ์ ํŠธ๋Š” npm version ๋ช…๋ น์–ด ๊ธฐ๋ฐ˜์˜ ๋ฒ„์ „๊ด€๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. npm version ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, major, minor, patch์— ๋”ฐ๋ผ ๋ฒ„์ „์„ ์˜ฌ๋ฆฌ๊ณ  ๊ทธ์— ๋”ฐ๋ฅธ ์ปค๋ฐ‹๊ณผ ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.

์ด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํƒœ๊ทธ๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ, ์ด๋ฅผ ๊ฐ์ง€ํ•˜์—ฌ ๋นŒ๋“œ ํŒŒ์ดํ”„๋ผ์ธ์„ ๊ตฌ๋™ํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

๋ฌธ์ œ๋Š” 1 ๋ ˆํฌ์ง€ํ† ๋ฆฌ ๋‹น 1 package.json์ด๋ผ๋Š” ์ •์ฑ…์œผ๋กœ ์ธํ•ด, ๊ธฐ ๋ฐฉ์‹์œผ๋กœ๋Š” ๊ฐœ๋ณ„์ ์ธ ๋ฒ„์ „ ๊ด€๋ฆฌ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.

์ผ๋‹จ์€ ๋ฒ„์ „์„ ํ•˜๋‚˜๋กœ ๋‘์–ด ๋ฒ„์ „ ์—…๋ฐ์ดํŠธ ์‹œ, ์—ฐ๊ตฌ์†Œ์™€ ๋ธ”๋กœ๊ทธ ํŽ˜์ด์ง€ ๋‘˜ ๋‹ค ๋ฐฐํฌ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.

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


GitHub Actions์—์„œ ๋นŒ๋“œ๋ฅผ ๋Œ๋ฆฌ๋‹ค๊ฐ€ ๋ฐœ๊ฒฌํ•œ๊ฑด๋ฐ, ๋กœ์ปฌ์—์„  ๋”ฑํžˆ ๋ณ„ ๋ง ์—†๋˜ Nx Cloud๊ฐ€, GitHub Actions์—์„œ ๋‚œ๋ฆฌ๋ฅผ ํ•€๋‹ค.

์•„๋งˆ ํŠน์ • ํ™˜๊ฒฝ์—์„œ ๋นŒ๋“œ ์‹œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋„๋ก ๊ฐ•์ œํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ์žˆ๋Š” ๋ชจ์–‘์ด๋‹ค.

๊ฐœ์ธ์ ์œผ๋กœ ์ด๋Ÿฐ๊ฑธ ์ œ์ผ ์‹ซ์–ดํ•œ๋‹ค. ๋กœ์ปฌ์—์„  ๋ฌธ์ œ๊ฐ€ ์—†๋Š”๋ฐ ๋นŒ๋“œ ์„œ๋ฒ„์™€ ๋น„์Šทํ•˜๊ฒŒ ํƒ€ ํ™˜๊ฒฝ์—์„œ๋งŒ ๋‚˜๋Š” ์˜ค๋ฅ˜๋“ค. ๋””๋ฒ„๊น…ํ•˜๊ธฐ๋„ ๋‚œ๊ฐํ•˜๋‹ค. ๋นŒ๋“œ ์‹œ NX_NO_CLOUD=true ๋ช…๋ น์–ด๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ Nx Cloud ์—ฐ๊ฒฐ์„ ๋Œ ์ˆ˜ ์žˆ๋‹ค.

BASH

1
NX_NO_CLOUD=true pnpm nx build {name}

์œ„ ๋ช…๋ น์–ด๋กœ Nx Cloud๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•˜๊ณ  ๋นŒ๋“œํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

2. ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ์žฌ์„ค๊ณ„

image

์•ž์„œ ์„ค๋ช…ํ•œ ๋ชจ๋…ธ๋ ˆํฌ์˜ ํŠน์ง•์ฒ˜๋Ÿผ, ๋ชจ๋…ธ๋ ˆํฌ๋Š” ์–ด๋–ป๊ฒŒ ์„ค๊ณ„ํ•˜๋ƒ์— ๋”ฐ๋ผ ๋ชจ๋†€๋ฆฌ์Šค์™€ ๋ฉ€ํ‹ฐ๋ ˆํฌ์˜ ์žฅ์ ์„ ๋ชจ๋‘ ์ทจํ• ์ˆ˜๋„ ์žˆ๊ณ , ๋ฐ˜๋Œ€๋กœ ๋‹จ์ ๋งŒ ์ทจํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ์–ด๋–ค๊ฑธ ์ทจํ• ์ง€๋Š” ์ „์ ์œผ๋กœ ๊ตฌ์„ฑํ•œ ๊ฐœ๋ฐœ์ž์˜ ๋ชซ์ด๋‹ค.

๋ชจ๋“  ๊ฒŒ ๊ทธ๋ ‡๋“ฏ์ด, ํ—ˆ์ˆ ํ•˜๊ฒŒ ์„ค๊ณ„๋œ ๋ชจ๋…ธ๋ ˆํฌ๋Š” ์˜คํžˆ๋ ค ๋…์ด ๋  ์ˆ˜ ์žˆ๋Š” ์…ˆ์ด๋‹ค. ๋•Œ๋ฌธ์— ๋‚˜ ์—ญ์‹œ๋„, ๋ชจ๋…ธ๋ ˆํฌ์˜ ์žฅ์ ์„ ์ตœ๋Œ€ํ•œ ์ฑ™๊ธฐ๊ธฐ ์œ„ํ•ด, ๊ทธ์— ๊ฑธ๋งž๋Š” ๊ตฌ์กฐ ์„ค๊ณ„๊ฐ€ ํ•„์š”ํ–ˆ๋‹ค.

๋Œ€๋žต์ ์ธ ๊ตฌ์กฐ

๋‚ด๊ฐ€ ์ƒ๊ฐํ•œ ๊ตฌ์กฐ์˜ ํฐ ํ‹€์„ ๋„์‹ํ™”ํ•˜๋ฉด ๋Œ€๋žต ์œ„์™€ ๊ฐ™์€ ๊ทธ๋ฆผ์ด ๋‚˜์˜จ๋‹ค.

  • Application - ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ชจ๋“ˆ. ๋นŒ๋“œ๋  ์„œ๋น„์Šค๋“ค์ด ์œ„์น˜ํ•œ๋‹ค. Next.js ์•ฑ ์ฝ”๋“œ ๋“ฑ์ด ์œ„์น˜ํ•œ๋‹ค.
  • Business Module - ๊ฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ๋ฐ€์ ‘ํ•œ ์—ฐ๊ด€์„ ๊ฐ€์ง„ ๋ชจ๋“ˆ์ด๋‹ค. API, ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค. ์•ฑ ๋””์ž์ธ ํŒฉ ๋“ฑ์ด ์œ„์น˜ํ•œ๋‹ค.
  • Global Module - ๊ฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์˜์กด์„ฑ์ด ์—†๋Š” ๊ณตํ†ต ๋ชจ๋“ˆ์ด๋‹ค. ๋””์ž์ธ ์‹œ์Šคํ…œ, ๊ณตํ†ต ์ฝ”๋“œ ๋“ฑ์ด ์œ„์น˜ํ•œ๋‹ค.

API, State ๋ชจ๋“ˆ์€ ๊ณตํ†ต ๋ชจ๋“ˆ์— ์†ํ•˜๋ฉฐ, ๋น„์ฆˆ๋‹ˆ์Šค ๋ชจ๋“ˆ๊ณผ์˜ ๊ด€๊ณ„๋ฅผ ๊ฐ•์กฐํ•˜๊ธฐ ์œ„ํ•ด ๋ณ„๋„๋กœ ํ‘œ๊ธฐํ•œ ๊ฒƒ์ด๋‹ค.

๊ฐ ๊ด€์‹ฌ์‚ฌ ๋ฐ ์—ญํ• ์— ๋”ฐ๋ผ ํŒจํ‚ค์ง€๋ฅผ ๊ตฌ๋ถ„ํ•˜๊ณ  ๋‚˜๋ˆ„์–ด ์—ฐ๊ฒฐํ–ˆ๋‹ค. ์˜์กด์„ฑ ๊ทธ๋ž˜ํ”„๋ฅผ ํ™•์ธํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

Nx Graph

์—ฌ๊ธฐ์„œ NX๊ฐ€ ๊ฐ€์ง€๋Š” ๊ฐ•์  ํ•˜๋‚˜๊ฐ€ ๋‚˜์˜จ๋‹ค. nx graph๋ฅผ ํ†ตํ•ด ํ”„๋กœ์ ํŠธ ์ฐธ์กฐ ๊ตฌ์กฐ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ํ™”์‚ดํ‘œ๊ฐ€ ์ด์–ด์ง„ ํ”„๋กœ์ ํŠธ๋Š” ์„œ๋กœ ์˜์กด ๊ด€๊ณ„์— ์žˆ์Œ์„ ์˜๋ฏธํ•œ๋‹ค.

ํ™”์‚ดํ‘œ๊ฐ€ ๋‚˜์˜จ ํ”„๋กœ์ ํŠธ๊ฐ€ ํ•ด๋‹น ํ™”์‚ดํ‘œ๋กœ ์—ฐ๊ฒฐ๋œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ฐธ์กฐํ•œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.

์ฆ‰, global-ui-pack์€ api, ui-pack, common, state ํ”„๋กœ์ ํŠธ๋ฅผ ์ฐธ์กฐํ•œ๋‹ค.


๊ฐ ํ”„๋กœ์ ํŠธ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ์—ญํ• ์„ ๊ฐ€์ง„๋‹ค.

  • root - ์†Œ๊ฐœ ํŽ˜์ด์ง€ Next.js ์ฝ”๋“œ
  • blog - ๋ธ”๋กœ๊ทธ Next.js ์ฝ”๋“œ
  • root-ui-pack - ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋””์ž์ธ ํŒฉ
  • blog-ui-pack - ๋ธ”๋กœ๊ทธ ๋””์ž์ธ ํŒฉ
  • global-ui-pack - ๊ณตํ†ต ๋””์ž์ธ ํŒฉ. ๊ณตํ†ต ๋””์ž์ธ์ด๋ฉด์„œ ๊ณตํ†ต ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ์ฃผ๋ฅผ ์ด๋ฃฌ๋‹ค.
  • ui-pack - ๋””์ž์ธ ์‹œ์Šคํ…œ. ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง, API, ์ƒํƒœ๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.
  • api - API ๋ชจ๋“ˆ
  • common - ๊ณตํ†ต ๋ชจ๋“ˆ
  • markdown-kit - ๋งˆํฌ๋‹ค์šด ๋ชจ๋“ˆ. ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋ฐ ๋ธ”๋กœ๊ทธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋งˆํฌ๋‹ค์šด์„ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฒ”์šฉ ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋œ๋‹ค. ๊ฐ ์„œ๋น„์Šค ๋ณ„ ๋งˆํฌ๋‹ค์šด์˜ ํŠน์„ฑ์„ ๋ฐ˜์˜ํ•œ ์ฝ”๋“œ๋Š”, ํ•ด๋‹น ์„œ๋น„์Šค์˜ ๋น„์ฆˆ๋‹ˆ์Šค ์˜์—ญ์—์„œ ๊ตฌํ˜„ํ•œ๋‹ค.
  • state - ์ƒํƒœ๊ด€๋ฆฌ ๋ชจ๋“ˆ

์œ„์™€ ๊ฐ™์€ ๊ตฌ์กฐ์™€ ์—ญํ• ์„ ๊ฐ€์ง„๋‹ค.

๋ฌผ๋ก , ํ”„๋กœ์ ํŠธ์˜ ์ฐธ์กฐ ๊ทœ์น™์„ ์ •์˜ํ•œ๋‹ค๊ณ  ํ•ด๋„, ๊ฐœ๋…์ ์ธ ํ˜•ํƒœ๋กœ๋Š” ํ•œ๊ณ„๊ฐ€ ์žˆ๋‹ค. ์–ธ์ œ๋“ ์ง€ ํœด๋จผ ์—๋Ÿฌ๋กœ ์ธํ•ด ๊ทœ์น™์ด ํ›ผ์†๋  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋‚˜์— ์˜ํ•ด ๋ชจ๋“ ๊ฒŒ ์ด๋ฃจ์–ด์ง€๋Š” ํ”„๋กœ์ ํŠธ์ž„์—๋„, ๊ฐ€๋” ๊ทœ์น™์„ ๋ง๊ฐํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. ํ•˜๋ฌผ๋ฉฐ ํ”„๋กœ์ ํŠธ์˜ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๊ณ  ์ธ์›์ด ๋งŽ์•„์งˆ์ˆ˜๋ก ์ด๋Ÿฐ ํ˜„์ƒ์€ ํ›จ์”ฌ ๋‘๋“œ๋Ÿฌ์ง€๊ฒŒ ๋œ๋‹ค.

NX๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ESLint์˜ ๊ทœ์น™์„ ํ†ตํ•ด ๊ฐ•์ œ์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋„๋ก ๊ด€๋ จ ESLint ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๊ธฐ๋ณธ์œผ๋กœ ์ œ๊ณตํ•œ๋‹ค.

JSON

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "blog",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/blog",
  "projectType": "application",
  "tags": [
    "app:blog",
    "name:blog"
  ],
  "// targets": "to see all targets run: nx show project blog --web",
  "targets": {}
}

๊ฐ ํ”„๋กœ์ ํŠธ๋Š” project.json์ด๋ผ๋Š” ๋ฉ”ํƒ€ ํŒŒ์ผ์„ ๊ฐ€์ง„๋‹ค. ํ•ด๋‹น ํŒŒ์ผ์˜ ํƒœ๊ทธ์— ์›ํ•˜๋Š” ํ…์ŠคํŠธ๋ฅผ ๋ฐฐ์—ด๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

์›ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ํ”„๋กœ์ ํŠธ์˜ ํƒœ๊ทธ๋ฅผ ์ง€์ •ํ•œ๋‹ค. ์ด ํƒœ๊ทธ๋Š” ์ถ”ํ›„ ESLint์˜ ๋ฃฐ์—์„œ ๊ฐ ํ”„๋กœ์ ํŠธ์˜ ์ฐธ์กฐ๋ฅผ ์ •์˜ํ•˜๋Š” ๊ธฐ์ค€์ด ๋œ๋‹ค.

์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ์— ๋™์ผํ•œ ํƒœ๊ทธ๋ฅผ ์ฃผ์–ด ๊ทธ๋ฃน ํ˜•์‹์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "rules": {
    "@nx/enforce-module-boundaries": [
      "error",
      {
        "enforceBuildableLibDependency": true,
        "allow": [],
        "depConstraints": [
          {
            "sourceTag": "name:blog",
            "onlyDependOnLibsWithTags": [
              "lib:blog",
              "lib:shared",
              "lib:shared-ui"
            ]
          }
        ]
      }
    ]
  }
}

@nx/enforce-module-boundaries ๊ทœ์น™์œผ๋กœ ์ฐธ์กฐ ๊ทœ์น™์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ”„๋กœ์ ํŠธ ์ตœ์ƒ๋‹จ์˜ ./eslintrc.json์— ๊ฐ„๋‹จํ•œ ํ‹€์ด ์ •์˜๋˜์–ด ์žˆ๋‹ค.

allow์—” ์–ด๋””์„œ๋‚˜ ์ฐธ์กฐ ๊ฐ€๋Šฅํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋ฅผํ…Œ๋ฉด, common ๊ฐ™์ด ์–ด๋””์„œ๋‚˜ ์ฐธ์กฐํ•ด๋„ ๋ฌธ์ œ๊ฐ€ ์—†๋Š” ๋ชจ๋“ˆ์€ allow๋กœ ํ•œ ๋ฒˆ์— ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ด€๋ฆฌ ์ธก๋ฉด์—์„œ ์ด๋กœ์šธ ์ˆ˜ ์žˆ๋‹ค.

depConstraints์— ๋ฐฐ์—ด๋กœ ์›ํ•˜๋Š” ์ฐธ์กฐ ๊ทœ์น™์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. sourceTag์— ์›ํ•˜๋Š” ํƒœ๊ทธ ์ด๋ฆ„์„ ํƒ€๊นƒํ•˜๊ณ  onlyDependOnLibsWithTags์— ์ฐธ์กฐ ๊ฐ€๋Šฅํ•œ ํƒœ๊ทธ ๋ชฉ๋ก์„ ์ง€์ •ํ•œ๋‹ค. ์ฆ‰ name:blog ํƒœ๊ทธ๋ฅผ ๊ฐ€์ง„ ํ”„๋กœ์ ํŠธ๋Š” lib:blog, lib:shared, lib:shared-ui๋ฅผ ํƒœ๊ทธ๋ฅผ ๊ฐ€์ง„ ํ”„๋กœ์ ํŠธ๋งŒ์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ทธ ์ด์™ธ ํ”„๋กœ์ ํŠธ๋Š” ์ฐธ์กฐ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. ์ •์˜ํ•œ ์ฐธ์กฐ ๊ทœ์น™์„ ์‹ค์งˆ์ ์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.

3. ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ณ ๋„ํ™”

๊ธฐ์กด์˜ ์• ๋‹ˆ๋ฉ”์ด์…˜๋“ค์€ ๐Ÿ”— framer-motion์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ์—ˆ๋‹ค. ๋””ํŽœ๋˜์‹œ๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ, ํฌ๊ณ  ์ž‘์€ ์„ฑ๋Šฅ์ €ํ•˜๊ฐ€ ์žˆ์—ˆ์œผ๋ฉฐ, ๋””ํŽœ๋˜์‹œ ์ฝ”๋“œ๋ฅผ ๊ฑด๋“œ๋ฆด ์ˆ˜ ์—†์–ด ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…์ด ์–ด๋ ค์› ๋‹ค. ํŠนํžˆ ์†Œ๊ฐœํŽ˜์ด์ง€์˜ ํ™ˆ์ด ๋ Œ๋”๋ง ์ด์Šˆ๊ฐ€ ๋งค์šฐ ์‹ฌ๊ฐํ–ˆ๋˜ ๊ฑธ๋กœ ๊ธฐ์–ตํ•œ๋‹ค. (์•„๋งˆ ๋””ํŽœ๋˜์‹œ ๋‚ด๋ถ€์— useLayoutEffect๊ฐ€ ๋งŽ์ด ์“ฐ์˜€์„ ๊ฑฐ๋ผ ์ถ”์ธก๋œ๋‹ค.)

๋•Œ๋ฌธ์— ์ด๋ฒˆ ๋ฆฌ๋‰ด์–ผ์—์„  ์—ฌ๋Ÿฌ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์— ์ดˆ์ ์„ ๋งž์ท„๋‹ค. ํ‹ธํŠธ, ํŽ˜์ด๋“œ, ๋ทฐํฌํŠธ์— ๋”ฐ๋ฅธ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ๋“ฑ ์—ฌ๋Ÿฌ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์š”์†Œ๋“ค์„ ์ง์ ‘ ๊ฐœ๋ฐœํ–ˆ๋‹ค. ์ด ์š”์†Œ๋“ค์€ ์ถ”ํ›„ ๊ฒŒ์‹œ๊ธ€๋กœ ์ƒ์„ธํ•˜๊ฒŒ ํ’€์–ด๋ณผ ์˜ˆ์ •์ด๋‹ค.

๋งˆ์น˜๋ฉฐ

์ด๋ฒˆ ๋ฆฌ๋‰ด์–ผ์€ ์‹ค๋ฌด์—์„œ ์–ป์—ˆ๋˜ ๋งŽ์€ ์ธ์‚ฌ์ดํŠธ๋ฅผ ๋ฐ˜์˜ํ•˜๊ณ  ํผํฌ๋จผ์Šค๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ๋œป ๊นŠ์€ ๋ฆฌ๋‰ด์–ผ์ด์˜€๋‹ค.

ํŠนํžˆ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ง์ ‘ ๊ฐœ๋ฐœํ•˜๋ฉฐ UX์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ์ƒ๊ฐํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ๋‹ค. ์ˆ˜ ๋งŽ์€ ๊ฒŒ์‹œ๊ธ€ ์ฃผ์ œ๋Š” ๋ค...

๋ฆฌ๋‰ด์–ผ ๋ฒ„ํ”„๋กœ ํ•œ ๋™์•ˆ์€ ๋‹ค์‹œ ๋ธ”๋กœ๊ทธ ์šด์˜์— ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ์„ ๋“ฏ ํ•˜๋‹ค.


๐Ÿท๏ธ ํƒœ๊ทธ
# React
# Next.js
# Markdown
# NX
# Monorepo

์ฝ์–ด์ฃผ์…”์„œ ๊ณ ๋งˆ์›Œ์š”!

๋„์›€์ด ๋˜์…จ๋‹ค๋ฉด, ๊ณต๊ฐ์ด๋‚˜ ๋Œ“๊ธ€์„ ๋‹ฌ์•„์ฃผ์‹œ๋Š” ๊ฑด ์–ด๋–ค๊ฐ€์š”?

๋ธ”๋กœ๊ทธ ์šด์˜์— ํฐ ํž˜์ด ๋ฉ๋‹ˆ๋‹ค.

https://hits.seeyoufarm.com/api/count/incr/badge.svg?count_bg=%23484848&icon=react.svg&icon_color=dodgerblue&title=view&title_bg=%23242424&url=https%3A%2F%2Fblog.itcode.dev%2Fprojects%2F2024%2F06%2F01%2F5th-generation