# code splitting

4개의 포스트
post-thumbnail

[React] 코드 분할

리액트에서의 코드 분할에 대해 알아보겠습니다. 유저가 처음 웹 페이지에 접속했을때 빌드된 main.js 파일을 로드한다고 생각해봅시다. 만약 프로젝트의 규모가 커진다면 main.js 파일의 크기 또한 커질 것이고 이를 로드하는데 많은 시간이 걸리므로 사용자 경험의 퀄리

2020년 9월 16일
·
0개의 댓글
post-thumbnail

ssr 삽질기 - styled-component가 잘 렌더링되지 않아요!

찰나의 시간동안 스타일이 전혀 입혀지지 않은 plain text들이 화면에 표시되는 것이 문제였습니다. SSR과 코드스프리팅의 특성상 첫 화면을 렌더링하고 동적임포트 한 chunk된 javascript들이 hydrate 되는데요, hydrate 되기 이전에 첫 렌더링

2020년 5월 17일
·
0개의 댓글
post-thumbnail

Webpack4 for React (리액트를 위한 웹팩4) - 1

당부의 말씀 이 글은 리액트 프로젝트를 구축하는데 필요한 Webpack4(웹팩4)에 대한 글 입니다. 포스팅의 전체적인 흐름은 Esau Silva의 learn-webpack-for-react을 따라가고 있습니다. 더 자세한 사항은 링크를 참고해주시길 바랍니다. 리액트 사용자를 대상으로 하고 있습니다. Webpack(웹팩)을 사용하는 이유 ? 스크...

2018년 11월 30일
·
10개의 댓글
post-thumbnail

리액트 프로젝트 코드 스플리팅 정복하기

코드 스플리팅, 뭐 별거있나요? 그냥 웹팩에서 하라는대로 하면 되는걸요. 하지만! 리액트에서 코드 스플리팅이랑 서버사이드 렌더링을 함께 해보신 경험이 있으시다면, 이 두가지 작업을 함께 하는 경우, 굉장히 번거로워질 수도 있다는 것을 아실 것 입니다. 이 포스트에서는, 리액트에서 코드 스플리팅을 하는 방법을 기초부터 이해를 해보고, react-loadable 을 사용하면 서버사이드 렌더링과 함께 사용 할 시 어떻게 도와줄 수 있는지 알아보도록 하겠습니다.

2018년 9월 28일
·
16개의 댓글