들어가기 전에 준비물 * Aws Account * Nodejs * Serverless framework cli. * Parcel 위의 준비물을 모두 갖췄다면, 다음을 터미널 환경에서 진행해보도록 하겠습니다. 마지막에 잠깐 언급된 것처럼 서버 렌더된 컨테이너를 하이드레이트(이하 hydrate)하기 위해서는 ReactDOM에서 제공하는 hyd...
해당 내용은 최근 업무 중 발생한 니즈 "아 프론트엔드 서버 관리에 대한 부담을 줄이고 싶은데, 서버 사이드 렌더링 로직을 서버리스로 옮겨볼 수는 없을까?"을 바탕으로 AWS 서버리스를 활용해 리액트 서버 사이드 랜더링 예제입니다. 기본적으로 참고할 내용은 How to implement Serverless Server-Side Rendering in Re...
![[주니어탈출기] Apollo Client 시작하기](https://thumb.velog.io/resize?url=https://images.velog.io/post-images/zansol/115f83c0-6bd1-11e9-9aec-fd5efe73ae9d/-5.png&width=512)
회사 프로젝트 기술 스펙을 정리하자면, - next.js - styled-components - apollo-client ⇒ 그래프큐엘 서버연동 라이브러리 - apollo-cache(apollo-client) ⇒ 로컬 상태 관리 - jest, enzyme - eslint - prop-types ⇒ 컴포넌트 props 타입 체킹 - antd...
이 글은 SPA(Single Page Application)에서의 SSR과 CSR을 비교하기 위해 작성되었다(편의를 위해 반말 사용). - 최근 수정: 2019. 09. 22 초기 View 로딩 속도 먼저 전통적인 SSR과 CSR의 가장 큰 차이 중 하나인 '초기 View 로딩 속도'를 살펴보도록 하자. 전통적인 SSR의 경우에는 View를 ...
이 글을 쓰기 전에 NextJS에서 제공하는 Quick Start를 따라 간단한 예제를 구현한 경험이 있었다. 하지만, 그저 쓰면 좋다고만 알았지, NextJS를 왜 써야하고 무엇을 위해 존재하는지를 알지 못했기 때문에 이번 기회를 통해 제대로 NextJS를 사용한다는 것이 무엇을 의미하는지를 이해하고 입문해보려 한다. 더불어 지금 회사에서 인턴 생활을...
![[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)](https://thumb.velog.io/resize?url=https://images.velog.io/post-images/zansol/41c8b4a0-3aa8-11e9-9ccf-99aea9b2d2cb/-9-4.png&width=512)
서버사이드렌더링 & 클라이언트사이드렌더링 왜 모바일의 시대에 등장한 클라이언트사이드렌더링 Single Page Application(SPA)! 고려해야할 점들이 있다. SPA는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미한다. 렌더링 방식 SPA는 클라이언트사이드렌더링방식 이다. 기본적으로 페이지 로...