104%

Mobx에서 observable state를 변경하려면 항상 액션을 통해서 변경하는것을 추천한다. 그래야 Mobx가 state변경 사항을 모아서 한번에 처리해줄 수 있기 때문이다. @action 데코레이터나 action() 함수는 현재 실행중인 함수에만 적용된다. 현재 함수에 의해서 스케쥴된 함수에는 액션이 적용되지 않는다. 이게 무슨말인지 자세히 살펴보자. // state가 항상 action으로만 변경되게끔 설정하는 옵션이다. mobx.configure({ enforceActions: "observed" }) class Store { @observable githubProjects = [] @observable state = "pending" // "pending" / "done" / "error" @..

이 글은 Mobx 공식문서를 토대로 재해석한 글입니다. 서론 Mobx의 철학은 "애플리케이션의 상태로 부터 파생될수 있는 모든것들은 파생되어야한다" 입니다. 액션 이벤트는 액션을 일으킵니다. 애플리케이션의 state는 오로지 action을 통해서만 변경해야합니다. action은 state를 변경할뿐 아니라, 때로는 Side Effect를 일으킵니다. Side Effect 프로그래밍에서 사이드 이펙트란 함수 내부에서 함수 외부에 접근하여 영향을 주는 행위를 의미합니다. 예를들어 함수 내부에서 Disk I/O가 일어난다던지 네트워크 요청을 한다든지 하는것은 영향 범위가 함수 내부를 벗어났으므로 Side Effect가 발생한것입니다. Mobx가 관리하는 State는 Observable(관찰가능한)하며 최소한으..

서론 프로젝트를 진행하다가 삽질한 내용을 공유합니다. Next.js에서는 getInitialProps라는 메소드가 있습니다. 이 메소드를 사용하면 화면이 렌더링 되기 전에 필요한 데이터를 미리 준비해 놓을 수 있습니다. getInitialProps는 다음과 같은 상황에서 트리거 됩니다. 1. 주소창에 직접 URL을 치고 들어온 경우 SSR(Server Side Rendering)이 일어납니다. 이때 getInitialProps가 실행됩니다. 2. next/link나 next/router를 사용해서 클라이언트 사이드 라우팅(CSR)을 한 경우. 이 경우에도 getInitialProps가 실행됩니다. 이슈 제가 만들고 있는 프로젝트는 SNS라서 메인페이지에 진입했을때 피드의 리스트가 쭉 출력되어야 합니다. ..