개발/React11 Next + RTK + Typescript 개발 환경 설정하기 Next + RTK + Typescript 개발 환경 설정 Next.js 와 RTK를 연동하여 사이드 프로젝트를 하려 하는데 레퍼런스들이 좀 각자 개별로 달라서 내가 따로 정리해보려고 포스팅을 적는다. Next.js , Redux Next.js는 서버에서 서버사이드 렌더링을 하기 위한 라이브러리이기 때문에 서버에서 돌아가지만, Redux는 클라이언트(브라우저) 전역 상태 라이브러리기 때문에 브라우저 상에서 동작하게 된다. 원래 리액트 앱에서 리덕스를 사용하게 되면 단 하나의 리덕스 스토어만 존재하게 되지만, Next를 사용하게 되면 리덕스 스토어가 여러개가 생기는 문제가 생긴다. 그래서 Next와 redux를 같이 사용하려면 next-redux-wrapper 라이브러리를 사용해야한다. https://gi.. 2022. 11. 18. 01:45 [RTK] RTK-Query? RTK Query? RTK Query는 데이터를 fetching, caching을 할 수 있는 툴이다. 웹에서 데이터를 가져오는 것을 간단하게 만들어 데이터 패치(가져오기)와 캐싱 로직을 작성할 필요가 없어지게 한다. RTK-Query는 Redux-Toolkit 패키지에 포함되어있는 선택적인 추가 기능이다. 웹 애플리케이션은 일반적으로 서버에서 데이터를 가져오게되고, 데이터 업데이트 및 클라이언트의 캐시 된 데이터를 서버 데이터와 동기화된 상태로 유지해야 한다. RTK-Query는 Apollo Client, React Query, Urql 및 SWR과 같이 데이터 가져오기를 위한 선구적인 솔루션 제공 및 API 디자인에 고유한 접근 방식을 추가한다. RTK Query 특징 - 데이터 패칭(가져오기) 및 .. 2022. 11. 5. 17:37 [React] Redux-Toolkit 대표적인 API 알아보기 Redux-Toolkit 대표 API 정리 1. configureStore() 리덕스 코어 라이브러리인 createStore()를 추상화한 함수. store를 구성하는 함수이다. 기본 리덕스 미들웨어인 redux-thunk를 내장하고, redux Devtools를 활성화해준다. //기본 사용 예제 import { configureStore } from '@reduxjs/toolkit'; import todoReducer from '../todo/tdooSlice'; export const store = configureStore({ reducer: { todos: todoReducer, }, }); configureStore 전체적인 구성 import logger from 'redux-logger' im.. 2022. 10. 4. 23:55 [React] Redux-Toolkit Quick Start 공식 문서 따라하기 [React] Redux-Toolkit 초기 세팅 이전 포스팅은 Redux=Toolkit 템플릿을 이용하여 RTK 구조가 잡혀있는 설치 방법을 포스팅하였다. 이번에는 Redux 공식 문서에 있는 Counter 예제를 따라하면서 구현해 보도록하자 Store 설정 방법 및 Slice 작성방법을 작성하겠다. 1. CRA 설치 우선 자신이 설치하고자 하는 디렉토리로 가서 cmd 창으로 아래와 같이 입력한다. npx create-react-app [프로젝트명] 2. rtk 모듈, react-redux 설치 설치가 완료되면 해당 디렉토리 ([프로젝트명]) 으로 이동하여 rtk 패키지와 react-redux를 설치해준다. npm install @reduxjs/toolkit react-redux 3. Store 생성 .. 2022. 10. 4. 14:21 리액트 가상 DOM(React Virtual Dom) React Virtual DOM React 가상 DOM을 알기 위해선 우선 DOM의 개념부터 알아야한다. DOM(Document Object Model): 문서 객체 모델 문서 객체 모델(DOM)은 XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같은 계층 구조로 표현된다. DOM(Document Object Model)의 종류 1. Core DOM : 모든 문서 타입을 위한 DOM 모델 2. HTML DOM : HTML 문서를 위한 DOM 모델 3. XML DOM : XML 문서를 위한 DOM 모델 DOM(Document Object Model.. 2022. 9. 28. 00:29 이전 1 2 다음 728x90
