- 간단한 CSS부분
- 지금까진 웬만한 정렬은 Flex를 이용
- 원하는 위치와 넓이 등을 세분화하여 조절하기 위해 grid를 사용하였고 원하는 모양을 만들 수 있었다.
- 부모 요소의 div 사이즈를 계속해서 넘어가 밖으로 삐져나오는 현상이 생겼다.
- box-sizing을 이용하여 넘어가지 않도록 수정
- 데이터 통신 부분
- axios를 이용한 통신중 cors에러에 막혔다.
- 처음 package.json 에 proxy를 추가하셔 해결( 백엔드 주소를 넣었다.)
- 이렇게 되니 이후 npm start를 이용해 서버를 시작할 때 에러가 났다
- React의 http-proxy-middleware를 이용하여 해결
그렇다면 CORS에러란 무엇인가?
CORS(Cross-Origin Resource Sharing) 에러가 발생하는 원인은 클라이언트와 서버의 도메인이 달랐을 때 보안 상의 이유로 응답을 받지 못하도록 막은 것
프론트에선 proxy를 이용해서 해결해본다
- proxy : 다양한 이유로 직접 통신하지 못하는 두 개의 컴퓨터 사이에서 서로 통신할 수 있도록 돕는 역할
webpack.config 파일에서 proxy를 설정한다
비동기 요청에서 url주소를 바꿔준다
하지만 둘 다 같은 local로 열어야만 가능했다 위 방식은 그래서 나는 middleware를 이용해 보기로 함
서버로 가기 전에 프록시 서버를 거쳐서 출처를 response와 같게 수정하고, Server에 접근하도록 하는 것!
번저 http-proxy-middleware를 설치
npm i http-proxy-middleware
이후 setupProxy.js 세팅
src/setupProxy.js를 생성합니다. 프록시를 세팅할 파일
// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
createProxyMiddleware('/users', {
target: 'https://jsonplaceholder.typicode.com',//서버 주소
changeOrigin: true,
}),
);
};- createProxyMiddleware (’/users’, {…}) 의 ‘/users’는 ‘/users’로 시작하는 endpoint를 가진 api와 모두 매칭
- target에는 url의 endpoint를 제외한 출처만 명시
ex) https://jsonplaceholder.typicode.com/users의 경우, endpoint인 /users를 제외한 https://jsonplaceholder.typicode.com를 명시 - changeOrigin :호스트 헤더의 출처를 대상 URL로 변경 하는지 여부입니다. CORS 처리를 위해 출처를 수정해주어야 합니다. 기본값은 false입니다.
이후 호출을 해보자
// src/App.js
useEffect(() => {
async function fetchdata() {
const { data } = await axios.get('/users');
console.log(data);
}
fetchdata();
}, []);App.js에서 url의 endpoint인 /users로 api를 호출한다. proxy를 세팅하면 서버를 재시작해야한다.
하지만 이후 github페이지로 배포한 후 404 에러가 뜬 후 프록시 서버가 먹히지 않는다는 얘기가 있었다.
프록시 서버는 개발 환경에서만 사용할 수 있고 Netlify에서 proxy server를 세팅하는 방법이 있다고 한다.
AWS로 했을 때 백엔드와 협업하며 포트를 열어서 했던 것 같은데 이전에 한 방법을 다시 찾아봐야 할 것 같다.
Netlify 배포를 이용한 해결 방법 및 해당 에러 레퍼런스 - https://www.datoybi.com/http-proxy-middleware/
