우아한 테크러닝 3기 - 8회차

1. 예제로 확인하는 MobX

mobX-react : 6.0.0 이상이어야 리액트 훅을 사용할 수 있다.
- 하위 버전의 경우 mobx-react-lite 를 쓴다. (훅을 지원하는 mobX 라이트버전)
fetch 프로젝트는 flow를 이용해서 한다.

import { inject, observer } from 'mobx-react'

interface AppProps {
	data?: number;
	counter?: number;
}

// 구 버전에서는 아래와 같이 썻다.
// 클래스
@inject("cart")
@observer
export default class App extend React.Component<AppProps>{
	render(){
		return (
			<div className="App">
				<h1>
					외부 데이터: {this.props.data} vs. {this.props.counter}
				</h1>
			</div>
		)
	}
}

export default App;

마치 Tiny saga같은 느낌의 mobX

mobx.configure({ enforceActions: "observed" })

class Store {
    @observable githubProjects = []
    @observable state = "pending"

    fetchProjects = flow(function* () {
        // <- note the star, this a generator function!
        this.githubProjects = []
        this.state = "pending"
        try {
            const projects = yield fetchGithubProjectsSomehow() // yield instead of await
            const filteredProjects = somePreprocessing(projects)
            // the asynchronous blocks will automatically be wrapped in actions and can modify state
            this.state = "done"
            this.githubProjects = filteredProjects
        } catch (error) {
            this.state = "error"
        }
    })
}

2. test

Unit test: 주로 testing library, jest를 많이 쓴다.
End to End test: cypress
성공하는 테스트는 반드시 성공, 실패하는 테스트는 반드시 실패해야 한다.

= 테스트 자체가 순수 함수(funtional, immutable)와 같은 속성을 가지고 있다.

= 주변 dependency(side Effect)에서 격리되어야 한다.

= 때문에, 자연스럽게 앱의 구조와 컴포넌트의 구조도 자연스럽게 바뀔 수 밖에 없다.

= 규모가 늘어나도, 낮은 복잡도를 유지할 수 있다.
Unit 테스트가 완료되었다고 해서 프로덕션(endToend)의 에러가 없을 수는 없다.

6. Q&A 그리고 참고링크

싱글톤이란?

객체를 1개만 생성해서 사용하는 방식을 싱글톤이라고 한다.