분류 전체보기
-
Redux toolkit 세팅하기⌨️ conceptualization/Redux 2022. 10. 3. 12:45
Redux Toolkit 와 React-Redux 설치하기 📌 typescript를 기반으로 하는 새 프로젝트를 생성 yarn create react-app redux-toolkit --template typescript 📌 Redux toolkit을 다음과 같이 추가한다 yarn add @reduxjs/toolkit react-redux Redux store 생성 📌 src/app/store.js 생성 - configureStore api를 import시켜준다. - 우선 빈 redux store를 생성한다. import { configureStore } from '@reduxjs/toolkit' export const store = configureStore({ reducer: {}, }) // Inf..
-
Redux Toolkit와 RTK Query에 포함된 API⌨️ conceptualization/Redux 2022. 9. 20. 08:46
📌 Redux toolkit 에 포함된 API는 다음과 같다 configureStore() creatStore를 래핑(기능옵션과 기본값을 제공) 자동으로 slice reducer와 결합 모든 Redux middleware를 추가 redux-thunk 를 포함함 createReducer() switch 문을 작성하는 대신 사용가능 immer 라이브러리 자동 사용 createAction() 액션 생성자 함수 생성 함수 자체가 toString() 으로 정의 되어있음 createSlice() reducer functions의 객체, slice name, initial state value,을 받아 slice reducer를 자동 생성 createAsyncThunk() an action type string 과 ..
-
Redux Toolkit 시작⌨️ conceptualization/Redux 2022. 9. 14. 08:42
Redux Toolkit 왜 만들어졌을까? Redux 저장소 구성이 너무 복잡해서 Redux 에서 작업수행시 많은 패키지를 추가해야해서 Redux 에서는 너무 많은 상용구 코드가 필요해서 📌 상용구 코드란(boilerplate-code) ? 수정하지 않거나 최소한의 수정만을 거쳐 여러 곳에 필수적으로 사용되는 코드를 말한다, 프로그램의 로직이나 언어의 필수 구문은 아니면서, 관례적으로 소스 파일 시작 부분에 추가되는 선언들과 같은 것 👉🏻 참고) https://blog.naver.com/oioioq/222339375293 웹에서의 boilerplate의 의미 ( 상용구 코드 / 코드 템플릿 ) boilerplate-code ( 상용구 코드 ) 상용구 코드 - 수정하지 않거나 최소한의 수정만을 거쳐 여러 ..
-
유틸리티 타입(Utilty Types)⌨️ conceptualization/Typescript 2022. 9. 12. 16:12
🔥 typescript에서 다양하게 사용되는 utility type에 대하여 알아보자 1. keyof 2. Partial 3. Required 4. Readonly 5. Record 6. Pick 7. Omit 8. Exclude 9. NonNullable 1. keyof 타입 👉🏻 객체의 key 값을 추출한다 interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 📌 다음과 같은 키 값을 나타낸다 // 'id' | 'name'| 'age'| 'gender' const uk: UserKey = "name"; // 📌 name 과 같은 UserKey 프로퍼티 값이 들어가지..
-
Generics 에 대하여⌨️ conceptualization/Typescript 2022. 9. 12. 14:32
Generics가 무엇일까 ? general 이라는 단어를 아는가? 이것은 일반적인, 보편적인 이라는 뜻이다 '-ic'라는 접미사를 통해 일반적인 것들과 관련된(작용을 하는) 뜻으로 해석할 수 있다. 👉🏻 한마디로 말해서 프로그래밍용 언어로 생각해 볼때 데이터 형식에 의존하지 않고, 하나의 값이 여러 다른 데이터 타입을 가질수 있도록 하는 방법이다. 👉🏻 우선 다음과 같은 예제가 있다 function order(arr: number[] | string[] | boolean[] | object[]): number { //📌 이러한 방식으로 변수가 하나씩 선언될때마다 데이터 타입을 지정해 줘야한다. return SafeArray.length; } const arr1 = [1, 2, 3]; order(arr1..