react5 [Next.js14.0.2] Yarn berry v4 적용 후 체감 성능 비교(feat. Yarn berry v3, yarn, 배포: vercel) ※ 비교한 내용만 있을 뿐 적용 방법은 포함되어 있지 않습니다. ※ Next.js 14.0.2 버전이며, Vercel이 아닌 다른 곳에 배포 시 결과가 다를 수 있습니다. 비교 대상: yarn berry v3, yarn 테스트 배포 사이트: Vercel 테스트 항목: dependency 최초 설치 속도 git에 대한 부하 Vercel에 배포 시 CI 속도 dependency가 추가 됐을 때 dependency 변경 없을 때 Yarn dependency 최초 설치 속도 Yarn berry v3보다 빠름 ( Yarn berry v3는 처음 dependency를 설치 할 때 캐시를 같이 추가하기 때문으로 보임) git에 대한 부하 node_modules에 패키지들이 있으며, gitIgnore에 있으므로 git.. 2023. 11. 28. [Error] Next.js14.0.3에서 three/drei 라이브러리 에러 💣Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator') 에러 환경: Window IDE: Vscode 프레임워크 버전: Next.js14.0.3 오류 난 라이브러리 이름/버전: @react-three/drei: 9.75.0 최근 업데이트한 Next.js 14.0.3에서 three/drei를 import하여 사용만 해도 위와 같은 에러 메세지가 나옴. dev모드인 경우 log에 계속 에러가 나오고 있는 상황이며, createSDFGenerator를 사용하지 않는 컴포넌트는 동작함. vercel에 테스트 배포를 실험해 본 결과, 아래 사진과 같이 error를.. 2023. 11. 27. CSR(Client-side Rendering)이란? (+SSR 비교) 🤔 CSR(Client-side Rendering)이란? Client-side Rendering(CSR)은 웹 페이지의 콘텐츠를 클라이언트(브라우저)에서 렌더링하는 방식이다. 서버에서 HTML, CSS, JavaScript 파일을 클라이언트로 보내고, 클라이언트에서 JavaScript를 실행하여 동적인 웹 페이지를 생성하게 된다. 이로 인해 서버의 부하가 감소하고, 많은 인터랙티브한 기능을 제공할 수 있게 된다. 자주 사용되는 웹 프레임워크로는 React, Angular, Vue.js 등이 있다. 😎 장점 ✅ 인터랙션 향상 CSR은 사용자 경험(UX) 측면에서 이점을 가지고 있다. 페이지의 동작에 따라 실시간으로 콘텐츠가 변경되어 사용자가 웹사이트를 더 쉽게 이용할 수 있다. 예를 들면, 기존 웹에서 페.. 2023. 6. 28. [React] useCallback 사용법 정리 👩💻 이 글을 쓰게 된 계기... React는 Virtual DOM을 사용하여 컴포넌트의 렌더링 성능을 최적화한다. 그러나 불필요한 렌더링이 발생할 수 있는 상황이 있다. 이러한 상황에서는 React의 useCallback 훅을 사용하여 함수를 재사용하면 성능을 향상시킬 수 있다고 하는데 정확히 어떤 상황에서 써야 이게 잘 썼는지 소문이 날까? 란 생각에 정리해 보았다. 👁🗨 useCallback을 사용해야 하는 경우 일단 이론적으로 React에서 useCallback을 사용해야 하는 경우는 다음과 같다. ✅ 이벤트 핸들러 함수가 자주 재생성되는 경우 useCallback을 사용하지 않으면 이벤트 핸들러 함수는 매번 새로운 인스턴스가 생성된다. 그러나 useCallback을 사용하면 함수가 처음 생성.. 2023. 4. 28. 이전 1 2 다음
