104%

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

연속적인 비동기 패턴을 다룰때 가장 전통적인 방식인 콜백 패턴의 단점을 보완하기 위해 Promise가 나왔다. Promise를 사용하면 코드의 indent가 계속 깊어지는 콜백 헬 문제를 해결하면서 코드를 좀 더 읽기 좋게 만든다는 점에서 아주 훌륭한 패턴이라고 할 수 있다. 근데 Promise가 진짜 유용한 이유는 따로 있다. 우선 콜백 패턴이 왜 복잡한지부터 살펴보자. 콜백 패턴의 복잡성 const add5 = (number, callback) => { setTimeout(() => callback(number + 5), 1000); }; const add10 = (number, callback) => { setTimeout(() => callback(number + 10), 1000); }; con..

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