쪼렙 as! 풀스택

React + next.js 로 정말 신나게 코딩하면서, 프로젝트의 마무리 단계에 와있었다. 그동안은, 당연하게 localhost:3000 로 테스트를 하고 있었고, 서버 테스트는, next 를 만든 zeit 사의 'now' 서비스를 사용했었다. zeit / now 서비스는 정말 감동적으로 좋은 서비스였다.그냥 터미널에다 'now' 라고 3글자만 치면, 자동으로 프로젝트를 서버에 올리고, 자동으로 빌드되고, 곧장 실서버 상황을 볼 수 있었기 때문이다. 그러다가, 이제 정말 product 로 배포해야할 때가 다가 왔고, 그래서 진짜 실서버 테스트를 하려고, AWS - Elastic Beanstalk 에 올려보려고 했다.나는 이제껏, BackEnd 는 다 PHP 로 개발 해 오다가, 이번에 React 로 프..

Next.js 를 이용해서 서버사이드 렌더링을 하고 있다. Next.js 에서는 최초에 한번 서버사이드에서 렌더링해서 내보내 주고,그 이후는 클라이언트에서만 라우팅을하며 렌더링 해주는 방식으로, SSR 과, SPA(CSR) 의 장점을 매우매우 훌륭하게 조합하여 구현해준다. 그런데 간혹, 특정 Component 에 한해서, 서버사이드에서는 렌더링 하지 않았으면 하는 마음이 있다.그 '특정 컴포넌트' 라 함은, 특별히 SSR 이 중요하지도 않은데, 매우 무거워서, 최초 로딩 performance 에 악영향을 미치는 경우라 할 수 있겠다. Next.js 에서 3.0부터 제공하는 'dynamic' 기능을 이용해서, 이런 문제를 해결할 수 있다. import dynamic from 'next/dynamic'con..

리액트를 사용하면서, SSR 을 구현하려고 했다. 기존에 회사 서버가 PHP 로 구성되어있기 때문에, 일단 라우팅과 SSR 은, PHP 에서 담당하고, 리액트는 뷰만 만들어서 쓰기로 했다. 그러다보니, 테스트환경에 문제가 있었다. 나중에 Node 로 넘어가면서 눈여겨보고 있던 Next.js 를 사용하려고 했는데, 그러다 보니, 테스트환경이 매우 복잡해 지고 있었다. 그래서, PHP 서버는 API 서버로만 남겨놓기로 하고, 처음부터 Next.js 와 함께 Node 로 넘어가야겠다는 결심을 했다. 그래서 Next.js 의 공홈에서 제공하는 Learning 을 처음부터 살펴보았다. https://nextjs.org/learn/ 살펴본 결과. 매우 훌륭하다. 똑같이 getInitialProps 를 이용하는데, ..