IT/react32 [react] react 17 new jax transform react 17부터 jax transfrom 방식이 바뀌어서 react import 없이 사용 가능. new jax tranfrom으로 바꾼다면, - import React 없이 코딩 가능 - bundle size가 살짝 감소 - 추후 react 배울 때 몇가지 개념들을 몰라도 된다. old jax transfrom 한계점 - JSX가 React.createElement로 컴파일 되기 때문에 React가 scope안에 항상 있어야 함. - React.createElement 떄문에 몇몇의 성능 향상과 간결성을 해결 못함 our codeimport React from 'react';function App() { return Hello World;} old transformimport React f.. 2024. 11. 21. [react] text-overflow: ellipsis 활성 여부 react code에서 확인하는 방법 개발하다보면, 문구 줄임 여부에 따라 '더보기' 버튼을 노출를 결정할 때 있다. 이때 CSS에서 계산된 값을 JS에서 확인해야 하므로 어떻게 확인할 수 있는지 알아보자 샘플코드const ref = useRef(null)const isEllipsis = ref.current.clientWidth >= ref.current.scrollWidthreturn ( hello world {isEllipsis && 더보기} ) 개념scrollWidth보이는것과 상관없이 컨텐츠가 가지고 있는 영역 clientWidth보이는 부분에서 컨첸츠가 가지고 있는 영역 2024. 11. 20. [react] ssr 프로젝트 만들기 (6) - stream으로 html 그리기, 추가 설명 https://github.com/insidedw/react-webpack5-ssr/commit/5319188111c0611aa64d04625ead88353616cf20 https://github.com/insidedw/react-webpack5-ssr/commit/27eb3afff0f9779fc5eccff4989aae8570a0c25d stream으로 렌더링 하면 2가지 큰 이점이 있는데,하나는 prefetch 응답을 기다리지 않고 fallback ui로 렌더링이 되어 유저에게 빠르게 페이지를 보여줄 수 있고나머지 하나는 selective hydration이 되어 보여지는 영역에 대해 hydration이 되어 User Interaction이 가능하다. 첫번째, 구현하는 방법은 위의 커밋과 5번째 포스.. 2024. 7. 13. [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. [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. 이전 1 2 3 4 ··· 6 다음
