react + typescript에서 svg import로 사용하기 scss처럼 svg을 react module처럼 쓰기 위해서는 아래와 같은 처리 필요 a. 우리는 typescript이기 때문에 최초 typescript(tsc)가 알아먹도록 type정의 추가 필요 b. type스크립트 이후 react가 component형태로 알아먹게 하기 위해서,  와,  필요 c. 이제 각 webpack의 rule에 아래와 같이 svg 모듈 처리 추가 필요 d. 일반적인 프로젝트에서는 위 설정적용으로 완료인데, storybook은 그래도 에러 발생, 이유는 - storybook의 내장 webpack설정에 svg파일은 file-loader로 rule이 정의되어 있음. 해당 부분을 storybook webpack hook(config hook)으로 덮어 써야함 e. 사용 참고: https://stackoverflow.com/questions/54121536/typescript-module-svg-…

소개 기본적인 SSR(Server Side Rendering)의 개념 이해 및 React의 SSR에 대해서 살펴보고, React에서 좀더 심화된 형태의 SSR을 지원하는 방법에 대해서 알아봅니다. 이를 통해서 직접 React SSR을 구성하거나, 이미 구성된 React SSR의 구조 및 코드 파악을 할 수 있게 합니다. SSR 의 기본 개념 기본적으로 SSR은 서버 연산을 통해서 Page(HTML)을 만들고, 해당 Page을 응답(response)하여서 그리는 형태입니다. 사실 static한 html을 응답하여서 화면이 그려지는 page는 SSR을 하였다고 봐도 크게 다르지 않습니다. 쉽게 이해하자면, React나 Vue등을 사용하여 Render하는 경우를 떠올리면 됩니다. 이 경우 아래와 같이 Render를 호출하여 그리게 되는데, 위 그림과 같이 사용자가 실제 화면(Content)을 보기까지 SSR에 비해서 시간이 좀 더 걸리게 됩니다. 보통 SSR의 장단점은 아래와 같습니…