전체 글
8장 함수 조합의 원리와 응용
함수 조합은 작은 기능을 하는 여러 함수를 pipe나 compose라는 이름의 함수로 조합하여 조금씩 더 의미 있는 함수로 만들어 가는 코드 설계 기법이다. 이번 장은 함수 조합의 토대가 되는 고차 함수와 커리, 그리고 이들을 이용한 함수 조합에 간해 살펴보자. 8-1 함수형 프로그래밍이란? 함수형 프로그래밍은 순수 함수와 선언형 프로그래밍의 토대 위에 함수 조합과 모나드 조합으로 코드를 설계하고 구현하는 기법이다. 함수형 프로그래밍은 다음 세 가지 수학 이론에 기반을 두고 있다. 람다 수학(ramda calculus) : 조합 논리와 카테고리 이론의 토대가 되는 논리 수학 조합 논리(combinatory logic) : 함수 조합의 이론적 배경 카테고리 이론(category theory) : 모나드 조..
7장 비동기 콜백 함수
이번 장은 비동기 API를 사용하는 코드를 쉽게 작성하게 하는 Promise 클래스와 async/await 구문에 대해 살펴보자 7-1 비동기 콜백 함수 이번 장은 노드제이에스가 제공하는 readFile과 같은 비동기 API를 예로 들고 있기 때문에 tsconfig.json 파일에 별도의 설정이 필요하다. // tsconfig.json { "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es2015", "moduleResolution": "node", "outDir": "dist", "baseUrl": ".", "sourceMap": true, "downlevelIteration": true, // 이 부분을 t..
GraphQL 이란
GraphQL은 Facebook에서 만든 Graph Query Language라는 애플리케이션 레이어 쿼리 언어이다. 즉, API를 위한 쿼리 언어이며 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임이다. GraphQL은 특정한 데이터베이스나 스토리지에 귀속되어 있지 않으며 기존 코드와 데이터에 의해 대체된다. Sql은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이지만, GraphQL은 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것이 목적이다. 또한, GraphQL은 기존에 사용하고 있는 RESTApi의 한계점을 극복하고자 나온 통신 규약으로 RESTApi를 대체할 수 있다. REST API의 한계 REST API는 모든 Resource들을 하나의 Endpo..
Asynchronous actions
이번에는 mobx에서 비동기 액션 처리를 알아보자 가장 쉬운 방법은 액션을 비동기 로직으로 만들지 말고 각각 state를 변하는 액션을 따로따로 만든 다음에 비동기 로직은 container에서 구현하고 단계별로 state를 변경하는 액션은 별도로 분리해서 호출하는 방식이 있다. 두 번째 방식은 액션 안에서 async await 로직을 실행하면서 state를 변경해야 할 때 runinaction 함수로 타이밍마다 state를 변경하는 방식이 있다. 마지막으로는 mobx에서 제공하는 generator를 사용해서 비동기 로직을 처리하는 방식이 있다. 첫 번째 방식 // UserStore 생성 import { action, makeObservable, observable } from "mobx"; export ..
stores
이번에는 하나의 스토어가 아닌 여러개의 스토어를 사용해보자! TodoStore와 RootStore를 만들어보자 // todoStore import { observable } from "mobx"; export default class TodoStore { @observable todos = []; } // rootStore import PersonStore from "./PersonStore"; import TodoStore from "./TodoStore"; export default class RootStore { constructor() { this.todoStore = new TodoStore(); this.personStore = new PersonStore(); } } 이제 index.js에서..
@inject 와 Provider
@inject 와 Provider 프로바이더에 props로 넣고, @inject로 꺼내 쓴다고 보면 된다 상당히 명시적이고 편하다 컨테이너를 쓰지 않아도 될 것 같지만 컨테이너를 중간에 작성 해 주는것이 프레젠테이션 컴포넌트의 테스트와 분리를 위해서 훨씬 좋다 props로 바꿔준다 this.props.store 설정해 보자 // index.js const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); // app.js export default inject("personStore")(observer(App)); mobx-react에서 가져온 inject로 다시 한 번 감싸준다 감싸면서 한 번 더 실행을 한다 그 안..