JS11 📚 [React] Redux 연결하기 (+ redux-promise, redux-thunk) Redux는 state를 관리해주는 툴 입니다. state는 컴포넌트 안에서 데이터를 교환하거나 전달을 할때 사용하며, mutable이기 때문에 컴포넌트 안에 자유롭게 state를 변경 할 수 있습니다. Redux 설치 - redux 설치와 동시에 redux 를 잘 쓸 수 있도록 도와주는 미들웨어인 redux-promise, redux-thunk 함께 설치 npm install redux react-redux redux-promise redux-thunk --save 프로젝트에 Redux 연결 1. 크롬 확장 프로그램 설치 2. client/src/index.js 아래 코드 작성 // client\src\index.js import React from 'react'; import ReactDOM from.. 2023. 3. 21. 📚 [node.js + react] 클라이언트와 서버 동시에 실행 - concurrently 📚 [node.js + react] 클라이언트와 서버 동시에 실행 - concurrently 원래는 따로 npm strat 해야 하지만 concurrently를 설치해 준다면 그럴 필요가 없어진다. npm install concurrently --save 기존 package.json에서 아래의 코드처럼 추가 작성 해줘야 한다. { "name": "react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node sever/index.js", "backend": "nodemon sever/index.js", "test": "echo \"Error: no test specified\" && exit 1",.. 2023. 3. 17. 📚[JS] 업로드할 슬라이드 이미지 미리보기 기능 구현하기 (f. bootstrap) html 부분(bootstrap slide carousel 사용) 이미지등록 슬라이드 미리보기 Previous Next 부트스트랩 이용 시 js 부분 // 슬라이드 미리보기 function readMultipleImage(input) { if(input.files) { const fileArr = Array.from(input.files) fileArr.forEach((file, index) => { const reader = new FileReader() const $imgDiv = document.createElement('div') $imgDiv.classList.add('carousel-item') const $img = document.createElement('img') $img.classLi.. 2023. 2. 22. 📚 [React] 리액트 프록시 설정 (Proxy) 클라이언트 호스트와 서버 호스트가 다를때! CORS정책때문에!! 두개의 다른 포트를 가지고 있는 서버는 아무 설정없이 리퀘리스트를 보낼 수 없음 해결방법은 여러방법 중 Proxy를 사용하는 방법이 있다!!!!! 먼저 나의 서버의 호스트는 8080, 클라이언트 호스트는 3000이다. client > src > components > views > LandingPage > LandingPage.js 에 /api/hello로 요청을 보내고 요청을 받았다면 콘솔에 받은 데이터를 출력해달라고 한다. import React, { useEffect } from "react"; import axios from "axios"; function LandingPage() { useEffect(() => { axios.get.. 2023. 1. 26. 이전 1 2 3 다음
