본문 바로가기

분류 전체보기307

[typescript] pnpm monorepo에서 paths 설정하기 코드아래의 설명만으로는 부족하다.https://github.com/insidedw/monorepo-pnpm-ts GitHub - insidedw/monorepo-pnpm-tsContribute to insidedw/monorepo-pnpm-ts development by creating an account on GitHub.github.com packages 구조project - apps - calculator - src - libs - shared - src root에 tsconfig.json 추가baseUrl 기준으로 path를 지정{ "compilerOptions": { "baseUrl": ".", "paths": { "@S_shared/*": ["libs.. 2024. 7. 15.
[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.
[web] Script error https://sentry.io/answers/script-error/ 읽고 가공한 글입니다. What is "Script Error"?Learn what causes the inscrutable JavaScript “Script error”sentry.ioScript error. origin이 다른 곳에서 javascript file를 읽는 도중 에러가 발생했을 때 onerror callback을 보내는데, 그때 callback이 `Script error.` 문구를 노출한다. (여기서 origin이라면 다른 도메인, 다른 포트, 다른 프로토콜을 의미한다) 예제 html  app.js// another-domain.com/app.jsfunction foo() { bar(); //.. 2024. 7. 12.
[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.

티스토리툴바