후니후니

✏️React를 경험해보자 3탄 2편에서 Axios를 통해 get을 호출했는데 Cors에러가 발생해서 API호출에 성공하지 못했다. 3편에서는 이처럼 Cors 에러를 해결할 수 있는 Proxy 설정을 하려고 한다. - Cors?? 우선 Cors에러가 발생하는 이유는, 다음과 같다. Front서버는 localhost:3000 포트를 사용 중이고, Backend는 localhost:5000 포트를 사용중이다. 이처럼 다른 포트를 사용중일 때, 보안 상의 이유로 Cross Origin Resource Sharing 에러가 발생한다. 이 문제를 해결할 수 있는 방법은 여러가지가 있지만, 나는 Proxy를 통해 해결하려고 한다. - Proxy ?? 네이버에 Proxy 단어를 검색했을 때 나오는 뜻은 "대리, 대리..

저번에는 프록시 설정까지 진행했다. 이번에는 화면에 보여줄 문구와, 이미지를 프론트에서 올리는 게 아닌 s3서버 url로 뿌려주기 위해 Json 파일을 백엔드 프로젝트에서 생성했고, 프론트에서 API 호출을 했을 때 데이터를 가져와 Vuex 스토어에 값을 저장하도록 했다. import skils from 'skils.json' router.get('/', (req, res, next) => { res.send(skils); }); // Node.js 일부 코드 지정한 주소에 get을 호출하면 json 파일을 내려주도록 코드를 작성했고, 프론트에서는 Axios를 통해 API를 호출 할 수 있도록 설정해줬다. 그 전에 미리 스토어도 사용할 수 있도록 Vuex 설치와 셋팅은 모두 해둔 상태다. 언제나 처음 셋..