Land of Joe

지난 주엔 전역 상태 관리 Global State Package의 대표 주자, Redux에 대해 배우고 나의 CRA 리액트 프로젝트에 적용해보았다. React-Redux를 사용할 때엔 action, reducer 개념부터 시작해서 useDispatch, useSelector까지 전체 흐름을 이해하는 데 꽤 애를 썼었다. 그러나 오늘 배운 Recoil 리코일! 정말 얼마나 단순하던지..! 그리고 useState와 사용 방식이 비슷해 반갑기도 했다. 각설하고 배운 내용 정리 시작~! Recoil 전역 상태 관리 패키지 20년도 Meta에서 리액트 전용으로 쓰라고 만들어준 패키지 [ Recoil의 특징 ] 리액트 전용이라서, 리액트 문법에 매우 어울린다. 불필요한 설정이나 연결 코드 등이 필요 없다. Hook..

Actions must be plain objects. Instead, the actual type was: 'function'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for example..

제목 오타임..... 사실 오타 아님.......ㅎ

[ CRA가 기본으로 제공하는 초기 구성 ] => 폴더: node_modules, public, src => 파일: .gitgnore, package-lock.json, package.json, README.md public 폴더엔 정적 파일들을, src 폴더엔 동적 파일들을 넣는다고 한다. 그래서 public 폴더에 index.html 파일을 넣고, src 폴더에 App.js와 index.js 파일을 넣는 것으로 보통 CRA를 시작한다. 내가 고민한 부분은 위 세 파일을 제외한 프로젝트 설계를 하는 과정에서 발생하는 파일들을 어떻게 구조화할 것이냐에 대한 것이다. (public / src 폴더에 넣을 것이냐, 폴더 내부에서 하위 폴더 구조화는 어떻게 할 것이냐 등..) 이 것엔 정답은 물론 없거니와, ..

전역 상태 관리 Global State Package에 대해 배웠다. 전역 상태 관리의 종류에는 Redux, Recoil, Justand, jotai 등 여러가지가 있다. 하나하나에 대해 알기 이전에 전역 상태 관리가 무엇인지, 그 필요성이 대두된 배경이 무엇인지 알아보자. 전역 상태 관리 Global State Package는 State를 전역변수로 관리하는 패키지 그렇다면 기존 useState의 특징에 대해 알아보자. [ useState의 특징 ] 1. 해당 State를 필요로 하는 부모 컴포넌트에 State를 선언해줘야 한다 - 이벤트의 시작지점과 도착지점이 되는 컴포넌트 두 개를 하나의 부모 컴포넌트로 묶어서 그 부모 컴포넌트에 state를 선언해준다 - 그렇게 부모 컴포넌트에 선언한 state를..

1. Node.js 1-0. 할 것 Node.js를 통해 리액트 프로젝트 만들기 구체적으로, node.js 기반 프로젝트를 만들어서 거기에 리액트를 설치하는 것이다. (지난주까지 내가 한 것: 단순 바닐라 웹에 리액트를 올려서 사용하였음) 1-1. Node.js의 의의 - 자바스크립트 런타임 기술 (런타임이란 '언어가 구동되는 환경'. js의 경우 브라우저 혹은 node.js가 있겠고, 그것들이 js의 해석기 역할을 하고 있다고 보면 된다.) - 개발의 중심이 브라우저가 아닌, Node.js가 될 것 (지금까지 브라우저한테 js의 해석을 맡겼던 것을, node.js가 해석하는 것으로 변경할 것) - Node.js의 여러 기능을 이용할 수 있게 되었다. >> sudo apt install nodejs (설..