리액트 CORS 2

[React] 개발과 배포시 cors에러 해결 기록(with. heroku cors-anywhere)

토이 프로젝트가 마무리 단계에 다다라서 배포 단계를 앞두고 있었다. 저번처럼 간단하게 깃페이지를 이용해 배포하려는데 로컬 환경에서는 공공데이터 API를 잘 불러오더니 배포하고 나니 통신 에러가 나는 것이었다. 콘솔을 보기 전에도 UI는 0.1초 정도 잘 나오다 흰 화면만 나오길래 'axios에서 뭔가 문제가 발생했나 보군' 했다. 그제야 생각해보니 로컬에서 개발할 때 cors에러 때문에 package.json에 proxy설정을 해줬었는데 이게 배포 시에는 적용이 안되어서 따로 무슨 처리를 해줘야 한다고 봤었던 기억이 났다. 처음에는 이 상황을 제대로 이해를 못 했는데 그래서 더 많이 헤맸다. 첫 번째로 시도해본 방법은 일단 .env 설정을 추가해주는 것이었다. development와 production ..

토이프로젝트 2022.02.26

[React] 공공데이터 활용 프로젝트 (.env, CORS, favicon에러)

API 인증키 노출 방지 깃에 public으로 소스를 올릴 것이기 때문에 내 인증키가 노출되지 않도록 설정해야 한다. 전역 폴더에 .env파일을 생성해서 아래처럼 파일에 내 인증키를 저장한다. 저장한 인증키를 사용할때는 아래와 같이 파일에서 인증키를 가져오면 된다. CORS에러 파이썬으로 토이 프로젝트를 했을 때에는 내가 직접 백엔드를 개발했었기 때문에 백에서 cors처리를 해주면 되었다. 그런데 이번에는 제공되는 API에서 데이터를 가져와야 하기 때문에 그 방법을 사용할 수 없었다. 그래서 package.json에서 proxy설정을 해주어 해결했다. 그러면 URL부분에 proxy에서 설정한 다음의 주소만 써주면 된다. favicon을 못찾는 에러 초기에 리액트 프로젝트가 생성될 때 같이 딸려오는 아이콘..

토이프로젝트 2022.01.26