진짜오늘 종일 CRA구축하는 거만 했네욤.. 계속 에러뜨고 이쥐랄 나서.. 힘들었습니다. 최대한 자세히 적으려고 했고.. 좋은 블로그.. 디테일한 설명들을 찾아서 포스팅해봅니다.. 먼저 프로젝트가 될 디렉토리를 만들고, npm init -y를 해준다. npm init -y 그러면 package.json 파일이 생기게 된다. ● 작업에 필요한 폴더 만들기 먼저 리액트 환경과 매우 비슷하게 만들 것이므로, src, public, 그리고 빌드가 되었을 때 파일이 저장될 dist 파일을 만든다. mkdir src public dist src : react 작업을 할 폴더 public : 정적 파일이 위치할 폴더 dist : 빌드한 작업물이 들어갈 폴더 → 배포란 뜻으로 distribute를 의미한다 다음 pub..
React
빌드 하셨어염? 우리는 리액트 프로젝트를 완성하고, 사용자에게 제공할 때는 빌드 과정을 거쳐서 배포를 하게 됩니다. 빌드를 하는 과정 속에는 자바스크립트 파일 안에 불필요한 공백, 주석, 경고메시 등을 제거해 파일 크기를 최소화하기도 하고 JSX 문법이나 최신 자바스크립트 문법이 원활하게 실행되도록 Babel을 활용해 트랜스 파일 작업도 할 수 있죠. 이 작업은 웹팩이라는 도구가 담당하고 있습니다. 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일이 하나로 합쳐지게 됩니다. CRA(create-react-app)로 프로젝트를 빌드할 경우 기본 웹팩 설정에는 SplitChunks라는 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파..
이제.. redux-saga를 맛봐야할 차례가 되엇네염.. 어제 thunk를 공부하면서 도무지 이해가 되지않아.. 그리고 왜 success니 failure니 뭐니 이딴거를 왜 설정하니.. 이해가 되지 않아.. 포기하고싶었으며.. 이해가 되지 않았으며.. 버리고싶었읍니다.. 그래.. 리듀서 함수 내에서 비동기 로직 못쓰니까 thunk 쓰는구나. 그래 알겟는데 왜.. success, failure 이런 성공 실패 구분을 나누지? 싶었습니다. 하지만 비동기 로직을 짤 때 원래 try와 catch문을 쓰는 것은 일반적인 로직이고.. thunk에서 dispatch를 받아오는 이유와 (왜받아와서 왰즤?라는의문이 들었었기에..) 그리고 Promise의 구현을 thunk에서 하는 것이라고 깨우치고 난 뒤 조금 이해가 ..
리덕스.. 부터 react-redux, RTK까지 .. 오느라 참 힘들었씁니다.. 이게 2주나 걸릴 줄이야.. 우리는 리덕스의 3가지 규칙을 배웠습니다. 상태는 read-only이다. 하나의 애플리케이션에는 스토어가 1개이다. (리듀서도.. 1개이다. 실은combine해주니까) 리듀서는 순수 함수이다. 우리는 store에 상태를 변환시키기 위한 로직을 리듀서 함수내에서 적어줬었죠, 툴킷을 쓰기 이전에는 switch 문으로 action.type을 나눠서 로직을 적고, 툴킷을 쓰게 된다면 reducers라는 객체에 로직을 적어주었습니다. 하지만 리듀서함수는 순수함수여야한다고 했습니다. 따라서 비동기적인 로직은 리듀서 함수에 적을 수 없습니다.. 않의 그럼 어케 이거 비동기 처리 할 수 있다는 고임? 따라서 ..
● 실습 source src > index.js index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { createStore} from 'redux'; import rootReducer from './modules'; import { Provider } from 'react-redux'; const store = createStore(rootReducer); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); src > modu..
이전에 리액트 리덕스는 어떻게 활용할 수 있는지 알아보았습니다. 그런데 매번 액션 생성 함수를 만들어주어야할까요? 넘나 귀찮지 않습니까?.. 그리고 리듀서 함수에서 switch문을 통해 여러번 적는 행위도 너무 귀찮아 보입니다. 매번 return 마다 구조분해 문법을 사용하여 state를 가져왔지만, 만약에 state구조가 복잡하다면 이 또한 관리하기 힘들어지게 됩니다. 이것을 해결할 방법! 에 대해서 이번에는 공부해보겠습니다. ● 리덕스 더 편하게 사용하기 npm i redux-actions 먼저 위의 라이브러리를 설치해줍니다. 다음 우리가 만들어주었던 counter.js 모듈로 돌아와 createAction 을 redux-action으로부터 불러와줍니다. counter.js import { creat..
