React/ReactJs

styled-component의 동작방식

최근 react 커뮤니티에서는 css-in-js(styled-components, emotion, etc...)의 인기가 날이 갈수록 높아지고 있습니다. 하지만 styled함수에 대한 사용법을 아시는 분들은 점차 많아지만, 내부적으로 어떤 동작이 이루어지는지 아시는 분들은 별로 없을거라고 생각합니다. 그래서 같이 한번 styled-component의 styled 함수를 흉내내며 어떻게 이런 매직이 가능한지 알아보겠습니다.

SPA기반 SSR구현하기 - 3

SSR은 개념편에서 말했듯이 서버에서 랜더링을 하는 것입니다. 이를 위한 서버를 구현하겠습니다. 또한 SSR에서 중요한 개념 중 하나인 Hydration에 대해서 알아보겠습니다. 패키지 설치 npm i express npm i -D @babel/cli @babel/plugin-transform-modules-commonjs @babel/plugin-transform-modules-commonjs 서버 사이드에서 import/export문법을 사용하기 위해 설치합니다. 웹 서버 코드

SPA기반 SSR 구현하기 - 2

CSR이 여기서 필요한 이유는 SPA기반 SSR은 CSR앱을 이용해 서버에서 렌더링하는 것이기 때문입니다. 또한 SPA기반 SSR은 클라이언트가 페이지에 최초 접속시, 정확히 말하자면 SSR을 담당하는 서버에 요청을 보내는 과정에서만 SSR이 이루어지고, 그 이후 렌더링 과정은 CSR로 이루어지기 때문입니다. CSR 코드 작성 import React from "react"; const About = () => { return ( This is About page ); }; export default About; import React from "react"; const Home = () => { return ( This is Home page )..

SPA기반 SSR구현하기 - 1

이번 포스팅에서는 SPA기반 SSR의 개념과 동작 원리, 구현 방법을 다룹니다. 이런 개념과 동작 원리, 구현 방법을 상세히 알지 못하고 SSR프레임워크를 사용시 구현과 버그 대응에 어려움을 겪을 수 있습니다. 이를 공부함으로써 SPA기반 SSR앱을 구현 시, 자신감 있게 구현할 수 있습니다!! SSR ( Server-side Rendering )이란? 말그대로 서버에서 렌더링을 합니다. 과정 1. 최초 요청 시, 서버에서 사용자에게 렌더링할 준비가 된 full HTML파일을 보내준다. 서버가 이미 렌더링 할 준비가 된 full HTML을 응답하기 때문에 사용자는 이때부터 아래와 같은 의미있는 (Contentful)컨텐츠를 볼 수 있습니다. Home About This is about page 2. 필요..