IT/react32 [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. [React] Controlled Props Pattern 개념 기본적인 IoC 제어 컴포넌트 패턴 컴포넌트 내부에 정의된 state 값을 변경하는 로직을 사용하지 않고, prop을 통해 외부에서 들어온 상태 값과 콜백 함수를 사용함으로써 외부에서 컴포넌틔 상태를 컨트롤할 수 있게 한다. 특징 단순한 상태 값을 가지는 컴포넌트에서는 아주 유용. 상태 값이 여러 개고 해당 값을 컨트롤 하기 위한 콜백 함수가 많아지면, 오히려 정의해야 하는 함수와 컴포넌트의 프로퍼티가 많아져서 사용성에 문제가 발생 할 수 있음 HTML 삽입 미리보기할 수 없는 소스 2024. 3. 1. 이전 1 2 3 4 5 6 다음
