ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • βœ” μš°μ•„ν•œ ν…Œν¬λŸ¬λ‹ 3κΈ°: React & TypeScript 1회차
    μš°μ•„ν•œ ν…Œν¬λŸ¬λ‹ 3κΈ° 2020. 9. 2. 23:10

    πŸš€ μš°μ•„ν•œ ν…Œν¬λŸ¬λ‹ 3κΈ° κ΅μœ‘μƒ

    • μ›λž˜ μ˜€ν”„λΌμΈμœΌλ‘œ 100λͺ…정도 λ½‘μ•„μ„œ ν•œλ‹€κ³  ν•˜λŠ”λ°, μ΄λ²ˆμ—λŠ” μ½”λ‘œλ‚˜μ˜ 영ν–₯으둜 온라인으둜 μ§„ν–‰λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
    • κ±°κΈ°λ‹€κ°€ μ΄λ²ˆμ—λŠ” μ½”λ‘œλ‚˜ λ•Œλ¬Έμ— 띄어 μ•‰μ•„μ•Όν•΄μ„œ μ•½ 30λͺ… 정도 뽑을 μƒκ°μ΄μ‹œλΌκ³  ν•˜μ…¨μ§€λ§Œ, μ½”λ‘œλ‚˜κ°€ 심해져 온라인으둜 μ§„ν–‰λ˜μ„œ μ•½ 400μ—¬λͺ…μ˜ κ΅μœ‘μƒμœΌλ‘œ λ½‘μ•˜λ‹€κ³  ν•˜μ…¨μŠ΅λ‹ˆλ‹€.
    • 근데 이 κ΅μœ‘μ„ λ“£κ³ μ‹Άμ–΄μ„œ μ§€μ›ν•œ μ‚¬λžŒλ§Œ 1200μ—¬λͺ….. 😀 열정적인 μ‚¬λžŒμ΄ ꡉμž₯히 λ§Žμ€ κ±° κ°™λ‹€..
    • 이번 κ΅μœ‘μ€ zoom을 μ΄μš©ν•΄μ„œ 온라인으둜 μ§„ν–‰λ˜μ—ˆκ³ , κ°•μ‚¬λ‹˜μ€ μš°μ•„ν•œν˜•μ œλ“€μ˜ κΉ€λ―Όνƒœλ‹˜(μ›Ήν”„λ‘ νŠΈμ—”λ“œκ°œλ°œ κ·Έλ£Ήμž₯)이 μ§„ν–‰ν•˜μ…¨μŠ΅λ‹ˆλ‹€.
    • λ˜ν•œ, 9μ›” ν•œλ‹¬λ™μ•ˆ ν™”, λͺ©μœΌλ‘œ μ§„ν–‰λ˜κ³  총 8회차둜 진행될 μ˜ˆμ •μ΄κ³  저도 계속 λλ‚ λ•Œλ§ˆλ‹€ λΈ”λ‘œκΉ…μ„ ν•  μ˜ˆμ •μž…λ‹ˆλ‹€. ✌

    πŸš€ μš°μ•„ν•œ ν…Œν¬λŸ¬λ‹ 3κΈ° κ·Έ 첫 μ‹œκ°„ μ†Œκ°œ

    • 첫 μ‹œκ°„μ΄λΌ κ·ΈλŸ°μ§€ ꡐ윑적인 뢀뢄보닀 ꡉμž₯히 쒋은 말씀을 많이 ν•΄μ£Όμ…¨λ‹€.

    🎈 μš°λ¦¬λ“€μ˜ κ³ λ―Ό..

    πŸ˜₯ λ‚΄κ°€ μ§€κΈˆ ν•˜κ³  μžˆλŠ”κ²Œ λ§žλŠ” 것인가? (λ‚΄κ°€ μ§€κΈˆ μž˜ν•˜κ³  μžˆλ‚˜..?)

    • 이 κ°•μ˜λ₯Ό μ‹ μ²­ν•  λ•Œ μ™œ 이 ν…Œν¬λŸ¬λ‹μ„ 듣고싢은가에 λŒ€ν•œ 질문이 μžˆμ—ˆλŠ”λ° 거기의 λŒ€λΆ€λΆ„μ˜ κ³ λ―Ό
      • κ°œλ°œμ„ ν• λ•Œ λ™μž‘μ€ 되고 해결은 λ˜λŠ”λ° 이게 μž˜ν•˜κ³  μžˆλŠ”κ±΄μ§€μ— λŒ€ν•œ μ˜κ΅¬μ‹¬μ΄ κ°€μž₯ 크닀. λ•Œλ¬Έμ— 이 ν…Œν¬λŸ¬λ‹μ„ ν†΅ν•΄μ„œ λ„€νŠΈμ›Œν‚Ήμ„ ν•˜κ³ μ‹Άκ³  μ‹œλ‹ˆμ–΄λ“€ν•œν…Œ λ°›λŠ” ν”Όλ“œλ°±κ³Ό 쑰언듀을 μ›ν•œλ‹€. (μ½”λ“œ ν’ˆμ§ˆμ— λŒ€ν•œ 문제, μ½”λ“œλ¦¬λ·°)
      • μ•„ν‚€ν…μ²˜λ‚˜ 섀계에 λŒ€ν•œ κ³ λ―Ό.
      • 적정 κΈ°μˆ μ— λŒ€ν•œ 고민으둜 react μƒνƒœκ΄€λ¦¬λ₯Ό ν•΄μ•Όν•  λ•Œ, Mobxλ₯Ό μ¨μ•Όν•˜λ‚˜, Reduxλ₯Ό μ‚¬μš©ν•΄μ•Όν•˜λ‚˜μ— λŒ€ν•œ κ³ λ―Ό
      • μ‚΄μž¬λ‘œ λ©΄μ ‘λ³Όλ•Œ κ°œλ°œμžλ“€μ—κ²Œ 이 κΈ°μˆ μ„ μ™œ μ„ νƒν–ˆμ–΄μš”? 물어봀을 λ•Œ, μ œλŒ€λ‘œ κ³ λ―Όν•΄μ„œ κΈ°μˆ μ„ μ„ νƒν•œ μ‚¬λžŒλ“€μ€ ꡉμž₯히 λ“œλ¬Όμ—ˆλ‹€.

    κ·Έλž˜μ„œ 그런 것듀은 ν¬κ΄„ν•΄μ„œ μ „λ‹¬ν•˜κ³  싢은 것듀은 ❓

    • λ„κ΅¬μ˜ λ°œμ „
      • 20~30λ…„ μ „μ—λŠ” λ°”λ‹₯(예λ₯Ό λ“€μ–΄ Nodeλ₯Ό λ§Œλ“ λ‹€.)λΆ€ν„° λ§Œλ“€μ–΄ Hello Worldλ₯Ό λ„μš°κΈ° μ΄λŸ°κ²ƒλ“€μ˜ κ³ λ―Όμ΄μ˜€λ‹€λ©΄, μ§€κΈˆμ€ λ„κ΅¬μ˜ λ°œλ‹¬λ‘œ 생산성 ν–₯상에 도움을 μ£ΌλŠ” 것듀이 많이 생겨났닀.
      • μ΄λŸ¬ν•œ 이유둜 고민의 관점이 λ‹¬λΌμ‘Œλ‹€. (예λ₯Ό λ“€μ–΄, μ–΄λ–€ 라이브러리λ₯Ό 쓰지? μ–΄λ–€ λ°©μ‹μœΌλ‘œ λ§Œλ“€μ–΄μ§€λŠ” μ•Œκ³ λ¦¬μ¦˜μ΄ μ’‹μ„κΉŒ?, μ„±λŠ₯은 μ–΄λ–¨κΉŒ λ“±..)
      • κ·Έλ ‡κΈ° λ•Œλ¬Έμ— μš”μ¦˜ ν”„λ‘œκ·Έλž˜λ° ν•™μŠ΅ 방법이 λ„κ΅¬μ˜ μ‚¬μš©λ°©λ²•μ„ μ΅νžˆλŠ” 것이닀.

    🎈 4μ£Όκ°„ μ§„ν–‰ν•˜λ©΄μ„œ 자주 듀을 ν‚€μ›Œλ“œ

    • μƒνƒœμ˜ 관리와 μ–΄λ–»κ²Œ λ‹€λ£° 것인가?
    • ν™˜κ²½: λŸ°νƒ€μž„ ν™˜κ²½λΏμ•„λ‹ˆλΌ κ°œλ°œν™˜κ²½μ— λŒ€ν•œ 큰 λ²”μ£Ό
    • μ œν’ˆ: μ‹€μ œ μ„œλΉ„μŠ€μ— λ‚˜κ°ˆ μ œν’ˆμ— λŒ€ν•œ 것
    • λ―Έμ…˜: κ·Έλž˜μ„œ 무엇보닀 μ–΄λ–€ 도ꡬλ₯Ό μ‚¬μš©ν•˜λ”λΌλ„ κ·Έ 도ꡬ가 μ›μ²œμ μœΌλ‘œ ν•΄κ²°ν•˜κ³ μž ν–ˆλ˜ λ―Έμ…˜μ„ 잘 μ΄ν•΄λ‚˜λŠ” 것이 κ·Έ 도ꡬλ₯Ό κ°€μž₯ 잘 μ‚¬μš©ν•˜λŠ” 방법이닀.
    • μƒλŒ€μ : μ΄λŸ°κ²ƒλ“€μ΄ λͺ¨λ‘ μƒλŒ€μ μΈκ²ƒλ“€.. μ΄ν•΄ν•˜κ³  μ μš©ν•˜λŠ” 것에 λ”°λΌμ„œ ν•œλ§ˆλ””λ‘œ μ •μ˜ν•˜κΈ°λŠ” 에맀

    🎈 이 κ°•μ˜ λͺ©ν‘œ

    • 각각에 λŒ€ν•œ κΈ°λ³ΈκΈ°λ₯Ό μ•Œλ €μ£Όκ³  λ””ν…ŒμΌν•œ 뢀뢄은 포인트λ₯Ό 집어주고 λ‚˜λ¨Έμ§€λŠ” κ·Έ 뢀뢄에 λŒ€ν•΄μ„œ 계속 ν•™μŠ΅μ„ μ΄μ–΄κ°€λ©΄μ„œ μŒ“μ•„κ°€κ³ , 이 κ°•μ˜κ°€ μ‹œμž‘ν•΄μ„œ 끝났닀고 끝이 μ•„λ‹ˆκ³  λ„€νŠΈμ›Œν‚Ήμ„ μ΄μ–΄κ°ˆ 수 있게 λ§Œλ“€ 수 있게 ν•˜κ³  μ‹Άλ‹€.

    🎈 κ°•μ˜λ₯Ό ν•˜λ©΄μ„œ 주둜 λ‹€λ£° 도ꡬ

    πŸš€ TypeScript

    • Type을 λͺ…μ‹œν•˜λŠ” 것.
    • νƒ€μž… 좔둠을 ν•  수 μžˆλŠ” νƒ€μž…μ„ λͺ…μ‹œν•˜μ§€ μ•Šμ•„λ„ TypeScriptκ°€ μ•Œμ•„μ„œ μΆ”λ‘ ν•΄μ„œ νƒ€μž…μ„ μ„ΈνŒ…ν•΄μ€€λ‹€.
    • let foo = 10;
    • μ‹€μ œλ‘œ 문제 일어날 λ•Œ λ‹€λ₯Έ νƒ€μž…μ˜ 값을 넣을 λ•Œ 였λ₯˜κ°€ λ°œμƒ
    // νƒ€μž…μ„ λͺ…μ‹œμ μœΌλ‘œ μ λŠ” λ°©λ²•μœΌλ‘œ λ³€μˆ˜λ’€μ—λ‹€ μ½œλ‘ μ„ ν•˜κ³  뒀에닀 μ λŠ”λ‹€. 
    let foo : number = 10; foo = false;

    🎈 λͺ…μ‹œμ μΈ 것과 암묡적인 것

    • 좔둠은 μ•ˆμͺ½μ—μ„œ μΌμ–΄λ‚˜κΈ° λ•Œλ¬Έμ— μ•”λ¬΅μ μ΄λ‹ˆκΉŒ λͺ…μ‹œμ μΈ κ²ƒλ³΄λ‹€λŠ” μ½λŠ” μ‚¬λžŒν•œν…Œ μ „λ‹¬ν•΄μ£ΌλŠ” μ •λ³΄λŸ‰μ΄ 적닀.
    • λͺ‡ μ‹­λ…„ μ „μ—λŠ” μ½”λ“œκ°€ λ³΅μž‘ν•΄λ„ 잘 μ§œμ—¬μ € λ³΄μ˜€μ§€λ§Œ, μš”μ¦˜μ€ λ‚œν•΄ν•œ μ½”λ“œλ³΄λ‹¨ λͺ…μ‹œμ μ΄κ³  읽기 μ‰¬μš΄ μ½”λ“œ(μ½”λ“œκ°€ 길더라도)λ₯Ό μ„ ν˜Έν•œλ‹€.
    • νƒ€μž… μŠ€νŽ™μ„ λ§Œλ“œλŠ” κ°œλ°œμžλ“€λ„ λΉ„μŠ·ν•œ 생각을 ν•˜κ³  있고, 또 이것이 μš”μ¦˜μ˜ νŠΈλžœλ“œ.
    • JavaScript λ˜ν•œ μ˜ˆμ „ μŠ€νŽ™μ—μ„œ μš”μ¦˜ λ‚˜μ˜€λŠ” μƒˆλ‘œμš΄ 문법듀이 λͺ…μ‹œμ μœΌλ‘œ ν‘œν˜„μ„ ν™•μž₯ μ‹œν‚€λŠ” 것이 보인닀.
    • λŒ€ν‘œμ μœΌλ‘œ κ°€λ³€μΈμž 같은 것.
    // λ°–μ—μ„œ 봀을 땐 쒋지 μ•Šκ΅¬λ‚˜. 
    // ν•¨μˆ˜ 내뢀에 μΈμžκ°€ 아무것도 μ—†κΈ° λ•Œλ¬Έμ— κ°€λ³€μΈμžλ₯Ό λ°›λŠ”μ§€ λͺ¨λ₯Έλ‹€. 암묡적.. 
    function bar() { 
        arguments. 
        return 0; 
    }
    bar(10,20);
    • κ·Έλž˜μ„œ spread operator(μŠ€ν”„λ ˆλ“œ 문법)이 λ‚˜μ˜¨κ²ƒλ„ 이런 이유.
    function bar(...args) { 
      return 0; 
    }
    bar(10,20);

    🎈 type alias

    • μ›μ‹œνƒ€μž…μ€ μΌλ°˜ν™”λ˜μ–΄μžˆκΈ° λ•Œλ¬Έμ— λ‹€μ–‘ν•˜κ²Œ μ‚¬μš©κ°€λŠ₯ν•˜λ‹€.
    • ν•˜μ§€λ§Œ νƒ€μž…μ— 의미λ₯Ό λΆ€μ—¬ν•˜κ³  싢을 땐 단점이 λœλ‹€.
    • κ·Έλž˜μ„œ ν‘œν˜„λ ₯을 λ„£κ³  μ‹Άμ„λ•Œ type aliasκ°€ μŠ€νŽ™μ„ μ œκ³΅ν•œλ‹€.
    // λŒ€μž…μ²˜λŸΌ λ³΄μ΄μ§€λ§Œ type alias 였λ₯Έμͺ½μ—μžˆλŠ” νƒ€μž…μ˜ 별λͺ…을 λΆ™μ—¬μ€€λ‹€. 
    type Age = number; 
    let age: Age = 10;
    • 객체 νƒ€μž…
    // 객체 type alias 
    type Foo = { 
      age: Age; // μ„Έλ―Έμ½œλ‘  
      name: string; 
    }
    
    const foo: Foo = {  
      age: 10, // 콀마  
      name: 'kim'  
    }
    • κ²°κ΅­ μ΅œμ’…μ μΈ νƒ€μž…μ€ Primitive type.

    🎈 interface

    • type alias와 λΉ„μŠ·ν•˜μ§€λ§Œ λ‘˜ 쀑에 μ–΄λ–€ μƒν™©μ—μ„œ μ–΄λ–€ 것을 μ‚¬μš©ν•˜λŠ” 것이 μ’‹μ„κΉŒ? 에 λŒ€ν•œ μ–˜κΈ°λŠ” 좔후에 μ•Œλ €μ€€λ‹€κ³  ν•˜μ‹ λ‹€.
    type Age = number; 
    
    interface Bar { 
      age: Age; 
      name: string; 
    } 
    
    const bar: Bar = { 
      age: 10, 
      name: "Kim", 
    };

    🎈 μ—λŸ¬ κ²€μΆœ

    πŸ”Έ νƒ€μž…μŠ€ν¬λ¦½νŠΈ 문법 μš”μ†Œμ—λŠ” 크게 두가지가 쑴재

    • 컴파일 νƒ€μž„μ—μ„œ μž‘λ™λ˜λŠ” μš”μ†Œ (type Alias, generic, interface)
    • λŸ°νƒ€μž„κΉŒμ§€ κ°€λŠ” 경우 μ—λŸ¬λ₯Ό μž‘λŠ” μš”μ†Œ (JavaScript둜 λ°˜ν™˜λ˜λŠ” μš”μ†Œ)
      • JavaScript둜 κ°œλ°œμ„ ν•  λ•ŒλŠ” 에디터 μƒνƒœμ—μ„œ λ‚˜λŠ” 였λ₯˜λ‘œ λ‚˜μ˜€λŠ” 것은 사싀상 λŸ°νƒ€μž„μ— λ‚˜μ˜€λŠ” μ—λŸ¬μ™€ 거의 μΌμΉ˜ν•˜λ‹€.
      • λ•Œλ¬Έμ— νƒ€μž…μŠ€ν¬λ¦½νŠΈκ°€ μ œκ³΅ν•˜λŠ” benefit은 거의 λ‹€ μ»΄νŒŒμΌνƒ€μž„μ— μ œκ³΅ν•˜λŠ” μž₯점이닀.

    πŸš€ TypeScriptλ₯Ό μ‚¬μš©ν•œ CRA(Create React App)

    • CRAλŠ” react app을 κ°€μž₯ λΉ λ₯΄κ²Œ λ§Œλ“œλŠ” 방법이닀.
    > yarn create-react-app woowahan --template typescript
    • μ΄λ ‡κ²Œ ν•˜λ©΄ tsconfig.json 파일과 tsx둜 이루어진 craκ°€ μƒμ„±λœλ‹€.
    • tsconfig.json νŒŒμΌμ€ typescript 컴파일러 μ˜΅μ…˜μ„ μ„€μ •ν•  수 μžˆλ‹€.
    import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    
    // μΈν„°νŽ˜μ΄μŠ€ 
    interface AppProps { 
      title: string; 
      color: string; 
    } 
    
    // νƒ€μž… μ •μ˜ 
    // μƒνƒœ : μ‹œκ°„μ˜ 흐름에 λ”°λΌμ„œ λ³€ν™”ν•˜λŠ” 것 
    // ν˜„μž¬ μƒνƒœλŠ” λΆˆλ³€ 
    function App(props: AppProps){ 
      return ( 
        <h1>{props.title}</h1> 
      ) 
    }
    
    // 버좔얼 λ”μ˜ λžœλ”λ₯Ό 이용 
    // λ‘κ°œμ˜ 인자 
    // render μ΅œμƒμœ„μ—μ„œλ§Œ μ‹€ν–‰ 
    // 단일 버좔얼 돔 
    ReactDOM.render( 
      // 첫번째 인자 λ¦¬μ•‘νŠΈ μ»΄ν¬λ„ŒνŠΈλ₯Ό DOM으둜 λ³€κ²½ν•œ λ‹€μŒμ— λ‘λ²ˆμ§Έ 인자 HTML μ»¨ν…Œμ΄λ„ˆμ— λΆ™μ³λ„£λŠ”λ‹€. 
      // StrictMode => κ²½κ³ ν•΄μ£ΌλŠ” μ•ˆλ‚΄ν•΄μ£ΌλŠ” κ°œλ°œνˆ΄μ—μ„œ μ œκ³΅ν•˜λŠ” 툴 
      <React.StrictMode> 
          <App title="Tech Hello?" color="blue"/> 
      </React.StrictMode>, 
      // λ”μœΌλ‘œ λ³€κ²½ν›„ root μ»΄ν¬λ„ŒνŠΈμ— λΆ™μΉœλ‹€. 
      document.getElementById('root') 
    );

    🎈 Babelμ—μ„œμ˜ JSX transpiler

    • Babel μ•ˆμ— μžˆλŠ” JSX transpilerκ°€ 였λ₯Έμͺ½μ²˜λŸΌ λ³€ν™˜ν•΄μ€€λ‹€.
    • κ·Έλ ‡κΈ° λ•Œλ¬Έμ— μ•ˆμ»λ‹€κ³  생각해도 λ¦¬μ•‘νŠΈ μ»΄ν¬λ„ŒνŠΈλŠ” 항상 λ¦¬μ•‘νŠΈ νŒ¨ν‚€μ§€ importλ₯Ό μ‹œμΌœμ•Όν•œλ‹€.
    • κ·Έ μ΄μœ λŠ” λ¦¬μ•‘νŠΈ νŒ¨ν‚€μ§€λŠ” λ³€ν™˜λœ λ‹€μŒμ— μ“°κΈ° λ•Œλ¬Έμ— λ³€ν™˜ν•˜κΈ° 전에 λ°˜λ“œμ‹œ 포함해쀀닀.
    • JSXλŠ” κ²°κ΅­ CreateElement라고 ν•˜λŠ” λ¦¬μ•‘νŠΈκ°€ μ œκ³΅ν•œ ν•¨μˆ˜λ₯Ό μ’€ 더 νŽΈν•˜κ²Œ λ§Œλ“€μ–΄λ†“μ€ (마치 HTML νƒœκΉ…ν•˜λ“―μ΄) ꡬ쑰일 뿐이닀.

    // 첫 번째 μΈμžλŠ” HTML νƒœκ·Έμ²˜λŸΌ 생긴 νƒœν¬λͺ…, λ‘λ²ˆμ§ΈμΈμžλŠ” Property, μ„Έλ²ˆμ§Έ μΈμžλŠ” Child
    function App() {
      return /*#__PURE__*/_react.default.createElement("h1", {
        id: "header"
      }, "hello ");
    }

    🎈 CRA의 μž₯점과 문제점

    • μž₯점: κ°„λ‹¨ν•˜κ³ , μ™ λ§Œν•œ 것듀은 λ‹€ μ„ΈνŒ…λ˜μ–΄μžˆλ‹€.
    • 단점
      • μž₯점 κ·Έ μ™Έμ˜ λͺ¨λ“  것은 단점
      • CRAκ°€ μ œκ³΅ν•˜μ§€ μ•ŠλŠ” μ„ΈνŒ…μ„ ν•  λ•Œ ꡉμž₯히 κΉŒλ‹€λ‘­λ‹€.
      • CRA의 μœ μ—°ν•˜μ§€ λͺ»ν•œ λͺ‡κ°€μ§€λ“€μ„ μ΄λ ‡κ²Œ λ°”κΏ¨μœΌλ©΄ 쒋겠닀라고 말을해도 CRA κΈ°μ—¬μžλΆ„λ“€μ€ λ³΄μˆ˜μ μ΄λΌμ„œ 잘 받아주지 μ•ŠλŠ”λ‹€.
      • κ°€μž₯ ν¬λ¦¬ν‹°μ»¬ν•œ λ¬Έμ œλŠ” λ‹€μ–‘ν•œ ν™˜κ²½μ— λŒ€ν•œ λŒ€μ‘μ΄ μ–΄λ ΅λ‹€.(local, product λ‘κ°€μ§€λ§Œ 지원)
      • ejectλ₯Ό μ‚¬μš©ν•΄ μ„€μ • νŒŒμΌμ„ λΉΌμ„œ μ»€μŠ€ν„°λ§ˆμ΄μ§•μ΄ κ°€λŠ₯ν•˜μ§€λ§Œ, 맀우 λ³΅μž‘ν•˜κ³  ν•˜μ§€λ§λΌκ³  ꢌ고λ₯Ό ν•˜κ³  μžˆλ‹€.

    πŸš€ μƒνƒœκ΄€λ¦¬

    🎈 Flux

    • 제일 λ¨Όμ € λ‚˜μ˜¨ approachκ°€ flux μ•„ν‚€ν…μ²˜πŸŽˆ

    🎈 Redux

    • reduxλŠ” fluxλ₯Ό 쑰금 더 μ •ν˜•ν™”ν•˜κ³  더 μ“°κΈ° νŽΈν•˜κ³  simpleν•˜κ²Œ μ œκ³΅λ˜λŠ” 라이브러리

    🎈 Mobx

    • MobxλŠ” redux의 λŒ€μ±„ν’ˆλ³΄λ‹€λŠ” μ™„μ „νžˆ μƒνƒœλ₯Ό κ΄€λ¦¬ν•˜λŠ” νŽ˜λŸ¬λ‹€μž„μ„ 바꿔버린 λ‹€λ₯Έ 방식이닀.
    • μƒνƒœλ„ λ‹€λ₯΄κ³  μƒνƒœλ₯Ό λ°”λΌλ³΄λŠ” 관점도닀λ₯΄λ‹€.
    • μ²˜μŒμ— μ“°λ©΄ ꡉμž₯히 νŽΈν•˜μ§€λ§Œ, λ‹¨μˆœν•œ 것은 λ‹¨μˆœν•œ ν˜•νƒœλ₯Ό μ·¨ν•˜λŠ” μ΄μœ κ°€ μžˆλ‹€.
    • λ‹¨μˆœν•œ ν˜•νƒœλ₯Ό 가지면 κ·Έκ±Έ λ§Œλ“  μ‚¬λžŒμ΄ μ›ν•˜λŠ” ν˜•νƒœλ„ 결과물을 κ°€μ΄λ“œν•˜κΈ° 쉽기 λ•Œλ¬Έμ΄λ‹€.

    πŸš€ 첫번째 μ‹œκ°„ μˆ˜κ°• ν›„κΈ°

    • 일단 κ°•μ˜ν•˜μ‹œλŠ” κΉ€λ―Όνƒœλ‹˜κ»˜μ„œ ꡉμž₯히 μΉœμ ˆν•˜κ²Œ μ•Œλ €μ£Όμ…¨κ³  그에 따라 배울점이 λ§Žλ‹€κ³  λŠκΌˆμŠ΅λ‹ˆλ‹€.
    • 쀑간에 μ‰¬λŠ” μ‹œκ°„μ΄ λ‘λ²ˆμ •λ„ μžˆμ—ˆμ§€λ§Œ κ·Έ μ‹œκ°„ λ§ˆμ €λ„ μ§ˆλ¬Έμ— 닡변을 ν•΄μ£ΌλŠ” QnA μ‹œκ°„μ„ κ°€μ‘ŒμŠ΅λ‹ˆλ‹€.
    • reactλ₯Ό 곡뢀λ₯Ό ν•˜λ©΄μ„œ λ­”κ°€ 잘 λͺ» κ³΅λΆ€ν•˜κ³  μžˆλ‹€λŠ” 생각이 λ“€μ—ˆκ³  그에 λ”°λΌμ„œ μžκ·Ήμ„ 많이 λ°›μ•˜λ˜ κΈ°νšŒμ˜€μŠ΅λ‹ˆλ‹€.
    • κ΅μœ‘μƒλ“€ λ˜ν•œ 정말 열정적이고 λ°°μš°κ³ μžν•˜λŠ” μ˜μ§€?κ°€ λ§Žμ•„μ„œ 벌써 μŠ¬λž™λ°©λ„ 파쑌고 이번 κΈ°νšŒμ— λ„€νŠΈμ›Œν‚Ήμ΄ μž˜λ˜μ„œ μŠ€ν„°λ””λ₯Ό ν•  수 μžˆλŠ” κΈ°νšŒκ°€ μƒκ²ΌμœΌλ©΄ μ’‹κ² μŠ΅λ‹ˆλ‹€.
    • μ•žμœΌλ‘œ 남은 κ΅μœ‘κΈ°κ°„λ„ κΈ°λŒ€κ°€ 되고 μ§‘μ€‘ν•΄μ„œ 듀을렀고 λ…Έλ ₯ν•΄μ•Όκ² μŠ΅λ‹ˆλ‹€.. 😀

    πŸš€ μ£Όλ‹ˆμ–΄λ“€ν•œν…Œ ν•΄μ£Όκ³  싢은 말(κΉ€λ―Όνƒœ λ‹˜κ»˜μ„œ..)

    • μ£Όλ‹ˆμ–΄λ“€μ΄ μ‹œλ‹ˆμ–΄μ™€ λΉ„κ΅ν–ˆμ„ λ•Œ μ••λ„μ μœΌλ‘œ μœ λ¦¬ν•œ 뢀뢄은 μ‹œκ°„
    • 이 μ‹œκ°„μ΄ μžˆλ‹€λŠ” benefit을 μΆ©λΆ„νžˆ ν™œμš©ν•΄μ„œ μ΄ˆμ‘°ν•˜κ²Œ μ—¬λŸ¬κ°€μ§€ 곡뢀λ₯Ό ν•˜λŠ” κ±° λ³΄λ‹€λŠ” μ‹œκ°„μ΄ μΆ©λΆ„νžˆ μžˆμœΌλ‹ˆ μ—¬μœ λ₯Ό 가지고 ν–ˆμœΌλ©΄ μ’‹κ² λ‹€.
    • 이 μ‹œκ°„μœΌλ‘œ μ—¬λŸ¬ 정보λ₯Ό μŠ΅λ“ν•  수 μžˆλŠ”λ° 이걸 λ°©ν•΄ν•˜λŠ” 것이 μ΄ˆμ‘°ν•œ 생각이닀.
    • 이런 생각이 μ‹œκ°„μ΄ μ§€λ‚ μˆ˜λ‘ 자기 μžμ‹ μ„ 많이 νž˜λ“€κ³  μ§€μΉ˜κ²Œ ν•œλ‹€.
    • λ•Œλ¬Έμ— λ§ˆλΌν†€μ„ μ‹œμž‘ν–ˆλ‹€ μƒκ°ν•˜κ³  μ—¬μœ λ₯Ό 가져라!

    λŒ“κΈ€ 0

Designed by Seungmin Sa.