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
  • MSA (Microservices Architecture)
  • Monolith
  • Frontend & Backend
  • Frontend & Microservice Backend
  • Micro Frontends
  1. DEV_NOTE
  2. MFA

MSA

PreviousMFANextMFA ๋„์ž…ํ•˜๊ธฐ

Last updated 1 year ago

MSA (Microservices Architecture)

์ปค๋‹ค๋ž€ Monolith ๋ฐฑ์—”๋“œ๋ฅผ ์ž‘์€ ์„œ๋น„์Šค๋กœ ๋‚˜๋ˆ„๊ณ  ๊ฐ ์„œ๋น„์Šค๋ฅผ ๋…๋ฆฝ์ ์ด๊ณ  ๋А์Šจํ•˜๊ฒŒ ๊ฒฐํ•ฉ๋˜๊ฒŒ ๋งŒ๋“œ๋Š” ์•„ํ‚คํ…์ฒ˜

Monolith

  • ํ”„๋ก ํŠธ, ๋ฐฑ์—”๋“œ (API, DB)๋ฅผ ํ•˜๋‚˜์˜ ํŒ€, ํ•˜๋‚˜์˜ ํ”„๋กœ์ ํŠธ์—์„œ ํ•จ๊ป˜ ๋งŒ๋“ค์–ด ์ˆ˜์ • ๋ฐ ๋ฐฐํฌ๋ฅผ ์ง„ํ–‰

  • ํ”„๋ก ํŠธ ์‚ฌ์ด๋“œ, ๋ฐฑ์—”๋“œ ์‚ฌ์ด๋“œ ์ผ๋ถ€๋ถ„์„ ์ˆ˜์ •ํ•˜๋”๋ผ๋„ ์ ์šฉํ•˜๋ ค๋ฉด ์ „์ฒด ํ”„๋กœ๊ทธ๋žจ์„ ๋ฐฐํฌํ•ด์•ผํ•จ

  • ์ž‘์€ ๋ถ€๋ถ„์„ ๋ณ€๊ฒฝํ•ด๋„ ์ „์ฒด์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ํ†ตํ•ฉ๋œ ํ•˜๋‚˜์˜ ์‹œ์Šคํ…œ์„ ์˜๋ฏธ

Frontend & Backend

  • ๋งŽ์€ ์ธ์›์ด ๋™์‹œ์— ํšจ์œจ์ ์œผ๋กœ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ๋กœ ํŒ€์„ ๋ถ„๋ฆฌ

  • ๋‚˜๋‰œ ํ”„๋ก ํŠธ์™€ ๋ฐฑ์—”๋“œ๋Š” API ์ธํ„ฐํŽ˜์ด์Šค ๊ธฐ๋ฐ˜์œผ๋กœ ์†Œํ†ตํ•˜๋ฉฐ ๊ฐœ๋ฐœํ•˜๊ณ  ๋ฐฐํฌ๋„ ๋…๋ฆฝ์ ์œผ๋กœ ์ง„ํ–‰

"์‹œ์Šคํ…œ์„ ์„ค๊ณ„ํ•˜๋Š” ์กฐ์ง์€ ์กฐ์ง์˜ ์˜์‚ฌ์†Œํ†ต ๊ตฌ์กฐ๋ฅผ ๋นผ๋‹ฎ์€ ๊ตฌ์กฐ์˜ ๋””์ž์ธ์„ ๋งŒ๋“ค๊ฒŒ ๋œ๋‹ค." - ์ฝ˜์›จ์ด์˜ ๋ฒ•์น™

Frontend & Microservice Backend

  • ๋ฐฑ์—”๋“œ๋Š” ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค๋ฅผ ๋”์šฑ ์ „๋ฌธ์ ์œผ๋กœ ๊ณ ๋„ํ™”์‹œํ‚ฌ ๋ชฉ์ ์œผ๋กœ ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค๋ฅผ ๋„์ž…

  • ๊ธฐ๋Šฅ์ ์œผ๋กœ ๋‚˜๋‰œ ์—ฌ๋Ÿฌ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค๋“ค๊ณผ ํ”„๋ก ํŠธ์—”๋“œ ์‚ฌ์ด์˜ ๋น„ํšจ์œจ์„ฑ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด BFF ์™€ GraphQL์ด ์œ ํ–‰ํ•˜๊ฒŒ ๋จ

Aggregration Layer (e.g. BFF, GraphQL...)

์—ฌ๋Ÿฌ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค์—์„œ ์˜ค๋Š” ๋‹ค์–‘ํ•œ ๋ฉ”์‹œ์ง€ ๊ทœ๊ฒฉ ๋˜๋Š” ๋ฐ์ดํ„ฐ ํ˜•์‹์„ ํ†ต์ผ๋œ ํ‘œ์ค€ ํ˜•์‹์œผ๋กœ ๊ฐ€๊ณตํ•˜๊ณ  ์ œ๊ณตํ•ด์คŒ์œผ๋กœ์จ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ผ๊ด€๋œ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.

Aggregation Layer๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ ์ง„์ ์œผ๋กœ MFA๋กœ ์ „ํ™˜ํ•˜๋Š” ๋ฐฉ์‹์„ ๊ณ ๋ ค

  • BFF(Backend For Frontend) โ†’ ์—ฌ๋Ÿฌ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค๋“ค๊ณผ ํ”„๋ก ํŠธ์—”๋“œ ์‚ฌ์ด์— ๋‚€ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ์œ„ํ•œ ์ค‘๊ฐœ ์„œ๋ฒ„

    • ์—ฌ๋Ÿฌ ๋ฐฑ์—”๋“œ์‚ฌ์ด๋“œ์˜ ๋ฉ”์‹œ์ง€ ๊ทœ๊ฒฉ์„ ํ†ต์ผํ™” ์‹œ์ผœ์ฃผ๋Š” ์—ญํ• 

    • ํŠน์ • ์‘๋‹ต๊ฐ’์„ ์–ป๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ

    • ๋ธŒ๋ผ์šฐ์ € ํ†ต์‹ ์— ๋…ธ์ถœ ์œ„ํ—˜์ด ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋“ค์„ ๋ณด๊ด€ ํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ

    • ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๊ณ ๋น„์šฉ์˜ ๋ณต์žกํ•œ ์—ฐ์‚ฐ์ž‘์—…์„ BFF์— ์œ„์ž„ํ•˜์—ฌ ์ถ”์ƒํ™”๋œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณต

  • GraphQLโ†’ Graphql์˜ schema(๊ทœ๊ฒฉ)์„ ์ œ๊ณตํ•ด์คŒ์œผ๋กœ์จ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ์„ ์š”์ฒญ

    • ๋‹จ์ผ ์—”๋“œํฌ์ธํŠธ๋กœ ๋ชจ๋“  ๋ฐ์ดํ„ฐ ์š”์ฒญ์„ ์ฒ˜๋ฆฌ

    • ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ํ‘œ์ค€ํ™”

REST API์˜ ๋‹จ์  โ†’ ๊ทœ๊ฒฉ์ด ์—†๋‹ค.

End point๋งŒ ์žˆ๊ณ  ๊ทœ๊ฒฉ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฌธ์„œํ™”ํ•ด์„œ ์•Œ๋ ค์ฃผ๊ฑฐ๋‚˜ ์‘๋‹ต์˜ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๊ณ  ํ™•์ธํ•˜๋Š” ๋ฐฉ๋ฒ• ๋ฟ

Micro Frontends

"๋…๋ฆฝ์ ์œผ๋กœ ์ œ๊ณต ๊ฐ€๋Šฅํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋ชจ์—ฌ ๋” ํฐ ๊ตฌ์กฐ๋กœ ๊ตฌ์„ฑ๋˜๋Š” ์•„ํ‚คํ…์ฒ˜ ์Šคํƒ€์ผ"

๋ฐฑ์—”๋“œ์˜ Microservice ์›์น™์„ ํ”„๋ก ํŠธ๊นŒ์ง€ ํ™•์žฅํ•˜๋ ค๋Š” ์‹œ๋„๊ฐ€ ๋Š˜์–ด๋‚˜๊ฒŒ ๋˜๋ฉด์„œ Micro Frontends๋ผ๋Š” ์šฉ์–ด๊ฐ€ ์ƒ๊ธฐ๊ฒŒ ๋จ

  • ํŒ€์˜ Mission์„ ์™„์ˆ˜ํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ ์ง๊ตฐ์˜ ๋‹ค์–‘ํ•œ ํŒ€์›๋“ค์ด ๋ชจ์—ฌ ์—…๋ฌด๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์ž์œจ์ ์œผ๋กœ ์ˆ˜ํ–‰

  • ์‹œ์ž‘ ์ง€์ ์ธ ๊ธฐํš๋ถ€ํ„ฐ ๋์ง€์ ์ธ ๋ฐฐํฌ๊นŒ์ง€ ๋ชจ๋‘ ๋‹คํ•˜๋Š” ํŒ€์„ End-to-End ํŒ€(๋ชฉ์  ์กฐ์ง, Cross Functional Team, Chapter, Silo)์ด๋ผ ๋ถ€๋ฅธ๋‹ค.

  • ๋‹จ์ˆœํ•œ ๊ธฐ์ˆ ์˜ ๋ฌธ์ œ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์กฐ์ง์˜ ๋ฌธ์ œ๊นŒ์ง€ ํ’€์–ด๊ฐ„๋‹ค.

  • ํฌ๊ณ  ๋ณต์žกํ•œ ์ œํ’ˆ์„ ์—ฌ๋Ÿฌ ํŒ€์ด ๋™์‹œ์— ๋‚˜๋ˆ„์–ด ์‰ฝ๊ฒŒ ์ž‘์—…์„ ์ง„ํ–‰

  • ์ด๋Ÿฐ ๋ณ€ํ™”๋Š” ๊ธฐ์ˆ ์ ์ธ ๋ถ€๋ถ„์—๋งŒ ๊ตญํ•œ๋˜์ง€ ์•Š๊ณ  ์กฐ์ง ์ฒด๊ณ„๊นŒ์ง€ ํ•จ๊ป˜ ๋ณ€ํ™”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํฐ ๋น„์šฉ์ด ๋ฐœ์ƒํ•œ๋‹ค.

  • ๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋กœ ์–ป๋Š” ์ด์ ์ด ๋” ๋งŽ์„ ๋•Œ ๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

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

์ „ GitHub CTO, "์ง€๋‚œ 10๋…„๊ฐ„ ๊ฐ€์žฅ ํฐ ์•„ํ‚คํ…์ฒ˜ ์‹ค์ˆ˜๋Š” ํ’€ ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค๋กœ ์ „ํ™˜ํ•œ ๊ฒƒ"
๋งˆํ‹ด ํŒŒ์šธ๋Ÿฌ - ์†Œํ”„ํŠธ์›จ์–ด ์•„ํ‚คํ…์ฒ˜์˜ ์ค‘์š”์„ฑ