IT/react33 [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. [react] CRA 대신 webpack으로 react 프로젝트 구성하기 들어가기 전 코드만 보고 싶다면, 아래의 링크를 확인해보세요 https://github.com/insidedw/minified-cra GitHub - insidedw/minified-cra Contribute to insidedw/minified-cra development by creating an account on GitHub. github.com 프로젝트 구성 npm init -y package.json에 의존성 설치 리엑트 설치 리엑트는 runtime에서 읽혀야 하니 dependencies에 추가합니다. npm install react react-dom webpack 설치 npm install -D webpack webpack-cli webpack-dev-server html-webpack-pl.. 2024. 4. 3. [react] Suspense React 18에 Suspense를 SSR에서 사용할 수 있다. 어떤 문제가 있었고, 어떻게 해결해서 어떤 효과가 있었는지 알아보자 아래의 링크를 읽고 정리한 글입니다. 어디든 다 똑같은 이야기이니, 제 머리속에 있는 지식을 정리하기 위함이니 이 글이 도움이 될지 모르겠습니다. SSR 서버에서 react component를 html로 만들어 사용자에게 보낸다. 이 html은 아직 interactive 하지 않음 js bundle이 다 로드 된 후 hydration 과정을 걸친 후 interactive 가능 CSR만 사용할 때보다 SSR를 사용하면 이점은 확실히 있다 이유는 CSR만 사용하면 blank page부터 사용자가 볼 것이기 때문이다. SSR을 사용하면 blank page부터 보여지는게 아니라 s.. 2024. 3. 26. [React] 컴포넌트 추상화 어떻게 더 추상화를 잘할 수 있을까? > 적절한 책임 부여 범용적인 컴포넌트 어떠한 도메인과 엮기지 않는 컴포넌트 도메인과 엮이면 분기 코드가 발생하여 컴포넌트 변경에 취약해진다 컴포넌트 자체가 수행하는 책임이 너무 많아 props가 증가된다면 복잡해지기에 합성으로 책임을 더 세분화 해야한다 카드의 스타일 asis > 하나의 컴포넌트에서 N개의 props tobe > 여러 컴포넌트로 세분화 카드의 형태를 동그란 모양, 사각형 모양으로 바꿀 수 있어야 한다. 썸네일 아래에 나오는 텍스트를 2줄로 보여줄지 3줄로 보여줄지 결정할 수 있어야 한다. 텍스트를 제목, 설명처럼 구분하여 보여줄 수 있어야 한다. 썸네일을 여러 개를 합쳐 보여줄 수 있어야 한다. 카드 형태의 아이템을 보여준다. 썸네일이 둥근 형태의 .. 2024. 3. 4. 이전 1 2 3 4 5 6 다음
