Closed Suyeon9911 closed 2 years ago
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};
*useEffect 함수: useEffect 함수는 함수형컴포넌트에서 생명주기를 사용하기위해 리액트16.8버전부터 새로나온 함수방식이다 componentDidMount, componentDidUpdate, componentWillUnmount 를 실행해주는 함수이다. 두번째 객체에 빈 배열을 인자로 전달하면 componentDidMount 만 자동으로 실행이된다.
//클라이언트 POST API 요청
axios.post('http://localhost:3000/api/users/add', {
id: 4,
name: '개발이 취미인 사람',
})
//성공시 then 실행
.then(function (response) {
console.log(response);
})
//실패 시 catch 실행
.catch(function (error) {
console.log(error);
});
//서버 소스 코드
//임시 데이터
const users = [
{ id: 1, name: "유저1" },
{ id: 2, name: "유저2" },
{ id: 3, name: "유저3" }
];
/**
* @path {POST} http://localhost:3000/api/users/add
* @description POST Method
*
* POST 데이터를 생성할 때 사용된다.
* req.body에 데이터를 담아서 보통 보낸다.
*/
app.post("/api/users/add", (req, res) => {
// 구조분해를 통해 id 와 name을 추출
const { id, name } = req.body
//concat 함수는 자바스크립트에서 배열 함수이다. 새로운 데이터를 추가하면 새로운 배열로 반환한다.
const user = users.concat({id, name});
res.json({ok: true, users: user})
})
nodejs + express / react, axios / javascript
서버에서도 라우팅을 담당해줄 수 있고 리액트에서도 라우팅을 담당해줄 수 있습니다. 리액트는 react-router-dom을 설치하면 됩니다. 그럼 리액트상에서 누가 /list 로 접속하면 글목록 보여주고 /mypage 접속하면 마이페이지도 보여줄 수 있습니다. 근데 리액트 라우터로 /list 페이지를 개발해놨는데 실제 localhost:8080/list 로 직접 URL 입력해서 접속하면 아무것도 안뜹니다. 왜냐면 브라우저 URL창에 때려박는건 서버에게 요청하는거지 리액트 라우터에게 라우팅 요청하는게 아니기 때문입니다. 이걸 리액트가 라우팅하게 전권을 넘기고 싶다면 server.js 에 다음과 같은 코드를 밑에 추가하십시오.
(server.js에 추가)
app.get('*', function (요청, 응답) {
응답.sendFile(path.join(__dirname, '/react-project/build/index.html'));
});
예를 들어서 DB에서 글목록 데이터를 꺼내서 HTML로 보여주고 싶은 경우 이전엔 뭐 글목록.html 페이지를 서버에서 보내줬을 텐데 리액트가 있을 경우 리액트는 index.html 페이지 하나로 개발하기 때문에
리액트는 페이지가 index.html 하나만 있기 때문에 서버와의 통신은 거의 ajax로 진행하는 것만 잘 알아두면 됩니다. 세션이 있을 경우 회원정보 확인같은 것도 ajax로 알아서 됩니다.
그리고 nodejs 서버파일엔 const 여러개 모여있는 곳 하단에
app.use(express.json());
var cors = require('cors');
app.use(cors());
이 코드 넣고 시작하셔야 리액트와 nodejs 서버간 ajax 요청 잘됩니다.
1-1. AJAX (Asynchronous Javascript And XML) AJAX란, Javascript의 라이브러리중 하나로 Asynchronous(비동기) Javascript(자바스크립트) And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가진 XMLHttpRequest객체를 이용한 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, Javascript를 사용한 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 정리하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. 출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]
# axios VS Fetch API 일반적으로 자바스크립트에서 API를 연동하기 위해서는 보통 Fetch API를 사용하곤 했습니다. 리액트도 자바스크립트 bulit-in 라이브러리중 하나인 Fetch API라는 훌륭한 API 연동 모듈을 사용합니다. 하지만 Fetch API 에서는 자바스크립트 built-in 라이브러리라는 특성 때문에 많은사람들이 axios를 사용하는 것을 선호합니다. 출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]
Fetch()는 body 프로퍼티를 사용하고, axios는 data 프로퍼티를 사용합니다. Fetch의 url이 Fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어갑니다. Fetch에서 body부분은 stringify()로 되어집니다.
출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]
axios는 HTTP 통신간에 요구사항을 Compact한 패키지로써 사용하기 쉽게 구성되어 있다. Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활요하는 HTTP 비동기 통신 라이브러리 입니다. (백엔드와 프론드엔드간에 통신을 위해서 만들어진 AJAX도 더불어 사용하기도 합니다.)
Axios는 운영환경에 따라서 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다. Promise(ES6) API를 사용 요청(Request) 응답 (reply)을 JSON 형태로 자동 변경
Axios 다운로드 HTTP Methods (GET,POST,DELETE,PUT) Axios 사용해보기
React 에서 서버통신하기 .. feat.axios
Axios 설치 및 사용