Automatic Batching React 에서 Bathing 이란, 여러 state 업데이트를 하나의 업데이트로 그룹화하여 렌더링 성능을 향상시키는 것을 의미합니다. v18 부터는 새로운 Root API 인 createRoot 를 통해 자동으로 state 업데이트를 배칭 시킵니다. 그로 인해 기본적으로 ReactV18 부터는 렌더링 성능이 향상되었습니다. 예를 들어 기존에는 아래의 로직이 자동으로 배칭되어 여러번 수행하지 않고 렌더링 과정을 다 한 번만 처리하도록 합니다. function clickHandler() { setCount(cnt => cnt + 1) setFlag(flag => !flag) } useTransition 느린 컴포넌트 성능을 향상 시켜 UX 를 개선할 수 있음. startT..
vite 를 이용한 react + tailwind 사용하기 최근 webpack 말고 vite 를 쓰는 곳이 많아지다보니 webpack 기반의 create react app 말고 vite 기반으로 react 를 설치를 하기 시작함. 실제로 사용해보면 기본적으로 훨씬 빠른 성능을 경험할 수 있음. 아래 npm, yarn 둘 중 하나로 다운받으면 됩니다. npm create vite@latest my-project -- --template react cd my-projectyarn create vite my-project -- --template react cd my-projectinstall tailwind tailwindcss와 해당 피어 종속성 설치. tailwind.config.js, postcss.c..
Promise.all() Promise.all() 은 여러 개의 프로미스를 동시에 실행하고, 결과값을 배열로 반환합니다. 이 메소드는 모든 프로미스가 완료될 때까지 기다립니다. 그리고 모든 프로미스가 완료되면, 각각의 프로미스가 반환한 결과값들이 배열로 반환됩니다. 예를 들어, 아래와 같이 Promise.all() 을 사용하여 두 개의 API 요청을 동시에 수행하고 결과값을 받아올 수 있습니다. async function fetchUserData() { const [user, posts] = await Promise.all([ fetchUser(), fetchPosts() ]); console.log(user, posts); } function fetchUser() { return axios.get(''..
Vue3 Vue3 Router 의 경우, vue-router 가 아닌, vue-router@next 를 설치해주어야 합니다. yarn add vue-router@next router 폴더 밑에 index.js 를 생성합니다. 아래와 같이 기본 셋팅을 해줍니다. import { createWebHistory, createRouter } from 'vue-router' function getComponent(component) { return () => import(`../components/${component}.vue`) } const routes = [ { path: '/', name: 'Main', component: getComponent('MainComponent') }, // 404 페이지 { ..
Vue3 란 기존 Vue2 에서 버전업이된 상태, vuex, vue-router 등의 대한 버전업도 동시에 진행되어야함. Vue 에서는 기본으로 Vue3 를 지원 중. 실무에서는 아직 Vue2 를 많이 사용하고 있지만, 조금씩 추세가 Vue3 로 이동하고 있기 때문에 어느정도 스터디가 필요로 해보여 시작하였습니다. (아직 몇몇 라이브러리들이 Vue3를 제대로 지원하지 못하고 있음.) Vue2 와 Vue3 의 가장 큰 차이점은 setup 이라는 것만 알아두면 될 것 같습니다. 설치 vue3 의 경우, vite 기반의 create-vue 를 선호함. (vite 가 webpack 보다 빠르기 때문에) https://github.com/vuejs/create-vue script script setup 사용 //..
- Total
- Today
- Yesterday
- nextjs13
- AWS
- 깃허브
- ChatGPT
- vue composition api
- cors
- 네이버 서치 어드바이저
- React
- nuxt2
- nextjs15
- vscode
- Git
- Vite
- NextJS
- 서버 to 서버
- nextjs14
- svelte
- github
- NUXT
- Ai
- vue router
- openAI
- 티스토리챌린지
- seo
- Zustand
- nodejs
- Github Actions
- 스벨트
- 타입스크립트
- 오블완
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |