JavaScript
![[Redux-toolkit] Redux-toolkit 이란?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbPtU64%2Fbtq2MPDwSOW%2FSye25ciR6O8YKsq2X5dAm0%2Fimg.png)
[Redux-toolkit] Redux-toolkit 이란?
기존에 Redux- saga를 사용하면서 기능면에서는 만족했으나 코드가 너무 길어진다는 단점이있었다. 그에 비해 Redux-tookit은 CreateSlice를 통해 Action과 Reducer를 한번에 정의할수있고, 자체적으로 immer를 내부적으로 도입해서 사용하고있어서 코드가 짧아진다. 또한 비동기처리도 CreateAsyncThunk를 통한 , thunk 미들웨어를 내장하고있어서 추가로 비동기를 위한 외부 라이브러리를 설치할 필요가없다! 물론 saga의 기능을 쓰고싶다면 따로 설치하여 연동이 가능하다. 또한 redux devtool를 디폴트로 제공한다. Redux-toolkit에 포함되는 것 configureStore() : 단순화 된 구성 옵션을 제공합니다 . 슬라이스 리듀서를 자동으로 결합하고 ..
[Redux] Redux-Saga 원리 , 개념정리
saga의 아이디어는 generater 함수인데 .. * 별을찍는것이다 이렇게 function* 충격과 공포임 function* idMaker(){ var index = 0; while(true) yield index++; } 보통 함수라면 while(true)시 무한 반복이 되겠지만 generater 함수에서 yield를쓴다면 함수를 호출할떄마다 한번 하고 멈추고 한번하고 멈추게된다. var gen = idMaker(); // "Generator { }" console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 실제 콘솔로그를 찍는다면 0 멈추고 다시 호출하면 1 멈추..
[Redux] redux-thunk / redux-saga
redux - thunk , saga 는 리덕스 미들웨어라고 부른다 . redux-thunk는 리덕스 미들웨어에서 비동기 작업을 처리하는데 사용하는 미들웨어로 비동기 작업을 다루는 미들웨어 중에서 가장 대표적인 리덕스 미들웨어이다 . 여기서 비동기 작업을 처리한다는게 핵심 ! 기존 리덕스는 비동기처리가 안되기때문에 thunk를 간단히 찾아보았을때, dispatch를 나중에 , 한번에 dispatch를 여러개해준다! 이게 핵심이었다. 또한 saga와 비교하였을때 매우간단하다. 파이썬 프레임워크로 예를 들자면 thunk는 플라스크 , saga 는 장고 같은 느낌을 받았다. 내가 내린결론은 간단한 프로젝트에서는 thunk를 쓰면 낫베드지만 결국 조금규모가있다면 saga를 쓰는게 맞다 이다. saga에는 대표적..
[REACT] Babel ? webpack?
create-react-app에 기본적으로 들어있는 babel, webpack .. 가끔 종종 웹페이지 구성시 봤던것들인데 한번알아보기로했다. 깊은 이해보다는 어떤 역할을 하는지 대해 알아보자! Babel 공홈에는 간단하게 Babel is a Javascript complier 라고 적혀있다. Babel의 역할은 transpiling 이다 즉 상위버전의 js 코드로 작성된 문법을 하위 버전의 js 코드 문법으로 바꿔준다. 예를들면 ES6 ,ES7. ... 등으로 작성된 js코드를 -> ES5 로 바꿔준다. 왜 이런 transpiling 이 필요할까..? js 경우 매년 새로운 js 버전들이 나온다 . 이렇게 js 가 매우 빠르게 꾸준히 발전하는것에 반해 브라우저가 그것을 전부 다 지원하지 못하는 경우가 ..
![[REACT] 환경설정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbwKkDH%2FbtqID6kO9WZ%2FYKogtE20MiARAkPyr8cA81%2Fimg.png)
[REACT] 환경설정
window 에서 리액트를 설치해보자 ! node js 설치 ! (LTS ) invalueable.tistory.com/117 [Node.js] Node.js 설치 [우분투 리눅스 / Node.js 12버전 기준 ] // build-essential , curl 설치, 설치된 경우라면 생략하면됨. $ sudo apt-get update $ sudo apt-get install -y build-essential $ sudo apt-get install curl $ curl.. invalueable.tistory.com 설치후 npm install --global yarn --global : 전역 설치를 위한 옵션 그리고 설치 확인 . npm 과 yarn이 뭘까 ?? npm( node package mana..