TIL
💡 axios란
- 브라우저,Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다.
- 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게 하기 위해 Ajax와 더불어 사용한다.
- 이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할 땐 axios를 쓰는 편이다.
💡 axios의 특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
- Promise(ES6) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소
- HTTP 요청과 응답을 JSON 형태로 자동 변경
💡 백엔드 서버와 초기 연결(axios,CORS)
- 백엔드와 데이터 초기 연결을 위한 과정
-
app.js (import axios from "axios")
const something = () => { axios .get("/restaurant") .then((response) => { console.log(response.data); }) .catch(function (error) { // 에러 핸들링 console.log(error); }); }; -
setupProxy.js 생성
-
리액트 기반 튜토리얼을 보면 리액트의 프론트에서 벡엔드로 요청할 때 중간에 proxy서버를 두고 요청한다.
-
여기서 우리가 벡엔드 서버에 연결하려면 CORS를 알고 가야한다.
CORS : 일종의 방어막 , 다른 웹 사이트 내 서버에 요청을 보내게 되면 보안적인 이슈가 발생할 것이다. 따라서 방어막이 존재하기 때문에 우리가 실제로 인터넷을 사용할때 이 곳 저 곳에서 가져오는 리소스가 안전하다는 최소한의 보장을 받을 수 있다.
Cross-Origin Resource Sharing의 줄임말로 교차 출처 리소스 공유라고 해석한다. -
클라이언트는 3000포트이고 서버는 5000포트이기 때문에 Cor정책으로 에러가 발생한다. 이 문제를 해결하기 위해서 미들웨어 모듈을 다운로드한다.
yarn add http-proxy-middleware -
그리고 아래와 같은 코드를 넣었다.
target으로 잡는 주소를 백엔드 서버로 잡고api에"/restaurant"이 들어가게 된다.const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( createProxyMiddleware("/restaurant", { target: "http://15.165.160.84", //접속하려는 서버의 루트 URL changeOrigin: true, }) ); };
- porxy설정
-
위에서 이미 프록시 설정을 해줬었지만 작동하지 않았다. 따라서
package-json제일 마지막 부분에 아래와 같은 구문을 추가했다."proxy": "http://15.165.160.84"
🎉 한 주의 회고
저번주에 개인프로젝트를 다 끝마치지 못하고 이번주가 시작됐다.
저번주에는 혼자 하는 게 너무 힘들었었고 뭔가 혼자 뒤떨어지는 느낌이 들어서 이번 프로젝트를 시작할 때 너무 많은 걱정이 있었다.
이번에 "또" 팀장이 되어서 .. 너무 너무...걱정이 많았다. 프론트는 심지어 같이 하시는 분도 같이 계시는지라
그래도 나에겐 다른건 없어도 사람운이라는 게 항상 있기 마련인데
이번에도 그랬다.
저저번주 팀장이고 cs스터디도 팀장이고 이번 개인프로젝트 때에도 팀장인데
같은 팀원분들과 아직까지도 같이 잘 지내고 있고
또 이번에 같이 하시는 분들도 다 다음까지 잘 지냈으면 좋겠다. 정말 좋으신 분들 😇
또한 어제는 백엔드서버와 연결하는 작업을 했는데 정정 3시간? 동안 서버를 연결했던 것 같은데 시간이 무색할만큼 같이 모르는 부분이 있든 없든 무작정 검색에 돌입해서 같이 공유하고 얘기하는 과정이 너무 재미있었다ㅜㅜ 진ㅉ .. ㅏ ... 너무너무.. .무지하게 . . . . . . . . .
나중에도 이런 경험들은 아무도 경험하지 못할 값진 경험인 것 같다
이런 감사함에 또 감사하고
같은 조원분들 너무 좋고 다들 화이팅 넘치시는 구조 ! 이번주도 힘들겠지만 이어나갔으면 좋겠다.
제발 ~~~
