[React/MBTI] POST서버통신 오류: ERR_NAME_NOT_RESOLVED
0
ERR_NAME_NOT_RESOLVED
해당 URL의 도메인 이름을 찾을 수 없다는 뜻.
클라이언트가 요청한 URL을 DNS(Domain Name System)가 해결할 수 없을 때 발생하는 오류다.
에러메세지 뜯어보기
에러메세지를 확인하니 url이 정상적으로 불러와지지 않았다.
코드 뜯어보기
원인 추론
- import를 제대로 못 해오고 있나? 저 경로로 import 하는 게 아닌가?
- .env에 설정을 잘못했나?
해결
프로젝트 세팅에 따른 변수명 설정방식
보통 민감한 정보는.env파일에 설정해두는데,
환경변수 값들을 그 동안 생각 안하고 쓰다가 이번에 얻어 걸린 것이다..
보통 API_KEY 또는 SERVER_URL 등은 .env 파일에 숨긴다.
나는 vite로 프로젝트를 세팅해두었는데,
이러한 경우엔 CRA(create-react-app)으로 한 것과는 다른 설정 방식이 필요하다.
- Vite
# .env 파일
VITE_이름 = 123
VITE_EXAMPLE_SERVER_URL = http://localhost:4000
VITE_API_KEY = test1234
VITE_SECRET_KEY = abcdefg// 예시: src/main.js 또는 src/App.jsx 등
const apiKey = import.meta.env.VITE_API_KEY;
console.log('API Key:', apiKey);- CRA
# .env 파일
REACT_APP_이름 = 123
REACT_APP_EXAMPLE_SERVER_URL = http://localhost:4000
REACT_APP_API_KEY = test123
REACT_APP_SECRET_KEY = abcdefg// 예시: src/index.js 또는 src/App.jsx 등
const apiKey = process.env.REACT_APP_API_KEY;
console.log('API Key:', apiKey);결론
기존 작업하던 파일과 .env 파일 내의 변수명을 이렇게 바꿔주자.
앞에 VITE가 붙는 게 그렇게 중요한지 몰랐다.
이제 임시로 찍어둔 콘솔로그가 잘 출력되고 있다.
ref.
FrontEnd Developer