SPA기반 SSR 구현하기 (feat.React) 7-서버 데이터를 클라이언트 스토어에 하이드레이션 시키기
2021년 01월 07일이 전편에서 api…
milban이것저것 하는걸 좋아하는 프론트엔드 개발자
이 전편에서 api…
이번 편에서는 서버 사이드에서 api서버로부터의 데이터 페치를 실행한 후 해당 데이터를 사용하여 렌더링을 하는 방법을 구현하겠습니다. 패키지 설치 지금까지 HTML…
이번 편에서는 서버에서 응답하는 HTML 파일에 스타일을 적용하는 것을 구현하겠습니다. React와 함께 자주 쓰이는 스타일링 방식인 방식을 사용하겠습니다. 전통적인 CSS 방식으로 한다면 번들링 과정에서 HTML파일에 CSS…
이번 편에서는 서버에서 클라이언트로 데이터를 전달하는 방법을 알아보고 구현하겠습니다. 서버에서 클라이언트로의 데이터 전달은 대표적으로 다음과 같은 곳에 쓰입니다. CSS-in-JS 방식으로 스타일을 구현 시, SSR…
SSR은 개념편에서 말했듯이 입니다. 이를 위한 서버를 구현하겠습니다. 또한 SSR…
해당 편에서는 SSR 구현과정 중 프로젝트 시작 및 CSR 구현을 다룹니다. SSR 구현에 CSR이 왜 필요한지 의문을 가질 수 있습니다. CSR이 필요한 이유는 SPA기반 SSR은 CSR…
이 시리즈는 SPA기반 SSR의 개념과 동작 원리, 구현 방법을 다룹니다. 이런 개념과 동작 원리, 구현 방법을 상세히 알지 못하고 SSR 프레임워크를 사용시 구현과 버그 대응에 어려움을 겪을 수 있습니다. 이를 공부함으로써 SPA기반 SSR…
해당 글은 CRA(Create-React-App)의 개발환경을 Webpack과 Babel 등으로 직접 구현하는 과정을 서술합니다. Webpack과 Babel에 친숙해지는 것이 목표입니다. CRA의 모든 기능을 구현하진 않습니다. CRA…
해당 글에서는 ESLint와 Prettier가 무엇인지, 왜 필요한지 알아보고, 사용법을 익힌 후, 프로젝트에 어떻게 적용하는지 알아보겠습니다. ESLint란? ESLint의 공식사이트에서는 ESLint를 다음과 같이 소개합니다. ESLint…