*https://velog.io/@teo/MVI-Architecture*

πŸ“Β *https://velog.io/@teo/ν”„λ‘ νŠΈμ—”λ“œμ—μ„œ-MV-μ•„ν‚€ν…μ³λž€-λ¬΄μ—‡μΈκ°€μš”*

λΉ„μ¦ˆλ‹ˆμŠ€μ™€ λ·° 둜직

쒋은 μ•„ν‚€ν…μ²˜μ— λŒ€ν•΄ κ³ λ―Όν•˜μ§€ μ•Šκ³  κ°œλ°œμ„ ν•˜λ‹€λ³΄λ©΄,

ν”„λ‘œμ νŠΈ 크기가 컀질수둝 디버깅이 νž˜λ“€μ–΄μ§€κ³  ν™•μž₯성이 λ–¨μ–΄μ§€λŠ” λ¬Έμ œκ°€ 생김

πŸ•°οΈΒ FE μ•„ν‚€ν…μ²˜ λ³€μ²œμ‚¬

  1. HTML, CSS, JS
  2. jQuery
  3. MVC
  4. MVVM
  5. Container - Presenter
  6. FLUX & Redux
  7. Hooks & Context, Recoil, Zustand, Jotai
  8. React Query, SWR, Redux Query

κ΄€μ‹¬μ˜ 뢄리와 λŠμŠ¨ν•œ κ²°ν•©

Ajax & DOM μ‚¬μš©μ„ μš©μ΄ν•˜κ²Œ

HTML + JS λ¬Άμ–΄μ„œ 컨트둀러둜

선언적. 데이터 바인딩과 ν…œν”Œλ¦Ώ

μ»΄ν¬λ„ŒνŠΈ κ°„ λ³΅μž‘ν•œ 데이터 κ΅ν™˜

Props Drilling

β†’ λ„ˆλ¬΄ λ³΅μž‘ν•¨

β†’ κ²°κ΅­ μ„œλ²„ API κ΄€λ¦¬ν•˜λ €κ³  μ‚¬μš©ν•˜λŠ” 것

  1. HTML, CSS, JS

    μ„Έ κ΅¬μ„±μš”μ†Œκ°€ 각자의 λ°©μ‹λŒ€λ‘œ μ„±μž₯

    HTML은 μ„œλ²„κ°€ μž‘μ„±, JSλŠ” κ°„λ‹¨ν•œ λ™μž‘, CSSλŠ” ν™”λ©΄ 관리

  2. jQuery

    Ajax νƒ„μƒμœΌλ‘œ μ„œλ²„μ—μ„œλŠ” HTML을 λ§Œλ“€μ§€ μ•Šκ³  λ°μ΄ν„°λ§Œ κ΅ν™˜μ΄ κ°€λŠ₯

    JS μ΄μš©ν•΄ DOM μ‘°μž‘ν•˜λŠ” μž‘μ—…μ΄ μ€‘μš”ν•΄μ Έ jQuery 등을 ν™œμš©ν•œ 개발 ⬆️

  3. MVC

    데이터와 DOM을 μ‘°μž‘ν•˜λŠ” λ‘œμ§μ„ ν•˜λ‚˜λ‘œ κ΄€λ¦¬ν•˜λ €λŠ” μ›€μ§μž„

    ν™”λ©΄ λ‹¨μœ„κ°€ μ•„λ‹Œ μ»΄ν¬λ„ŒνŠΈ λ‹¨μœ„μ˜ λ°œμ „ μ‹œμž‘

  4. MVVM

    데이터 λ³€κ²½ λ•Œλ§ˆλ‹€ DOM을 μ‘°μž‘ν•΄μ•Ό ν–ˆλ˜ 방식을 μ„œλ²„μ—μ„œ ν•˜λ“―μ΄ ν…œν”Œλ¦Ώ λ°©μ‹μœΌλ‘œ

    ν…œν”Œλ¦Ώμ„ λ§Œλ“€κ³ , 데이터λ₯Ό λ°”μΈλ”©ν•˜κ³  변경을 감지해 κ°œλ°œν•˜λŠ” μ „λž΅

    e.g. React, Vue, Angular

  5. Container - Presenter

    μ»΄ν¬λ„ŒνŠΈκ°€ 데이터λ₯Ό 많이 가지고 있고 둜직이 ν©μ–΄μ§€κ²Œ λ˜λ©΄μ„œ μ–΄λŠ μ»΄ν¬λ„ŒνŠΈλ“€μ€ λ³΅μž‘ν•˜κ³  μž¬μ‚¬μš©μ„±μ΄ λ–¨μ–΄μ§€λŠ” 문제 λ°œμƒ

    데이터λ₯Ό λ°›μ•„μ„œ λ³΄μ—¬μ£ΌλŠ” readonly Presenter μ»΄ν¬λ„ŒνŠΈμ™€ 데이터 μ‘°μž‘μ„ 주둜 λ‹€λ£¨λŠ” Container μ»΄ν¬λ„ŒνŠΈλ₯Ό 뢄리

    λ°μ΄ν„°λŠ” propsλ₯Ό 톡해 λ‚΄λ €μ£Όκ³ , λ‘œμ§μ„ ν•œκ΅°λ°μ— λͺ¨μœΌκ³ , viewλŠ” μž¬μ‚¬μš©ν•˜λŠ” ν˜•νƒœμ˜ μ•„ν‚€ν…μ²˜ λ“±μž₯

    Untitled

  6. FLUX & Redux

    Props Drilling

    Untitled

    μƒμœ„μ˜ props듀을 ν•˜μœ„λ‘œ 전달, ν•˜μœ„ 이벀트λ₯Ό μƒμœ„λ‘œ μ „λ‹¬ν•˜λŠ” κ³Όμ •μ—μ„œ 쀑간에 λΆˆν•„μš”ν•œ props듀이 λ§Œλ“€μ–΄μ§€λŠ” ν˜„μƒ

    μ»΄ν¬λ„ŒνŠΈ 독립과 μž¬μ‚¬μš©μ„ μœ„ν•΄ λΆ„λ¦¬ν–ˆμ§€λ§Œ, 쀑간 μ»΄ν¬λ„ŒνŠΈλ“€λ‘œ 인해 였히렀 μƒμœ„-ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈ 결합이 더 단단해짐

    β†’ ꡳ이 λΉ„μ¦ˆλ‹ˆμŠ€ λ‘œμ§μ„ μ»΄ν¬λ„ŒνŠΈ κ³„μΈ΅μœΌλ‘œ λ§Œλ“€ ν•„μš”κ°€ μ—†λ‹€!

    데이터 λ‘œμ§μ„ λ³„κ°œλ‘œ 두고 Action을 톡해 데이터λ₯Ό λ³€κ²½ν•˜λ©΄ μ»΄ν¬λ„ŒνŠΈλŠ” 이 데이터에 직접 μ—°κ²°ν•΄μ„œ μ‚¬μš©ν•˜λŠ” FLUX νŒ¨ν„΄

    β†’ λΉ„μ¦ˆλ‹ˆμŠ€ λ‘œμ§μ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ λΆ„λ¦¬ν•˜κ³  λ³„λ„λ‘œ κ΄€λ¦¬ν•˜λŠ” 도ꡬ듀, μƒνƒœ 관리

  7. Hooks & Context, Recoil, Zustand, Jotai

    ν•˜μ§€λ§Œ Redux에 λ„ˆλ¬΄ λ§Žμ€ 보일러 ν”Œλ ˆμ΄νŠΈ, κ³Όν•œ 문법 체계가 ν•„μš”ν•΄ μ€‘μ†Œ 규λͺ¨ ν”„λ‘œμ νŠΈμ—μ„œλŠ” 였히렀 μ˜€λ²„μ—”μ§€λ‹ˆμ–΄λ§

    React Hooks 더 κ°„κ²°ν•œ λ¬Έλ²•μœΌλ‘œ μ™ΈλΆ€ λΉ„μ¦ˆλ‹ˆμŠ€ 둜직 연동을 κ°€λŠ₯ν•˜κ²Œ 함

    Context props drilling 없이도 μƒμœ„ propsλ₯Ό ν•˜μœ„λ‘œ 전달할 수 μžˆλŠ” 방법 제곡

    still, μ „μ—­ μƒνƒœκ΄€λ¦¬κ°€ μš©μ΄ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ—

    Atomμ΄λΌλŠ” μ „μ—­ 객체λ₯Ό ν†΅ν•΄μ„œ 데이터λ₯Ό κΈ°λ‘ν•˜κ³  λ³€κ²½ 감지λ₯Ό 톡해 view둜 μ „λ‹¬ν•˜λŠ” Recoil, Zustand, Jotai λ“±μ˜ 방식듀이 λŒ€μ•ˆμœΌλ‘œμ„œ μ œμ‹œ