Frontend/React (2) 썸네일형 리스트형 [React] Serverside rendering Loadable Component 를 이용해서 서버사이드 렌더링 틀을 잡아보자 이전 방식들은 잘 모르지만, 리엑트에서 권장하는 서버사이드 렌더링 방식으로 한번 틀을 잡아보도록 하자 먼저 필요한 라이브러리들을 설치해준다. server.tsx 컴포넌트 생성 이제 서버 전용 빌드를 만들자 webpack.config.js를 복사해서 server.js 를 생성시켜준다. 불필요한 플러그인과 코드들을 지운다 -> 나중에 github 으로 지운 내용 보기 scripts 의 build.ssr 도 복사를 하고 마찬가지로 불필요한 코드 제거 -> github에서 참고 그 후 node scripts/build.ssr.js 로 빌드 후 node ./dist/server.js 로 실행을 해보면 여기까지 서버 빌드 성공 이제 웹팩.. [React] 웹팩 - 코드 스플리팅 과정 일단 거칠게 정리 하겠음 웹팩 3의 방식인것 같다. 웹팩 4에서는 App 과 모듈코드가 나눠져서 Chunk 로 자동 생성되는듯.. 어플리케이션의 규모가 커지게 되면 용량이 커지게 되고, 로딩속도의 지연이 발생한다. 이걸 방지하기 위해, 번들 파일을 여러개의 파일로 분리 시키는 코드 스플리팅 작업을 해보자 먼저 코드 스플리팅 을 하기 위해서는 웹팩 및 바벨 환경설정을 밖으로 꺼내줘야한다. 명령어를 실행해주자 이제 웹팩 설정을 직접 할 수 있게 되었다. Vendor 이제 Vendor 설정을 해줘야 한다. Vendor 는 전역적으로 사용되는 라이브러리 파일이라고 보면 된다. webpack.config.js 파일을 봐보자 entry 포인트를 배열 [] 에서 객체 {} 형태로 변경해줘야하는데, filter 때문에.. 이전 1 다음
