104%

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

제너레이터 함수는 비동기 작업을 컨트롤 할 수 있을뿐만아니라 동기 작업도 컨트롤 할 수 있게 만든다. Yield와 Next 제너레이터 함수 내의 yield 키워드가 붙은 함수는 본인의 리턴값을 제너레이터 함수가 호출된 곳으로 전달 할 수 있다. yield키워드는 제너레이터에서의 return 문이라고 생각하면 된다. 다만 함수의 실행이 완전 종료되지 않고 일시정지 된다는 점에서 차이가 있다. yield키워드는 IteratorResult라는 객체를 리턴하는데 그 안에는 value와 done이라는 속성이 들어있다. 제너레이터의 실행이 종료되면 done에 true가 들어갈것이고 value에는 yield키워드가 부착된 함수에서 리턴한 값이 들어가게 된다. 그리고 이 값은 제너레이터를 호출한쪽에서 가져다 사용할 수..

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