moonscode

Thunk란? 먼저 thunk를 이해해야 redux가 비동기를 어떻게 처리하는지 이해할 수 있다. https://ko.wikipedia.org/wiki/%EC%8D%BD%ED%81%AC 썽크 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 컴퓨터 프로그래밍에서 썽크(Thunk)는 기존의 서브루틴에 추가적인 연산을 삽입할 때 사용되는 서브루틴이다. 썽크는 주로 연산 결과가 필요할 때까지 연산을 ko.wikipedia.org thunk는 "생각된(think의 과거분사, 실제로 없는 말)" 후 무엇인가를 실행하겠다. 라는 뜻으로, redux에서는 "무엇인가 로직을 처리하고 dispatch를 실행하겠다." 라고 생각하면 된다. 즉, dispatch전 실행될 코드를 thunk로 이해하면 되겠..

redux에서 비동기함수 처리는 [redux-thunk](https://github.com/reduxjs/redux-thunk)라는 별도의 미들웨어를 통해야 한다. 반면 rtk은 비동기함수 처리를 위해 createAsyncThunk 함수를 내장하고 있다. Thunk란? https://moonscode.tistory.com/249 Redux redux-thunk Thunk란? 먼저 thunk를 이해해야 redux가 비동기를 어떻게 처리하는지 이해할 수 있다. https://ko.wikipedia.org/wiki/%EC%8D%BD%ED%81%AC [썽크 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. moonscode.tistory.com createAsyncThunk란? redux-t..

https://github.com/redux-orm/redux-orm GitHub - redux-orm/redux-orm: NOT MAINTAINED – A small, simple and immutable ORM to manage relational data in your Redux store NOT MAINTAINED – A small, simple and immutable ORM to manage relational data in your Redux store. - GitHub - redux-orm/redux-orm: NOT MAINTAINED – A small, simple and immutable ORM to manage relati... github.com

특징 SSR이 가능하다. - next-redux-wrapper를 사용하면 SSR에서도 store에 접근이 가능하다. Entity(RTK - slice)간에 조합이 자유롭다. 가장 크게 아래 두 기능이 강력하다. - A Entity의 Action에 따라 B Entity의 상태를 변경할 수 있다. - A Entity Getter, B Entity Getter를 조합해서 (캐싱된) 값을 가져올 수 있다. API createEntityAdapter 정규화된 Entitry 상태를 관리하기 위해 빈번히 사용하는 CRUD 패턴의 Reducer 함수를 제공하는 API Client에서 정규화된 데이터 관리가 필요할까? https://redux.js.org/usage/structuring-reducers/normalizi..

next.config.js에서 redirect를 처리해보자. '/about' 페이지에 진입했을 때 '/' 페이지로 redirect하고 싶은 경우, module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ] }, } source > 대상 페이지 destination > 이동할 페이지 permanent (true,false) > 응답코드 true = 308, false = 307 308 영구 Redirect > 이 페이지는 영구적으로 이동 307 임시 Redirect > 이 페이지는 임시적으로 이동 basePath > 선언된 모든 redirect의 source, destina..

ES6부터 export, import의 개념이 도입된 건 알고 있는데, AMD과 RequireJS는 무엇일까? AMD AMD(Asynchronous Module Definition)은 JavaScript 모듈화를 위한 디자인 패턴중 하나. AMD는 JavaScript 코드를 모듈 단위로 구성하고 이를 비동기 방식으로 로드할 수 있도록 해줍니다. AMD는 Require.js와 함께 사용되고 define() 함수를 사용해서 모듈을 정의하고 require() 함수를 사용하여 모듈을 로드합니다. AMD를 사용하면 애플리케이션의 성능을 개선할 수 있습니다. 모듈을 비동기적으로 로드해서 페이시 로드 시간을 줄이고 필요한 모듈만 로드해서 메모리 사용을 최적화합니다. require.js require.js는 JavaS..

TypeScript docs 자료형 및 강력한 객체지향 아키텍처를 지원 tsconfig.json compile config 내용을 작성하는 json 파일 Type Declaration 변수 타입선언 let foo: string = 'hello'; let bar: number = true; // error 매개변수 타입선언 function multiplyA(x: number, y: number): number { return x * y; } const multiplyB = (x: number, y: number): number => x * y; Type Type JS TS Description boolean ◯ ◯ true와 false null ◯ ◯ 값이 없다는 것을 명시 undefined..

React 가이드 자습서 https://ko.reactjs.org/tutorial/tutorial.html 개념서 https://ko.reactjs.org/docs/hello-world.html JSX 별도의 파일에 마크업(HTML)과 로직(JavaScript)를 넣어 기술을 인위적으로 분리 둘 다 포함하는 컴포넌트 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리 필수요소는 아니지만 로직(JavaScript) 안에서 UI관련 작업을 할 떄 시각적으로 더 도움이 된다고 생각 const name = 'Heo'; const element = Hello, {name}; ReactDOM.render( element, docuemnt.getElementById('root'); ); ..