react6 zustand에 devtools 사용하기 zustand에는 별도로 시각화 할 수 있는 devtools가 없기 때문에 redux devtools와 연동한다이 때 redux 설치는 필요없다. 크롬에서 redux devtools 설치https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko store에 devtools 적용import { create } from "zustand";import { devtools } from "zustand/middleware";type CounterStore = { count: number; increment: (by: number) => void; decrement: (by: number) => vo.. 2024. 10. 27. Suspense를 활용한 SSR Architecture의 성능 개선 react 18의 주요 기능 중 하나인 Suspense가 Server Side Rendering 성능 개선을 위해 어떤 역할을 하게 될지 알아보자 SSR 개요1. 서버 사이드 렌더링(SSR)은 서버에서 React 컴포넌트를 사용해 HTML을 생성하고, 이 HTML을 사용자에게 전송하는 것을 말한다. 2. SSR은 사용자가 JavaScript bundle이 로드되고 실행되기 전에 페이지의 내용을 볼 수 있게 해준다. React에서 SSR의 과정1. 서버에서 전체 app에 대한 데이터를 fetch한다. 2. 그 다음에 서버에서 전체 app을 HTML로 렌더링하여 응답으로 보낸다. 3. 클라이언트에서 전체 app에 대한 Javascript 코드를 로드한다. 4. 클라이언트에서 JavaScript 로직을 서.. 2024. 5. 1. useFormState hook으로 Form 상태를 다루자 useFormState란? form action의 결과를 기반으로 state를 업데이트 할 수 있도록 제공하는 hook이다. useFormState의 parameter와 returns에 대해 알아보자 const [state, formAction] = useFormState(fn, initialState, permalink?); Parameter fn 1. form이 submit 되었을 때 호출되는 함수 2. 이전 state와 FormData를 argument로 받는다. async function increment(previousState: number, formData: FormData) { return previousState + 1; } initialState 초기값 permalink (optiona.. 2024. 3. 10. shadcn/ui 를 활용하여 공통 컴포넌트를 쉽고 빠르게 ! UI Framework 1. UI Framework에서 제공하는 공통 UI 컴포넌트를 통해 빠르게 아름다운 UI를 구현할 수 있다. 2. 대표적으로 bootstrap, material-ui가 있다. 3. 그러나 위의 framework를 사용하다보면 custom 하기가 불편하다. 4. 당연하게도 정해진 rule 안에서 이쁘고 빠르게 구현할 수 있도록 도와주기 때문에 내 입맛에 맞도록 하려면 다른 방법을 찾는게 맞긴 하다. 5. 더 큰 문제는 컴포넌트들이 여러 기능을 지원하기 때문에 무겁고 복잡하다. 6. Button 하나를 표현하는데 수 많은 Element, CSS와 animation, javascript 이벤트가 실행된다. 7. 또한 UI Framework로 만든 결과물은 비슷하기 때문에 나만의 또는 우.. 2024. 3. 5. nextjs 최신 버전 프로젝트 설정 (eslint, pretter) 프로젝트를 생성할 경로에서 다음 명령어 실행 npx create-next-app@latest yarn, pnpm을 사용하려면 다음 옵션 추가하여 실행 npx create-next-app@latest --use-pnpm npx create-next-app@latest --use-yarn 1. 프로젝트 이름 설정 2. typescript를 사용하면 runtime 에러를 최소화 할 수 있다. 3. typescript 문법 검사를 위해 eslint 설정 4. tailwindcss의 사용 추천 ! 5. page router 대신 app router 설정 권장 6. ./src/* 경로를 @/*로 사용할 수 있도록 설정한다. import Card from "@/components/card"; prettier 설치 p.. 2024. 3. 5. React 19 버전 canary React의 새로운 버전인 canary가 곧 latest 버전으로 출시된다. Asset Loading, Document Metadata 부분에서 획기전인 변화가 있어서 18.3이 아닌 19버전으로 출시된다. 추가될 내용에 대해서 간단하게 살펴보자. React Compiler 1. React는 상태 변경시에 너무 많이 리렌더링 되는 경우가 있다. 2. 초기부터 이 문제를 해결하기 위해 수동으로 memoization을 사용해왔다. 3. useMemo, useCallback, memo API를 적용하여 수동으로 상태변경에 따른 리렌더링을 조정했다. 4. 그러나 이 방법들은 코드를 지저분하게 만들고 잘못 사용하기 쉽고 최신 상태로 유지하는데 추가 작업이 필요하다. 5. React 팀은 상태변경시 UI의 정확한 .. 2024. 3. 5. 이전 1 다음
