IT193 [react] ssr 프로젝트 만들기 (5) - stream으로 html 그리기 html 문서를 string으로 한번에 그렸더라면, 이번엔 stream으로 그려보자API응답이 항상 빠르고 메모리가 허락하는 한 stream보다 string이 훨씬 더 빠르다.단, API 응답이 늦어진다면 string으로 전달할 경우 API 응답을 기다린 후 그릴 수 있어서 최대한 빠르게 SSR를 주려면 stream이 더 나은 방식이다. stream으로 어떻게 구현했는지 알아보자. 정답부터 보고 싶으면 소스 코드를 확인하자https://github.com/insidedw/react-webpack5-ssr/commit/c2766bcad9bd58ed34842ce2333dd3da839685c7 integrate renderToPipeableStream · insidedw/react-webpack5-ssr@c2.. 2024. 7. 8. [JS] 제너레이터 함수 (generator function) 개념함수의 실행을 중단하고 재개할 수 있는 특별한 유형의 함수`function*` 키워드로 정의되고, 내부에서 `yield` 키워드를 사용하여 값을 반환하고 함수의 실행을 일시 중지할 수 있다. function* simpleGenerator() { yield 1; yield 2; yield 3;}const gen = simpleGenerator();console.log(gen.next()); // { value: 1, done: false }console.log(gen.next()); // { value: 2, done: false }console.log(gen.next()); // { value: 3, done: false }console.log(gen.next()); // { valu.. 2024. 7. 7. [react] ssr 프로젝트 만들기 (4) - react router 추가 코드 확인https://github.com/insidedw/react-webpack5-ssr/commit/1d97ecbcb6681db250940cf52cdf90411e171a9a integrate react-router-dom · insidedw/react-webpack5-ssr@1d97ecbinsidedw committed Jul 7, 2024github.com의존성 설치npm i react-router-dom client.js 수정client side 부터 설정해보자.SSR이니 hash보단 browser router로import React from 'react'import ReactDOM from 'react-dom'import App from './components/App'import { Bro.. 2024. 7. 2. [react] ssr 프로젝트 만들기 (3) - css, js 번들에 hash 추가 [react] ssr 프로젝트 만들기 (1) - hello world 찍기[react] ssr 프로젝트 만들기 (2) - css, 번들에 추가하기에서는 client 번들링 파일 이름이 동일하여 cdn에 올릴 때 이슈가 발생할 수 있다. 이 이슈를 해결해보자 소스 코드https://github.com/insidedw/react-webpack5-ssr/commit/bbf8ea9efe8a73d6e470335ad2a34af23312100e inject css on ssr using mini-css-extract-plugin and webpack-manifest-… · insidedw/react-webpack5-ssr@bbf8ea9…plugingithub.com 시작하기 전 스타일링이 ssr에 포함되도록 준비해보.. 2024. 7. 2. [react] ssr 프로젝트 만들기 (2) - css, 번들에 추가하기 소스코드https://github.com/insidedw/react-webpack5-ssr/commit/187a002c7787679afd3b390c158064d541293f14 inject css on csr · insidedw/react-webpack5-ssr@187a002insidedw committed Jul 7, 2024github.com 의존성 설치npm i - D css-loader style-loader 설치 후 경고의 에러가 노출되었다.npm WARN EBADENGINE Unsupported engine {npm WARN EBADENGINE package: 'css-loader@7.1.2',npm WARN EBADENGINE required: { node: '>= 18.12.0' }.. 2024. 7. 2. [react] ssr 프로젝트 만들기 (1) - hello world 찍기 목표webpack 5 사용stream을 이용해서 ssr 제공react-router 적용하기react-query로 api pretech 하기local 환경에서 hmr 적용하기js로 결과물을 ts로 변경하기production과 local & dev 빌드 결과물 다르게 설정번들링 분석 플러그인 설치 코드는 여기에서 확인https://github.com/insidedw/react-webpack5-ssr/commit/b1f1132a20fbbbcb6d6e67861be91e7d9305ef74 print hello world · insidedw/react-webpack5-ssr@b1f1132insidedw committed Jul 7, 2024github.com 시작 전linting 관련된 세팅은 생략 프로젝트 세팅.. 2024. 7. 1. 이전 1 ··· 3 4 5 6 7 8 9 ··· 33 다음
