jtwjs Dev Wiki
  • DEV_ROAD
    • ๐Ÿ’ช๐Ÿป ์ƒ์กดํ•˜๊ธฐ
    • Week 1
      • ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…
      • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
      • ๋ฆฌ์—‘ํŠธ
      • Testing Library
      • Parcel & ESLint
    • Week 2
      • JSX
      • Virtual DOM
    • Week 3
      • React Component
      • React State
    • Week 4
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
    • Week 5
      • TDD
      • React Testing Library
      • MSW
      • Playwrite
      • Snapshot
    • Week 6
      • Separtion of Concerns
      • Principle
      • DI, (Dependency Injection)
      • Reflect-metadata
      • TSyringe
      • External Store
      • Follow Redux
      • usestore-ts
      • useSyncExternalStore
    • Week 7
      • Routing
      • Routes
      • Router
      • Navigation
    • Week 8
      • Design System
      • Style Basics
      • CSS-in-JS
      • Styled-Components
      • Global Style & Theme
    • Week 9
      • ๊ฐœ๋ฐœํ•˜๊ธฐ ์ „ ์ค€๋น„
      • ์ƒํ’ˆ ๋ชฉ๋ก ํŽ˜์ด์ง€
      • ์ƒํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€
      • ์žฅ๋ฐ”๊ตฌ๋‹ˆ ํŽ˜์ด์ง€
    • Week 10
      • ๋กœ๊ทธ์ธ
      • ๋กœ๊ทธ์•„์›ƒ
      • ํšŒ์›๊ฐ€์ž…
      • ์ฃผ๋ฌธ ๋ชฉ๋ก & ์ฃผ๋ฌธ ์ƒ์„ธ
    • Week 11
      • ๋ฐฐ์†ก ์ •๋ณด ์ž…๋ ฅ
      • ํฌํŠธ์› ๊ฒฐ์ œ ์š”์ฒญ
      • ๋ฐฐ์†ก ๋ฐ ๊ฒฐ์ œ ์ •๋ณด ์ „๋‹ฌ
    • Week 12
      • ๊ด€๋ฆฌ์ž ์›น์‚ฌ์ดํŠธ๊ฐœ๋ฐœ์‹œ์ž‘
  • DEV_NOTE
    • TypeScript
      • ๊ธฐ๋ณธ์  ๋ฌธ๋ฒ•
        • Enum
        • ๋‹คํ˜•์„ฑ
          • Untitled
        • ๊ตฌ์กฐ์  ํƒ€์ดํ•‘
        • ์ œ๋„ˆ๋ฆญ ํƒ€์ž…
        • ์ปจ๋””์…”๋„ ํƒ€์ž…
        • ํ•จ์ˆ˜ ๋ฉ”์„œ๋“œ ํƒ€์ดํ•‘
        • infer๋กœ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ์ถ”๋ก  ์ง์ ‘ ํ™œ์šฉ
        • ์žฌ๊ท€ ํƒ€์ž…
        • ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ํƒ€์ž…
        • ์ถ”๊ฐ€์ ์ธ ํƒ€์ž… ๊ฒ€์‚ฌ satisfies ์—ฐ์‚ฐ์ž
        • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ฑด๋ง์ฆ
        • ์›์‹œ ์ž๋ฃŒํ˜•์—๋„ ๋ธŒ๋žœ๋”ฉ ๊ธฐ๋ฒ• ์‚ฌ์šฉ ๊ฐ€๋Šฅ
        • ํƒ€์ž… ์ขํžˆ๊ธฐ
        • ์œ ์šฉํ•œ ํƒ€์ž… ๋งŒ๋“ค๊ธฐ
        • ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ํ•จ์ˆ˜
        • ์•ฐ๋น„์–ธํŠธ ์„ ์–ธ๋„ ์„ ์–ธ ๋ณ‘ํ•ฉ์ด ๋œ๋‹ค.
        • ์•ฐ๋น„์–ธํŠธ ์„ ์–ธ๋„ ์„ ์–ธ๋ณ‘ํ•ฉ์ด ๋œ๋‹ค.
    • Testing
      • Unit Testing
      • ๋‹จ์œ„ ํ…Œ์ŠคํŠธ์˜ ๋‘ ๋ถ„ํŒŒ
      • ์ข‹์€ ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” 4๋Œ€ ์š”์†Œ
      • ํ…Œ์ŠคํŠธ ๋Œ€์—ญ๊ณผ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋Š” ๋™์ž‘
      • ๋‹จ์œ„ ํ…Œ์ŠคํŠธ ์Šคํƒ€์ผ
      • ๊ฐ€์น˜ ์žˆ๋Š” ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•œ ๋ฆฌํŒฉํ† ๋ง
      • ํ†ตํ•ฉ ํ…Œ์ŠคํŠธ
      • Cross Browsing Testing
      • ๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ ์ข…๋ฅ˜
      • React Testing Pattern
      • ํ”„๋ก ํŠธ์—”๋“œ ํ…Œ์ŠคํŠธ ์ž…๋ฌธ
        • ํ…Œ์ŠคํŠธ ๋ฒ”์œ„
        • ๋‹จ์œ„ ํ…Œ์ŠคํŠธ ๊ฒ€์ฆ
        • Mock
        • UI ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ
        • ํ…Œ์ŠคํŠธ ์ปค๋ฒ„๋ฆฌ์ง€
        • ์›น ํ†ตํ•ฉ ํ…Œ์ŠคํŠธ
        • MSW
        • ์Šคํ† ๋ฆฌ๋ถ
        • ์‹œ๊ฐ์  ํšŒ๊ท€ ํ…Œ์ŠคํŠธ
        • E2E ํ…Œ์ŠคํŠธ
        • Github Actions ์„ค์ •
        • ๊นƒํ—ˆ๋ธŒ ์•ก์…˜์—์„œ E2E
      • ์‹œํ”„ํŠธ ๋ ˆํ”„ํŠธ
        • ํ…Œ์ŠคํŠธ ๊ธฐ๋ณธ์ค‘์˜ ๊ธฐ๋ณธ
        • ๋‹จ์œ„ ํ…Œ์ŠคํŠธ
        • ์ฝ”๋“œ ๋ณต์žก๋„
        • ๋ฆฌํŒฉํ„ฐ๋ง
        • ์ฝ”๋“œ ๋ฆฌ๋ทฐ
        • ํ†ตํ•ฉ ํ…Œ์ŠคํŠธ ํŒจํ„ด
        • ์‹œ์Šคํ…œ ํ…Œ์ŠคํŠธ์˜ ์ž๋™ํ™”
        • ํƒ์ƒ‰์  ํ…Œ์ŠคํŠธ
      • Test Tip
      • vitest
      • playwright
      • Test Data Generator
      • MSW
    • Algorithm
      • coding test
      • Data Structure
    • Next.js
      • Data Fetching
      • Hydration
      • Next 13
      • Optimization
      • Next 15
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
    • Storybook
      • Storybook
      • CSF3
      • CDD
      • Headless Component
    • Funtional Programming
      • ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ
      • ์ฐธ์กฐ ํˆฌ๋ช…์„ฑ
      • ๋ถ€์ˆ˜ํšจ๊ณผ
      • ํ•จ์ˆ˜ ํ•ฉ์„ฑ
      • ์ œ๋„ˆ๋ฆญ ํƒ€์ž… ํ™œ์šฉํ•˜๊ธฐ
      • ์•”๋ฌต์  ์ž…์ถœ๋ ฅ
      • ์•ก์…˜๊ณผ ๊ณ„์‚ฐ, ๋ฐ์ดํ„ฐ
      • ๊ณ„์ธตํ˜• ์„ค๊ณ„
      • ํ˜ธ์ถœ ๊ทธ๋ž˜ํ”„
      • ํ•จ์ˆ˜ํ˜• ์„ค๊ณ„
      • ๋ถˆ๋ณ€์„ฑ
      • ์ผ๊ธ‰ ํ•จ์ˆ˜
      • ํ•จ์ˆ˜ํ˜• ๋„๊ตฌ
    • Git
      • Github Actions
      • Conflict
      • Branch ์ „๋žต
    • Contents Format
      • Audio
    • 3D Graphic
      • 3D keyword
      • Three.js
      • Geometry
      • Material
      • Light
      • Camera
      • Decal
      • Rotation
      • Text
      • Shadow
      • Fog
      • Post Processing
      • Animation
      • Math
        • Vector Space
        • ๋ฒกํ„ฐ์˜ ์—ฐ์‚ฐ
        • ํšŒ์ „ ๊ณ„์‚ฐ
      • 3D ์ปจํ…์ธ ๊ฐ€ ๋งŒ๋“ค์–ด์ง€๋Š” ๊ณผ์ •
      • R3F
      • Env
      • Scene
      • Transform
      • R3F
      • Interaction & Raycast
      • Rendering Algorithnm
      • Blender
      • Blender
    • Accessibility
      • ์ ‘๊ทผ์„ฑ์ด๋ž€
    • Interactive Web
      • Parallax
      • Canvas
      • requestAnimationFrame
      • Effect
      • HSL
      • React.js + Canvas
      • Matter.js
    • AWS
      • DevOps
      • Amplify
      • S3
      • ํด๋ผ์šฐ๋“œ ์ปดํ“จํŒ…
        • ์˜จํ”„๋ ˆ๋ฏธ์Šค์™€ ํด๋ผ์šฐ๋“œ
        • ํด๋ผ์šฐ๋“œ ๋„์ž…ํšจ๊ณผ
        • ํด๋ผ์šฐ๋“œ ์ปดํ“จํŒ…์˜ ๋ฒ”์œ„
        • ์ปดํ“จํŒ… ์˜ต์…˜
          • EC2 - Virtual Machin
          • ECS, EKS - Container
          • Lambda - Serverless
        • ๋„คํŠธ์›Œํฌ ๊ฐ€์ƒํ™”
        • ์Šคํ† ๋ฆฌ์ง€
        • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค
        • ๋ฐ์ดํ„ฐ ์ˆ˜์ง‘
        • ๋จธ์‹  ๋Ÿฌ๋‹ ์˜์—ญ
        • IoT ์˜์—ญ
        • ๋ธ”๋ก์ฒด์ธ ์˜์—ญ
      • ํด๋ผ์šฐ๋“œ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„
    • Network
      • Web Server & WAS
    • System Design
      • System Design
      • Component
      • ์˜์กด์„ฑ์„ ๋ฐฐ์ œํ•œ ๊ฐœ๋ฐœ
      • Error Handling
      • Architecture
        • ๋ชจ๋…ธ๋กœํ‹ฑ ์•„ํ‚คํ…์ฒ˜
        • Clean Architecture
        • Layered Architecture
        • ์ด๋ฒคํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜
      • ์ƒํ™ฉ์„ ํŒŒ์•…ํ•˜๋Š” ๋ฉ”ํƒ€์ธ์ง€
      • ์ค‘๋ณต ๋ฌธ์ œ ํ•ด๊ฒฐํ•˜๊ธฐ
      • Monorepo Arhitecture
        • ๋ชจ๋…ธ๋ ˆํฌ ์šด์˜๊ณผ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…
        • Module Federation
      • ์ฝ”๋“œ ๋ณ‘๋ชฉ์ง€์ 
      • API ๋Œ€์‘
      • ๊ณตํ†ต ์ฝ”๋“œ
      • Infra ๊ตฌ์ถ•
      • ๋ชจ๋“ˆ ๊ธฐ๋ฐ˜์˜ ๊ฐœ๋ฐœ ๋ฐฉ์‹
      • Design System
        • ์ตœ์†Œ ์ˆ˜์ค€์˜ ์•„ํ‚คํ…์ฒ˜ ์„ค์ •
        • ๋” ํšจ์œจ์ ์ธ ๋””์ž์ธ์‹œ์Šคํ…œ ๋งŒ๋“ค๊ธฐ
        • ๋””์ž์ธ ์‹œ์Šคํ…œ๊ณผ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ชฉ์ 
        • ๋””์ž์ธ ํ† ํฐ
      • ํšจ์œจ์ ์ธ ์—…๋ฌด
        • ์—…๋ฌด ํ”„๋กœ์„ธ์Šค ๋ณ‘๋ชฉ ํŒŒ์•…
      • Clean Code
      • Design Pattern
        • CQRS Pattern
        • Strangler Fig Pattern
        • ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ํŒจํ„ด
        • ์ปค๋งจ๋“œ ํŒจํ„ด
        • ์ „๋žต ํŒจํ„ด
        • ์˜ต์ €๋ฒ„ ํŒจํ„ด
      • A/B ํ…Œ์ŠคํŒ…
      • ๋Œ€๊ทœ๋ชจ ๋ฆฌ์—‘ํŠธ ์›น์•ฑ ๊ฐœ๋ฐœ
        • ๋ณต์žก์„ฑ ๊ด€๋ฆฌ
        • ๋ชจ๋“ˆ์„ฑ
        • ์„ฑ๋Šฅ
        • ๋””์ž์ธ ์‹œ์Šคํ…œ
        • ๋ฐ์ดํ„ฐ ํŒจ์นญ
        • ์ƒํƒœ ๊ด€๋ฆฌ
        • ๊ตญ์ œํ™”
        • ์ฝ”๋“œ ์กฐ์งํ™”ํ•˜๊ธฐ
        • ๊ฐœ์ธํ™” A/B ํ…Œ์ŠคํŒ…
        • ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์›น ์•„ํ‚คํ…์ฒ˜
        • ํ…Œ์ŠคํŒ…
        • ํˆด๋ง
        • ๊ธฐ์ˆ ์  ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
        • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
        • ๋ผ์šฐํŒ…
        • ์‚ฌ์šฉ์ž ์ค‘์‹ฌ API ๋””์ž์ธ
        • ๋ฆฌ์•กํŠธ ๋ฏธ๋ž˜
    • Performance
      • React DevTools
      • Component ์ตœ์ ํ™”
      • Page Load
      • API
    • MFA
      • MSA
      • MFA ๋„์ž…ํ•˜๊ธฐ
      • Monorepo
        • Monorepo Tool
        • Yarn Berry Workspace
        • Turborepo
      • MFA Composition
      • SPA ํ†ตํ•ฉ
      • Design System
      • Package Manager
        • Yarn
        • pnpm
      • Transpiler & Bundler
        • Babel
        • Rollup
        • esbuild
        • swc
        • Webpack
        • Vite
      • ๋ถ„ํ•ด์™€ ํ†ตํ•ฉ์„ ์œ„ํ•œ ์—ฌ๋Ÿฌ ๊ธฐ์ˆ  ๋น„๊ต
    • State Management
      • Zustand
    • React v18
      • Automatic batching
      • Suspense
      • Transition
    • SEO
      • Search Engine Optimization
      • Open Graph Element
      • Metadata
    • FE Develop
      • Scrubbing
      • Clipboard
    • Refactoring
      • ๋ฆฌํŒฉํ† ๋ง ๊นŠ๊ฒŒ ๋“ค์—ฌ๋‹ค๋ณด๊ธฐ
      • ๊ธด ์ฝ”๋“œ ์กฐ๊ฐ๋‚ด๊ธฐ
      • ํƒ€์ž… ์ฝ”๋“œ ์ฒ˜๋ฆฌํ•˜๊ธฐ
      • ์œ ์‚ฌํ•œ ์ฝ”๋“œ ์œตํ•ฉํ•˜๊ธฐ
      • ๋ฐ์ดํ„ฐ ๋ณดํ˜ธ
      • ์ฝ”๋“œ ์ถ”๊ฐ€ ๋ฐ ์ œ๊ฑฐ
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • ์ปค์Šคํ…€ ํ›…
      • ์ฝ”๋“œ ๋ถ„ํ• ํ•˜๊ธฐ with Suspense, lazy
      • Suspense์™€ ์ด๋ฏธ์ง€ ์ ์žฌํ•˜๊ธฐ
      • useTransition, uesDeferredValue
      • SuspenseList
Powered by GitBook
On this page
  • Arhitecture
  • ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋งŒ๋“ค๊ณ  ์ ์šฉํ•˜๊ธฐ๊นŒ์ง€
  • ๊ฒฐ๋ก 
  • ํด๋” ์ŠคํŠธ๋Ÿญ์ฒ˜์˜ ๋ณ€ํ™”
  • ๋‹จ๊ณ„๋ณ„ ์ฝ”๋“œ์˜ ๋ณ€ํ™”
  • ์ปดํฌ๋„ŒํŠธ ๋ ˆ๋ฒจ์˜ ๋ณ€ํ™”
  • ์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ณตํ†ต ์ฝ”๋“œ์˜ ํ•„์š”์„ฑ ๋Œ€๋‘
  • ํ˜‘์—… ํ”„๋กœ์„ธ์Šค์˜ ๋ณ€ํ™”
  1. DEV_NOTE
  2. System Design

Monorepo Arhitecture

Previous์ค‘๋ณต ๋ฌธ์ œ ํ•ด๊ฒฐํ•˜๊ธฐNext๋ชจ๋…ธ๋ ˆํฌ ์šด์˜๊ณผ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…

Last updated 8 months ago

Arhitecture

์•„ํ‚คํ…์ฒ˜๋Š” ๋ชจ๋‘๊ฐ€ ์ดํ•ดํ•ด์•ผ ํ•˜๋Š” ์ปค๋‹ค๋ž€ ๊ทธ๋ฆผ์ด๋‹ค.

๋ชจ๋…ธ๋ ˆํฌ ์‚ฌ์šฉ์„ ์œ„ํ•ด ์ดํ•ดํ•ด์•ผํ•˜๋Š” Point

  • ๊ตฌ์กฐ์— ๋Œ€ํ•œ ์ดํ•ด: ๊ณ„์ธต, ์–ด๋–ค ์ฝ”๋“œ๊ฐ€ ์–ด๋”” ์žˆ๋Š”์ง€, ๋ชจ๋…ธ๋ ˆํฌ ๊ตฌ์กฐ์— ๋Œ€ํ•œ ์ดํ•ด

  • ๋ฐœ์ „ ๋ฐฉํ–ฅ์— ๋Œ€ํ•œ ์ดํ•ด: ์•ž์œผ๋กœ ์–ด๋–ป๊ฒŒ ๊ตฌ์กฐ๊ฐ€ ๋ฐœ์ „ํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ์‘์ง‘ํ•  ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•œ ์ดํ•ด

  • ํ˜‘์—… ๋ฐฉํ–ฅ์— ๋Œ€ํ•œ ์ดํ•ด: ํƒ€ ์ง๊ตฐ๋„ FE์™€ ์–ด๋–ป๊ฒŒ ์ผํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

#1 ์žฅ๊ธฐ์ ์ธ ๋ชฉํ‘œ ๊ตฌ์กฐ ์ž‘์„ฑ

  • ์ฒ˜์Œ์œผ๋กœ ํ•  ๊ฒƒ์€ ์žฅ๊ธฐ์ ์ธ ๋ชฉํ‘œ๋Š” ์•„๋‹ˆ๋”๋ผ๋„, ์šฐ๋ฆฌ๊ฐ€ ์ผ์ฐจ์ ์œผ๋กœ ๋‹ฌ์„ฑํ•  ์žฅ๊ธฐ์ ์ธ ๋ชฉํ‘œ๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ

  • ๊ณตํ†ต์˜ ์ฝ”๋“œ ๋ฐฐ์น˜์™€ ๋ ˆ์ด์•„์›ƒ/์ƒํƒœ/๋น„์ฆˆ๋‹ˆ์Šค ๋“ฑ์˜ ์ฝ”๋“œ๋ฅผ ํ—ˆ์šฉํ•˜๋Š” ๋ชจ๋…ธ๋ ˆํฌ์˜ ๊ตฌ์กฐ ์ œ์ž‘

#2. ์žฅ๊ธฐ์ ์ธ ๋ชฉํ‘œ ์ž˜๊ฒŒ ๋‚˜๋ˆ„๊ธฐ

  1. ๋ชจ๋…ธ๋ ˆํฌ ํ™˜๊ฒฝ ๊ตฌ์ถ•

  2. ํ˜„์žฌ ์ฝ”๋“œ๋ฅผ ์˜จ์ „ํžˆ ๋ชจ๋…ธ๋ ˆํฌ๋กœ ์˜ฎ๊ธฐ๊ธฐ

  3. ์ •์ƒ์ ์œผ๋กœ QA ์ง„ํ–‰ ํ›„ ๋ฐฐํฌ

  4. ๊ณตํ†ต ์ฝ”๋“œ ๋ถ„๋ฆฌ

  5. ๊ณตํ†ต ์ฝ”๋“œ ์ ์šฉ ๋ฐ QA ๋ฐฐํฌ

  6. ๊ณตํ†ต ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์ฒด๊ณ„ ์ˆ˜๋ฆฝ ๋ฐ ์ ์šฉ

์•„ํ‚คํ…์ฒ˜๋ฅผ ๋งŒ๋“ค๊ณ  ์ ์šฉํ•˜๊ธฐ๊นŒ์ง€

  • ์•„ํ‚คํ…์ฒ˜๋Š” ๋งŒ๋“ค๊ณ  ๊ณ ์ธํ•˜๊ธฐ ์‰ฝ์ง€๋งŒ, ์„ค๋“ ํ›„ ์‹ค์ œ ๊ฐœ๋ฐœ์ด ์ง„ํ–‰๋˜๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ์–ด๋ ต๋‹ค.

    • ํƒ€๋‹น์„ฑ์„ ๋ถ€์—ฌํ•˜๊ธฐ ์œ„ํ•ด ์‹ค ์ ์šฉํ•˜๊ธฐ ์œ„ํ•œ phase๋ฅผ ๋‚˜๋ˆ„๊ณ , ์ตœ๋Œ€ํ•œ ๊ทธ๋ฆผ์œผ๋กœ ์„ค๋“

  • ์ž‘์€ ๊ฒƒ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ์‹คํŒจ ํ™•๋ฅ ์ด ๋‚ฎ์€ ์„ฑ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์— ๋Œ€ํ•ด์„œ ์ตœ๋Œ€ํ•œ ๋งŽ์ด ์Œ“๊ธฐ

    • ์‹ ๋ขฐ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•

  • ํ•จ๊ป˜ ๋‹ค๋ฅธ ์ž‘์—…์„ ๊ฐ™์ด ํ•˜์ง€ ์•Š๊ธฐ

    • ๋ถ„๋ฆฌ๋Š” ๋ถ„๋ฆฌ๋Œ€๋กœ, ์ ์šฉ์€ ์ ์šฉ๋งŒ

์•„ํ‚คํ…์ฒ˜์— ํ•„์ˆ˜์ ์œผ๋กœ ํฌํ•จ๋˜๋ฉด ์ข‹์„ ๊ฒƒ๋“ค

  • ์ €์žฅ์†Œ ์ „์ฒด์˜ ํด๋” ๊ตฌ์กฐ ๊ทธ๋ฆฌ๊ณ  ํ”„๋กœ์ ํŠธ ๋ณ„ ํด๋” ๊ตฌ์กฐ

  • ๊ฐ ํ”„๋กœ์ ํŠธ ๋ณ„ ์ธํ”„๋ผ ๊ตฌ์ถ•, ์ž‘์—… ๋‹ด๋‹น์ž

  • ์ „์ฒด ๊ณตํ†ต์˜ ์ฝ”๋“œ๋ฅผ ๋‚˜๋ˆ„๋Š” ๊ธฐ์ค€, ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•œ ์Šน์ธ ํ”„๋กœ์„ธ์Šค

  • ๋ธŒ๋žœ์น˜ ์ „๋žต์— ๋”ฐ๋ฅธ ๊ฐœ๋ฐœ, ์šด์˜ ํ™˜๊ฒฝ

  • ํ”„๋กœ์ ํŠธ ๋ณ„ ์นด์šดํ„ฐ ํŒŒํŠธ

๊ฒฐ๋ก 

  • ๋ชจ๋…ธ๋ ˆํฌ ์ „ํ™˜์„ ํ†ตํ•ด ๋” ๋ณตํ•ฉ์ ์ธ ์ƒํ™ฉ์„ ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ์กฐ๋กœ ๋‚˜์•„๊ฐ„๋‹ค.

  • ์—ฌ๋Ÿฌ ๋„๋ฉ”์ธ์˜ ํ”„๋กœ๋•ํŠธ๋ฅผ ์ฝ”๋“œ ์ €์žฅ์†Œ ํ•˜๋‚˜๋กœ ํ•ฉ๋ณ‘ํ•˜๋ฉด์„œ ํŒ€์›์ด ํ•˜๋‚˜์˜ ๋ฐฉํ–ฅ์„ฑ์„ ์ธ์ง€๊ฐ€๋Šฅ

  • ์ผ๊ด„์ ์ธ ํ˜‘์—… ํŒ€ ๊ธฐ๋ฐ˜์˜ ๋„๋ฉ”์ธ ๋ถ„๋ฆฌ ๋“ฑ์„ ํ†ตํ•ด ์—…๋ฌด ๋ฐฉ์‹์ด ์ผ์›ํ™” ๋  ์ˆ˜ ์žˆ์Œ

  • ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ๋ฌผ๋ฆฌ์ ์œผ๋กœ ์ฝ”๋“œ๋“ค์ด ๋ถ„๋ฆฌ๋˜์–ด ์žˆ์ง€ ์•Š์œผ๋ฏ€๋กœ ์–ด๋А์ •๋„ ๊ทœ๊ฒฉํ™”๋œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Œ

  • ํ”„๋กœ์ ํŠธ ๋‹จ์œ„๋กœ ์„ค์ •๋œ CI/CD, ์ž๋™ํ™”, ํŒŒ์ดํ”„๋ผ์ธ ๋“ฑ ์ผ์›ํ™” ๊ฐ€๋Šฅ

  • ์ฝ”๋“œ ์ „์ฒด ๋‹จ์œ„์˜ ํ…Œ์ŠคํŠธ ์ปค๋ฒ„๋ฆฌ์ง€, ์ธํ”„๋ผ, ์„ค์ • ์ƒํ™ฉ ๋“ฑ์„ ํ•œ๋ˆˆ์— ํŒŒ์•… ๊ฐ€๋Šฅ

ํด๋” ์ŠคํŠธ๋Ÿญ์ฒ˜์˜ ๋ณ€ํ™”

๋‹จ๊ณ„๋ณ„ ์ฝ”๋“œ์˜ ๋ณ€ํ™”

  • Phase1์€ ๋ชจ๋…ธ๋ ˆํฌ์— ๊ทธ๋Œ€๋กœ ํ”Œ์  ๋ ˆ๋ฒจ์˜ ์ฝ”๋“œ๋ฅผ ์ด์‹ํ•˜๋Š” ๊ฒƒ์ด ํ‚ค ํฌ์ธํŠธ

    • Lint๋“ฑ์€ ์ค‘์•™ํ™” ์‹œํ‚ด

  • Phase2๋Š” ์ด์‹๋œ ๊ฐ ํ”„๋กœ์ ํŠธ ๋ ˆ๋ฒจ์˜ ๊ณตํ†ต ์ฝ”๋“œ๋ฅผ ๋ฝ‘์•„๋‚ด๋Š” ๊ฒƒ

    • ์ด ๋•Œ ํ”„๋กœ์ ํŠธ๋ณ„ ์ฝ”๋“œ์˜ ์šฉ๋Ÿ‰์ด ๋งค์šฐ ์ค„์–ด๋“ ๋‹ค.

  • Phase3๋Š” ๊ณตํ†ต ์ฝ”๋“œ๋ฅผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌํ™” ์‹œ์ผœ ์šด์˜ํ•˜๋Š” ๊ฒƒ

    • ๊ณตํ†ต ์ฝ”๋“œ๋ฅผ ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋กœ์„ธ์Šค ๋ฐ ํŒŒ์ดํ”„๋ผ์ธ์ด ๊ตฌ์ถ•๋˜์–ด์•ผ ํ•œ๋‹ค.

์ปดํฌ๋„ŒํŠธ ๋ ˆ๋ฒจ์˜ ๋ณ€ํ™”

  • Library Layer: ์•ž์œผ๋กœ ๋ณ€ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๊ฑฐ์˜ ์—†๊ณ  ๋ฒ„์ €๋‹์œผ๋กœ ๋ฒ„์ „ ๊ด€๋ฆฌ๊ฐ€ ์ž˜ ๋˜๋Š” ๊ฒƒ๋“ค

  • Common Layer: ๊ณตํ†ต์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ์ฝ”๋“œ๋ฅผ ์œ ์ง€๋ณด์ˆ˜ํ•˜๋Š” ๋ ˆ์ด์–ด

    • ์•„์ง Product๋“ค์— ์—ฌ๋Ÿฌ๊ตฐ๋ฐ ์“ฐ์ด์ง€๋งŒ ์“ฐ์ด๋Š” ๊ฒƒ๋“ค์ด ์กฐ๊ธˆ staging์ด ๋œ๊ฒƒ

    • ๊ฑฐ์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด ์—†๊ณ  ์žฌ์‚ฌ์šฉ์ด ๋†’์€ ๊ฒƒ

  • ๊ฐ ํ”„๋กœ์ ํŠธ๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋“ค๊ณ  ์žˆ์œผ๋ฉฐ, ํ”„๋กœ์ ํŠธ๋ณ„๋กœ ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ ๋˜ํ•œ ํฌํ•จํ•œ๋‹ค.

์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ณตํ†ต ์ฝ”๋“œ์˜ ํ•„์š”์„ฑ ๋Œ€๋‘

๊ฐ ํ”„๋กœ๋•ํŠธ ๋ณ„ ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค์— ๋Œ€์‘ํ•˜๋Š” ํ˜„์ƒ

  • ๊ทœ๋ชจ๊ฐ€ ์ปค์งˆ์ˆ˜๋ก ๋น„์Šทํ•ด์ง€๋Š” API ์ŠคํŽ™๊ณผ ๋น„์Šทํ•œ ๋กœ์ง์ด ์ƒ๊ธฐ๊ฒŒ ๋จ

  • API ์ฝ”๋“œ๋ฅผ ๋ฐ›์•„ ํŽ˜์ด์ง€ ๋‹จ์œ„๋กœ ์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜์—ฌ, ์ „์—ญ ์ƒํƒœ์™€ ๋‹ค๋ฅธ ์ƒํƒœ ๊ด€๋ฆฌ ์ณฌ๊ฒŒ๊ฐ€ ํ•„์š”ํ•ด์ง

  • ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด Common Layer์— API๋ฅผ ๋„์™€์ฃผ๋Š” ํ—ฌํผ ์ฝ”๋“œ๋“ค์„ ์ถ”๊ฐ€ํ•˜๊ฒŒ ๋œ๋‹ค.

  • ๋ชจ๋…ธ๋ ˆํฌ์—์„œ ์›Œํฌ์ŠคํŽ˜์ด์Šค ํ”„๋กœํ† ์ฝœ์ด๋ผ๊ณ  ์›Œํฌ์ŠคํŽ˜์ด์Šค ๋‹จ์œ„๋กœ ๋ชจ๋“ˆ์„ ๋งŒ๋“ค์–ด์„œ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค.

    • Model Layer: API Code๋“ค์˜ ๊ณตํ†ต์ ์ธ ๋ถ€๋ถ„ (๋ชจ๋ธ ๊ฐ’, ๋น„์ฆˆ๋‹ˆ์Šค ์ฝ”๋“œ๋“ค์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ์•ˆ ๋“ฑ)

    • Server State Management Tools: Server State Managment ์˜์—ญ์— ์ฝ”๋“œ ์ ˆ๊ฐ

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ์ฝ”๋“œ๋“ค์ด 100% ๋ฌธ์ œ ์—†๊ณ  ๋ชจ๋…ธ๋ ˆํฌ ๋ฐ”๊นฅ์œผ๋กœ ๋นผ๋„ ๋…์ž์ ์œผ๋กœ ์‚ด์ˆ˜ ์žˆ๋Š” ๋ ˆ๋ฒจ์ด์–ด์•ผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋“ฑ์žฌ๋จ

API๋ฅผ ๋Œ€์‘ํ•˜๋Š” ๋ณ„๋„์˜ ๋ ˆ์ด์–ด๋ฅผ ๊ตฌ์ถ•

  • Apps์— ๋ ˆ๋ฒจ์ด ์•„๋‹Œ ๋ณ„๋„ API ๋ ˆ๋ฒจ์„ ๋งŒ๋“ค์–ด์„œ Library๋ฅผ ์—ฐ๊ฒฐํ•˜๊ณ  App์€ ์บก์Аํ™”ํ•˜์—ฌ ์ฝ”๋“œ๋“ค์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๊ฒŒ๋” ํ•˜๊ณ  App์— ๋Œ€ํ•œ Server State Managment๋กœ ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ตฌ์กฐ

๊ฐ ํ”„๋กœ๋•ํŠธ์˜ ์„œ๋ฒ„ ๋ณ„ ์ฝ”๋“œ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•œ ๊ณ ๋ฏผ

  • ์นด์šดํ„ฐ ํŒŒํŠธ๊ฐ€ ํ•œ์ •๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ API์˜ ์‘๋‹ต ๊ตฌ์กฐ์ฒด๋Š” ๋น„์Šทํ•ด์ง„๋‹ค.

  • ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ์กฐ๊ฐ€ ํ•„์š”ํ•ด์ง

    • ๊ณตํ†ต API ๋ชจ๋“ˆ, Interface ํ™•์žฅ๋“ฑ์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋จ

    • ์ „์ฒด ํ”„๋กœ์ ํŠธ ๊ณตํ†ต ์—๋Ÿฌ์ฒ˜๋ฆฌ ํ•„์š”

  • ์ด๋ฅผ ์œ„ํ•œ API๋ฅผ ์œ„ํ•œ ์•ž ๋‹จ์˜ ๋ ˆ์ด์–ด ํ˜น์€ Common ๋ ˆ์ด์–ด์— ๊ณตํ†ต์˜ ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ์ „๋žต ๋“ฑ์ด ํ•„์š”ํ•˜๋‹ค.

ํ˜‘์—… ํ”„๋กœ์„ธ์Šค์˜ ๋ณ€ํ™”

์ฝ”๋“œ ์ž‘์—…, ๊ณต์œ  ํ”„๋กœ์„ธ์Šค์˜ ๋ณ€ํ™”

  • Polyrepo๋Š” ํ”„๋กœ์ ํŠธ ๋‹จ์œ„์˜ ์˜ํ–ฅ๋„๋งŒ ํŒŒ์•…ํ•˜๋ฉด ๋œ๋‹ค.

  • Monorepo๋Š” ๊ณตํ†ต ์ž‘์—… ๋“ฑ์˜ ์˜์—ญ์ด ์ถ”๊ฐ€๋˜๋ฏ€๋กœ ๋” ๋ณต์žกํ•œ ํ”„๋กœ์„ธ์Šค๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ๋‹ค.

    • ์˜คํžˆ๋ ค ํ”„๋กœ๋•ํŠธ๋Š” ์ž‘์€๋ฐ ์ ์šฉํ•˜๋ฉด ์˜ํ–ฅ๋ฒ”์œ„ ํŒŒ์•…์œผ๋กœ ์ธํ•ด ๋ฆฌ์†Œ์Šค๊ฐ€ ํšจ์œจ์ ์œผ๋กœ ์“ฐ์ด์ง€ ๋ชปํ•  ์ˆ˜ ์žˆ๋‹ค.

์ฝ”๋“œ ๋ฆฌ๋ทฐ ํ”„๋กœ์„ธ์Šค ๊ณ ๋„ํ™”์˜ ํ•„์š”์„ฑ

  • Polyrepo: ํ•˜๋‚˜์˜ ์ฝ”๋“œ๊ฐ€ ๊ณง ์šด์˜ํ•˜๋Š” ํ”„๋กœ๋•ํŠธ์ด๋ฏ€๋กœ ์ž๋™ํ™”์˜ ํ•„์š”์„ฑ์ด ์ ์„ ์ˆ˜ ์žˆ์Œ

  • Monorepo: ์ฝ”๋“œ๋ฆฌ๋ทฐ์–ด ๋งค์นญ, ๋ฆฌ๋ทฐ์‹œ ์ž๋™ ํ•ฉ๋ณ‘, ํ•ฉ๋ณ‘์‹œ ์ž๋™ ๋ฐฐํฌ ๋“ฑ์˜ ์ž๋™ํ™” ํ•„์š”์„ฑ ์กด์žฌ

    • ๋งŽ์€ ํ”„๋กœ๋•ํŠธ๋ฅผ ์šด์˜ํ•˜๋ฉด์„œ ๋•Œ์— ๋งž์ถฐ ๊ฐ ํ”„๋กœ๋•ํŠธ๋ฅผ ๋ฐฐํฌํ•˜๋Š” ๊ฒƒ์€ ์œ„ํ—˜์„ฑ๊ณผ ๋™์‹œ์— ์šด์˜์˜ ์–ด๋ ค์›€์ด ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ

์—…๋ฌด ์ง„ํ–‰ ๋ฐฉ์‹์˜ ๋ณ€ํ™”: ๋ฌธ์„œํ™”์˜ ์ค‘์š”์„ฑ ๋ถ€๊ฐ

  • Monorepo๋กœ ๋ณ€ํ™”ํ•˜๋ฉด์„œ ํžˆ์Šคํ† ๋ฆฌ์˜ ์ค‘์š”์„ฑ์€ "๋งค์šฐ" ์ปค์ง„๋‹ค.

    • ํ•˜๋‚˜์˜ ์ž‘์—…์ด ์ˆ˜๋งŽ์€ ํ”„๋กœ๋•ํŠธ์— ์˜ํ–ฅ์„ ๋ผ์น  ์ˆ˜ ์žˆ์Œ,

    • ์ด์ „์— ์–ด๋–ค ์„ ํƒ์ด ์–ด๋–ค ๊ฒฐ๊ณผ๋ฅผ ์žฅ๊ธฐ์ ์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ฌ์ง€ ๋ชจ๋ฅด๋ฏ€๋กœ ํžˆ์Šคํ† ๋ฆฌ๋ฅผ ํ†ตํ•ด ์ด์ „์˜ ์„ ํƒ์— ๋Œ€ํ•ด์„œ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณต์ด ๋˜์–ด์•ผ ํ•œ๋‹ค.

    • ๋Œ€๊ธฐ์—…์—์„œ ๋ฌธ์„œํ™”๋ฅผ ํ•˜๋Š” ์ด์œ ์™€ ๋™์ผ, ๋ฌธ์„œ๋ฅผ ์ž˜ ์ž‘์„ฑํ•ด์•ผํ•จ