230715 개발일지 TIL - .env파일 환경변수 세팅 오류 404 error

GET http://localhost:3000/undefined/todos 404 (Not Found)

문제 발생
404오류가 발생했다. 서버가 요청한 리소스를 찾을 수가 없어서 발생한 오류이다.
.env파일을 생성하고

// .env파일
REACT_APP_SERVER_URL=http://localhost:4000

// todos.js
// axios 요청 들어가는 모든 모듈
import axios from "axios";
import todos from "../redux/modules/todos";

// 조회
const getTodos = async () => {
  const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`);
  console.log(response.data);
  return response.data;
};

export { getTodos };

콘솔창에서 3000포트로 요청을 하고 있었는데

React 서버는 3000포트, Json 서버는 4000포트를 사용하고 있었다.

해결 방법
터미널에서 실행하고 있는 서버를 종료하고

 yarn start
 yarn json-server --watch db.json --port 4000

터미널에서 위에 명령어를 입력해 서버를 모두 재실행한다.

서버를 재실행하였더니 콘솔로그도 잘 찍힌다.

느낀 점
.env파일 생성후에는 서버를 재실행해야한다는 것을 잊지 말자