JavaScript & Node js

[Redux] 노드 리액트 Redux 기본 구조 만들기!

- Setting up Redux! $ npm i redux react-redux redux-promise redux-thunk --save 여기서 redux-promise, redux-thunk 는 간단히 말하면 redux 를 잘 쓸 수 있도록 도와주는 역할이다. Redux 는 store 안에서 모든 state 를 관리하게 되는데 Dispatch 할 때, action 은 객체 형식이어야 함 ,, 그런데 언제나 객체 형식으로 받는게 아니라 promise, function 형태로 받을 때가 있음 그렇기 때문에 redux-promise, redux-thunk 를 middleware로 받는 이유는 위와 같은 원인 때문에 에러없이 진행하기 위해서는 필수적으로 설치해야 함! * redux extension - 다..

[Concurrently] 서버와 클라이언트 동시에 실행시키기!

서버 - node.js 클라이언트 - react 환경에서 진행하구있다. 여태까지는 서버 따로 클라이언트 따로 npm start 를 해주었었는데 concurrently 라이브러리를 이용하면 한번에 시작시킬 수 있다고 한다! 1. 설치하기 $ npm install concurrently --save 2. root 디렉토리의 package.json 의 scripts 부분에 dev 라는 새로운 부분을 추가하였다. concurrently 를 사용하고 싶다면 아래 이미지와 같이 앞에 명시해주고 뒤에 순차적으로 실행시키고 싶은 명령어를 쓰면 된당! 3. 실행화면

[node.js/react] server와 client간의 port가 달라 연결이 안될 때

Server - Client 간 다른 포트를 가지고 있으면 아무런 설정 없이 Request 를 보낼 수 없음. -> Cors(cross-origin resource sharing) 이라는 정책때문인데! (보안) 이를 해결하려면 여러 방법이 있지만 서버와 클라이언트 둘다 만족시키면서 유연하게 할 수 있는 것이 바로 Proxy! https://create-react-app.dev/docs/proxying-api-requests-in-development Create React App · Set up a modern web app by running one command. > Note: this feature is available with `react-scripts@0.2.3` and higher. crea..