원더월 ν”„λ‘ νŠΈμ—”λ“œ λͺ¨λ…Έλ ˆν¬ 적용기

NaHCoH
  • #monorepo
  • #turborepo

μ•ˆλ…•ν•˜μ„Έμš”. 원더월 ν”„λ‘ νŠΈμ—”λ“œ 개발자 ν™©ν˜Έμ°¬μž…λ‹ˆλ‹€.
μ΄λ²ˆμ—λŠ” 원더월 ν”„λ‘ νŠΈμ—”λ“œ νŒ€μ—μ„œ ν”„λ‘œμ νŠΈμ— λͺ¨λ…Έλ ˆν¬λ₯Ό λ„μž…ν•˜κ²Œλœ λ°°κ²½, 그리고 λŠλ‚€ μž₯단점듀을 κ°„λ‹¨ν•˜κ²Œ κ³΅μœ ν•΄λ³΄λ €κ³  ν•©λ‹ˆλ‹€.

λͺ¨λ…Έλ ˆν¬λž€?

λ¨Όμ € κ°„λ‹¨ν•˜κ²Œ, λͺ¨λ…Έλ ˆν¬μ˜ κ°œλ…λ§Œ κ°„λ‹¨ν•˜κ²Œ 작고 μ§„ν–‰ν•˜κ² μŠ΅λ‹ˆλ‹€.
λͺ¨λ…Έλ ˆν¬λž€, κ°„λ‹¨ν•˜κ²Œ λ‘˜ μ΄μƒμ˜ ν”„λ‘œμ νŠΈλ₯Ό ν•˜λ‚˜μ˜ μ €μž₯μ†Œμ— μ €μž₯ν•˜μ—¬ κ΄€λ¦¬ν•˜λŠ” μ½”λ“œ 관리 방식 μž…λ‹ˆλ‹€. μœ μ‚¬μ„±μ΄ μžˆλŠ” ν”„λ‘œμ νŠΈλ“€μ„ ν•˜λ‚˜μ˜ μ €μž₯μ†Œμ— μ €μž₯ν•˜μ—¬ 곡톡 μš”μ†Œλ“€μ„ μž¬μ‚¬μš©ν• μˆ˜ 있게 ν•΄μ€λ‹ˆλ‹€.

적용 배경

μ €ν¬λŠ” 기쑴에 4개의 ν”„λ‘œμ νŠΈλ₯Ό λ©€ν‹°λ ˆν¬λ‘œ κ΄€λ¦¬ν•˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€.
λͺ¨λ‘ 같은 λ””μžμΈ 베이슀λ₯Ό μ‚¬μš©ν•˜μ—¬, ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈ λ””μžμΈμ„ μ‚¬μš©ν•˜μ§€λ§Œ 각각의 μ½”λ“œλ₯Ό λ”°λ‘œ κ΄€λ¦¬ν•˜κΈ° λ•Œλ¬Έμ— ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈλ₯Ό 4λ²ˆμ”© μž‘μ„±ν•΄μ•Ό ν–ˆμœΌλ©° ν”„λ‘œμ νŠΈλ“€μ΄ μ‚¬μš©ν•˜λŠ” νˆ΄λ„ 각각 달라 λ‹¨μˆœ λ³΅μ‚¬λ‘œ ν•΄κ²°λ˜λŠ” λ¬Έμ œλ„ μ•„λ‹ˆμ—ˆμŠ΅λ‹ˆλ‹€.
λ˜ν•œ, μ €ν¬λŠ” μ½”λ“œλ¦¬λ·°λ₯Ό κΉƒν—™μ—μ„œ μ§„ν–‰ν•˜κ³  μžˆλŠ”λ° μ €μž₯μ†Œκ°€ λΆ„λ¦¬λ˜μ–΄ μžˆμœΌλ‹ˆ λ¦¬λ·°ν• λ•Œλ§ˆλ‹€ λ‹€λ₯Έ μ €μž₯μ†Œλ₯Ό μ°Ύμ•„κ°€κ³ , μ–΄λ–€ κ²½μš°λŠ” 리뷰가 올라온걸 μΈμ§€ν•˜μ§€ λͺ»ν•˜κ³  λ§ˆμ§€λ§‰μ— κΈ‰ν•˜κ²Œ 리뷰λ₯Ό μ²˜λ¦¬ν•˜κ²Œ λ˜λŠ” κ²½μš°λ„ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.

도ꡬ 선택

λͺ¨λ…Έλ ˆν¬ λ„κ΅¬μ—λŠ” turborepo, lerna, yarn workspace λ“±λ“± μ—¬λŸ¬κ°€μ§€ 도ꡬ가 μžˆλŠ”λ° μ €ν¬λŠ” 그쀑 vercel의 turborepoλ₯Ό μ‚¬μš©ν•˜κΈ°λ‘œ κ²°μ •ν–ˆμŠ΅λ‹ˆλ‹€.
κ·Έ 이유둜 μ €ν¬λŠ” vercel을 ν†΅ν•΄μ„œ 배포λ₯Ό μ§„ν–‰ν•˜κ³  μžˆμ—ˆκ³  λΉ λ₯΄κ²Œ ν”„λ‘œμ νŠΈκ°€ μ§„ν–‰λ˜λŠ” κ³Όμ •μ†μ—μ„œ μ΅œμ†Œν•œμ˜ μ„€μ •λ§ŒμœΌλ‘œ λΉ λ₯΄κ²Œ μ§„ν–‰ν•˜κΈ° μœ„ν•΄μ„œ turborepoλ₯Ό μ‚¬μš©ν•˜κ³ μž ν–ˆμŠ΅λ‹ˆλ‹€.
λ˜ν•œ turborepo의 ν˜„μž¬ μž¬κ³΅ν•˜κ³  μžˆλŠ” κΈ°λŠ₯이 μœ μš©ν•  뿐만 μ•„λ‹ˆλΌ 지속적인 μ—…λ°μ΄νŠΈκ°€ μ΄λ£¨μ–΄μ§„λ‹€λŠ” 것이 μž₯점으둜 느껴쑌기 λ•Œλ¬Έμž…λ‹ˆλ‹€.
turborepo에 λŒ€ν•΄μ„œ μžμ„Ένžˆ μ•Œκ³ μ‹ΆμœΌμ‹ λΆ„λ“€μ„ μœ„ν•΄ 곡식 λ¬Έμ„œ 링크λ₯Ό κ³΅μœ λ“œλ¦½λ‹ˆλ‹€.

적용

μ˜ˆμ‹œ ν”„λ‘œμ νŠΈλ₯Ό ν†΅ν•΄μ„œ λͺ¨λ…Έλ ˆν¬λ₯Ό μ μš©ν•˜λŠ” 과정을 κ°„λ‹¨ν•˜κ²Œ κ³΅μœ ν•΄λ³΄λ €κ³  ν•©λ‹ˆλ‹€.

ꡬ쑰

κ΅¬μ‘°λŠ” 크게 apps 디렉토리와 packages λ””λ ‰ν† λ¦¬λ‘œ κ΅¬λΆ„λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
apps λ””λ ‰ν† λ¦¬λŠ” λͺ¨λ…Έλ ˆν¬μ— μΆ”κ°€λ˜λŠ” μ„œλΉ„μŠ€λ“€μ΄ μœ„μΉ˜ν•˜λŠ” λ””λ ‰ν† λ¦¬λ‘œ 저희 μ„œλΉ„μŠ€μ—μ„œλŠ” 프둬 μŠ€ν† μ–΄ ν”„λ‘œμ νŠΈκ°€ ν•΄λ‹Ή 디렉토리에 ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
'apps 폴더'
packages λ””λ ‰ν† λ¦¬λŠ” apps λ””λ ‰ν† λ¦¬μ—μ„œ μ‚¬μš©ν•  곡톡 μš”μ†Œλ“€μ΄ μ €μž₯λ˜λŠ” λ””λ ‰ν† λ¦¬λ‘œ, λ””μžμΈ μ‹œμŠ€ν…œμ΄λ‚˜ κ³΅ν†΅λœ νƒ€μž…λ“€μ΄ ν•΄λ‹Ή 디렉토리에 포함될 수 μžˆμŠ΅λ‹ˆλ‹€.
'packages 폴더'

μ„€μ •

μš°μ„  μ½”λ“œμƒμ—μ„œ, turbo.json νŒŒμΌμ—μ„œ ν”„λ‘œμ νŠΈμ— λŒ€ν•œ 섀정이 κ°€λŠ₯ν•©λ‹ˆλ‹€.
섀정도 ν•œλˆˆμ— μ•Œμ•„λ³Όμˆ˜ μžˆμ„μˆ˜ μžˆλ„λ‘ κ°„λ‹¨ν•œλ°

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "cache": true
    }
  }
}

ν•΄λ‹Ή 섀정을 ν•΄μ€€ 후에 turbo run build μ»€λ§¨λ“œλ₯Ό μ‹€ν–‰μ‹œμΌœμ£Όλ©΄ 각 apps 디렉토리 ν•˜μœ„ 각각의 ν”„λ‘œμ νŠΈμ—μ„œ build λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰μ‹œμΌœμ€λ‹ˆλ‹€.
그리고 packages에 μžˆλŠ” μ½”λ“œλŠ” μ•„λž˜μ²˜λŸΌ λ””νŽœλ˜μ‹œμ— μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
"@packages/components": "workspace:*"

λ‹€μŒμœΌλ‘œ vercelμ—μ„œ λͺ¨λ…Έλ ˆν¬ ν”„λ‘œμ νŠΈλ₯Ό μ„€μ •ν•˜λŠ” 방식은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.
'vercel setup'

  1. μ‚¬μš©ν•˜λŠ” μ–Έμ–΄λ₯Ό μ„ νƒν•˜κ³ 
  2. apps 디렉토리 ν•˜μœ„μ˜ 경둜λ₯Ό 지정해주면

μ•Œμ•„μ„œ ν•΄λ‹Ή κ²½λ‘œμ— μžˆλŠ” ν”„λ‘œμ νŠΈλ₯Ό μΈμ‹ν•˜κ³  λΉŒλ“œ 및 λ°°ν¬κΉŒμ§€ μ²˜λ¦¬ν•΄μ€λ‹ˆλ‹€.
μ΄λ•Œ turbo-ignore 섀정을 ν•΄μ€˜μ•Ό λ‹€λ₯Έ ν”„λ‘œμ νŠΈμ˜ 컀밋은 배포λ₯Ό ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
'ignore build step'
'ignore build result'

μž₯, 단점

μš°μ„  λͺ¨λ…Έλ ˆν¬ 적용 μ΄ν›„μ—λŠ” ν™•μ‹€ν•˜κ²Œ 개발적으둜 νŽΈλ¦¬ν•΄μ‘Œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.
μœ„μ—μ„œ μ–ΈκΈ‰ν•œ λͺ¨λ…Έλ ˆν¬ 적용 배경인 곡톡 μ»΄ν¬λ„ŒνŠΈμ˜ μ‚¬μš©, 리뷰 및 κ΄€μ‹¬μ‚¬μ˜ μ‚°κ°œλ₯Ό μž‘μ„μˆ˜ μžˆμ—ˆκ³  μƒˆλ‘œμš΄ ν”„λ‘œμ νŠΈμ˜ 좔가도 κ°„λ‹¨ν•˜κ²Œ μ²˜λ¦¬ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.
μΆ”κ°€λ‘œ 이미 vercel을 ν™œμš©ν•΄μ„œ 배포λ₯Ό μ§„ν–‰ν•˜κ³  μžˆμ—ˆλ‹€λ³΄λ‹ˆ 생각보닀 훨씬 κ°„λ‹¨ν•˜κ²Œ μ²˜λ¦¬ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

λ‹€λ§Œ μ—¬λŸ¬ ν”„λ‘œμ νŠΈκ°€ ν•©μ³μ§μœΌλ‘œ 인해, 컀밋과 PR이 μ–΄λ–€ ν”„λ‘œμ νŠΈλ₯Ό μœ„ν•œκ±΄μ§€ μ•ŒκΈ° νž˜λ“€μ—ˆκ³  이런 뢀뢄은 PR, 컀밋 λ©”μ„Έμ§€μ˜ prefix둜 각 ν”„λ‘œμ νŠΈμ˜ ν‚€λ₯Ό λΆ™μ΄κΈ°λ‘œ νŒ€ μ»¨λ²€μ…˜μ„ μ •ν•΄μ„œ 문제λ₯Ό ν•΄κ²°ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.
그리고 μ—¬λŸ¬ ν”„λ‘œμ νŠΈκ°€ ν•˜λ‚˜μ˜ 배포 μŠ€λ ˆλ“œμ—μ„œ λŒμ•„κ°€κΈ° λ•Œλ¬Έμ—, ν•˜λ‚˜μ˜ μŠ€ν”„λ¦°νŠΈμ—μ„œ 볡수의 ν”„λ‘œμ νŠΈκ°€ λ°°ν¬λ λ•Œλ©΄ λ³‘λ ¬μ μœΌλ‘œ λ™μ‹œμ— λ°°ν¬λ˜λŠ”κ²Œ μ•„λ‹ˆλΌ ν•˜λ‚˜μ˜ 배포가 λλ‚˜λŠ”κ±Έ κΈ°λ‹€λ €μ•Ό ν•˜λŠ” μ΄μŠˆκ°€ μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” vercel의 κΈ°λŠ₯으둜 ν•΄κ²°ν• μˆ˜ μžˆμ§€λ§Œ, λ™μ‹œμ— 배포가 ν—ˆμš©λ˜λŠ” 숫자 ν•˜λ‚˜ν•˜λ‚˜κ°€ λΉ„μš©μ΄κΈ°λ„ ν•˜κ³  μ‹€μ œ 배포 μ‹œκ°„μ΄ 그리 길지 μ•Šμ•„ ν˜„μž¬λŠ” μ μš©ν•˜μ§€ μ•Šκ³  μžˆμŠ΅λ‹ˆλ‹€.

+) μ €ν¬λŠ” 각 ν”„λ‘œμ νŠΈλ§ˆλ‹€ React.js, Next.js, Qwik, Astro λ“± μ‚¬μš©ν•˜λŠ” μ–Έμ–΄, ν”„λ ˆμž„μ›Œν¬κ°€ 달라 νƒ€μž…μ΄λ‚˜ 섀정은 κ³΅μœ ν•˜μ—¬ μž¬μ‚¬μš©ν•˜κΈ° νŽΈν–ˆμ§€λ§Œ 사싀 곡용 μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν•˜λŠ”λ°μ—λŠ” λΆˆνŽΈν•¨μ΄ μžˆμ—ˆμŠ΅λ‹ˆλ‹€.
ν•˜μ§€λ§Œ μ €ν¬λŠ” pandacssλ₯Ό μ‚¬μš©ν•˜μ—¬ λ ˆμ‹œν”Όλ₯Ό κ³΅μœ ν•˜κ³  각 μ–Έμ–΄ 및 ν”„λ ˆμž„μ›Œν¬μ— 맞좰 κΈ°λŠ₯을 μΆ”κ°€ν•˜λŠ” μ‹μœΌλ‘œ κ°œλ°œμ„ ν•˜μ—¬ λ”μš± νŽΈν•˜κ²Œ μ‚¬μš©ν•  수 μžˆμ—ˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.
pandacss κ΄€λ ¨λœ λ‚΄μš©λ“€μ€ μ•„λž˜ 링크둜 μΆ”κ°€ν•΄λ‘μ—ˆμŠ΅λ‹ˆλ‹€.

마무리

μ˜€λŠ˜μ€ κ°„λ‹¨ν•˜κ²Œ ν”„λ‘ νŠΈμ—”λ“œ νŒ€μ—μ„œ λͺ¨λ…Έλ ˆν¬λ₯Ό μ μš©ν•œ κ²½ν—˜κ³Ό μ˜ˆμ‹œλ₯Ό ν†΅ν•œ μ„€μ • 방식을 κ³΅μœ ν•΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€.
λͺ¨λ…Έλ ˆν¬λŠ” λΆ„λͺ…νžˆ μž₯점이 있고 μ €ν¬μ²˜λŸΌ κ³΅ν†΅λœ μš”μ†Œλ₯Ό κ°–λŠ” μ—¬λŸ¬ ν”„λ‘œμ νŠΈλ₯Ό κ΄€λ¦¬ν•˜λŠ” 경우 μœ μš©ν•œ λ°©μ‹μ΄μ§€λ§Œ λ°˜λŒ€λ‘œ, λ°˜λ“œμ‹œ μ‚¬μš©ν•΄μ•Ό ν•˜λŠ”κ²ƒμ€ μ•„λ‹ˆλ©° 였히렀 λ©€ν‹°λ ˆν¬λ‘œ μ‚¬μš©ν•˜λŠ” κ²½μš°κ°€ 더 쒋을 λ•Œλ„ μžˆμŠ΅λ‹ˆλ‹€.
예λ₯Ό λ“€μ–΄, 저희 ν”„λ‘œμ νŠΈμ€‘ 원더월 μ›Ή ν”„λ‘œμ νŠΈλŠ” 프둬 μ„œλΉ„μŠ€μ™€λŠ” λ‹€λ₯Έ 도메인, μ»΄ν¬λ„ŒνŠΈ, 배포 ν”„λ‘œμ„ΈμŠ€λ₯Ό μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— 저희 λͺ¨λ…Έλ ˆν¬ μ„œλΉ„μŠ€μ— ν¬ν•¨λ˜μ–΄ μžˆμ§€ μ•Šκ³  λ³„λ„μ˜ μ €μž₯μ†Œλ‘œ λΆ„λ¦¬λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

μ—¬λŸ¬λΆ„μ΄ μ‚¬μš©ν•˜λŠ” ν”„λ‘œμ νŠΈμ— μ ν•©ν•œ 개발 방식을 μ„ νƒν•˜κ³ , λͺ¨λ…Έλ ˆν¬κ°€ μ—¬λŸ¬λΆ„μ˜ 선택이 λ˜μ—ˆμ„ λ•Œ 이 글이 μ‘°κΈˆμ΄λ‚˜λ§ˆ 도움이 λ˜μ—ˆμœΌλ©΄ μ’‹κ² λ‹€ μƒκ°ν•˜λ©° 글을 마치렀고 ν•©λ‹ˆλ‹€.
κ°μ‚¬ν•©λ‹ˆλ‹€.

← λͺ©λ‘μœΌλ‘œ λŒμ•„κ°€κΈ°

Art Changes Life

λ…Έλ¨ΈμŠ€μ™€ ν•¨κ»˜ μ—”ν„°ν…Œν¬ 산업을 ν˜μ‹ ν•΄λ‚˜κ°ˆ 멀버λ₯Ό μ°ΎμŠ΅λ‹ˆλ‹€.

μ±„μš© 쀑인 곡고 보기