MobX를 비동기화하는 방법은 async await을 사용하는 방법과 generator를 사용하는 방법이 있다. 1. async await import { makeObservable, action, runInAction, observable } from "mobx"; import axios from "axios"; export default class Test { info = ""; constructor() { makeObservable(this, { info: observable, get: action, }); } get = async () => { const data = await axios.get("/info"); runInAction(() => { console.log(data); this.inf..

슈퍼마켓 구현하기 MobX를 깊게 다루기 위해서 슈퍼마켓을 추상적으로 구현하려고 한다. market 스토어 작성 import { observable, action, computed, makeObservable } from "mobx"; export default class MarketStore { selectedItems = []; constructor() { makeObservable({ selectedItems: observable, put: action, take: action, total: computed, }); } put = (name, price) => { const exists = this.selectedItems.find((item) => item.name === name); if (!e..

카운터 만들기 yarn add mobx mobx-react import React, { Component } from "react"; import { observable, action, makeObservable } from "mobx"; import { observer } from "mobx-react"; class Counter extends Component { number = 0; constructor() { super(); makeObservable(this, { number: observable, increase: action, decrease: action, }); } increase = () => { this.number++; }; decrease = () => { this.number--..

MobX는 Redux와 같은 인기있는 React 상태 관리 라이브러리이다. MobX의 주요 개념들 1. Observable State( 관찰 받고 있는 상태 ) MobX를 사용하고 있는 앱의 상태는 Observable하다. 즉, 관찰 받고 있는 상태이다. 앱에서 사용하고 있는 State는 변할 수 있고, 만약 특정 부분이 바뀌면 MobX에서 어떤 부분이 바뀌었는지 알 수 있다. 2. Computed Value ( 연산된 값 ) 연산된 값은 기존 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값이다. 주로 성능 최적화를 위해서 사용된다. 어떤 값을 연산해야 할 때, 연산에 기반이 되는 값이 바뀔때만 새롭게 연산하고, 바뀌지 않으면 기존의 값을 사용할 수 있다. 예를들어, 800원짜리 물병을 4병 살..

1. 나무 흔들기 나무 흔들기(tree shaking)는 불필요한 코드를 제거해 주는 기능이다. 웹팩은 기본적으로 나무 흔들기 기능을 제공한다. 단, 웹팩에서 제대로 동작하지 않는 경우가 있다. 나무 흔들기를 잘 이해하고 있어야 번들 크기를 최소로 유지할 수 있다. npm install webpack webpack-cli // src/util_esm.js export const func1 = () => { console.log("func1_esm"); }; export const func2 = () => { console.log("func2_esm"); }; ESM(ECMAScript Modules) 문법을 사용하는 코드다. ESM에서는 import, export 등의 키워드를 사용한다. // src/u..

1. Plugin? Webpack의 Plugin은 로더보다 강력한 기능을 가지고 있다. 로더는 특정 모듈에 대한 처리만 담당하지만 Plugin은 Webpack이 실행되는 전체 과정에 개입할 수 있다. 2. 프로젝트 준비 npm install webpack webpack-cli react react-dom import React from "react"; import ReactDom from "react-dom"; const App = () => { return ( Webpack Plugin ); }; ReactDom.render(, document.getElementById("root")); 테스트를 위해서 간단한 React 프로그램 코드를 작성하였다. npm install @babel/core @babe..

1. import React from 'react' JSX 문법을 사용하면 우리는 import React from 'react'를 항상 사용한다. 하지만 실제로 해당 모듈을 우리가 사용한다는 느낌은 들지 않는다. Babel이 JSX 문법을 React.createElement 코드로 변환하기 때문에 우리가 실제로 사용을 하지 않지만 컴파일된 후 코드에는 React가 쓰이고 있다. 그렇기 때문에 우리가 사용한다고는 느끼지 못하지만 Babel을 통해서 React 모듈을 사용하고 있던 것이다.

0. Webpack? 웹팩은 모듈 번들러이다. 여기서 모듈은 각 리소스 파일을 말하고, 번들은 Webpack 실행 후 나오는 결과 파일이다. 하나의 번들 파일은 여러 모듈로 만들어진다. 즉, Webpack을 이용하면 우리가 제작한 여러 가지 리소스(js, css, ... )를 사용자에게 전달하기 좋은 형태로 만들 수 있다. 필요 이유? 초기 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었다. 자바스크립트는 돔을 간단하게 조작하는 역할만 했고, Ajax가 유행했을 때는 자바스크립트의 비중이 더 커졌지만 페이지당 자바스크립트 파일 몇 개면 충분했다. 하지만 SPA가 나오면서 하나의 HTML에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않았다...