프론트엔드 개발자 신상오
article thumbnail

💻 들어가며

취업준비를 하면서 cs 공부에 집중을 하고 있었는데

이론적인 부분만 파는 것 보다는 역시 실제로 프로젝트를 해보면서

만나는 에러나 학습 내용을 글로 작성해보는 것이 재미도 있고 효율적이라 생각이 듦

 

그래서 예전에 만들어 놨던 로그인, 회원가입 기능을 리팩토링하고

커뮤니티 생성, 게시판 등 여러 기능을 덧붙이는 방향으로

다시 토이 프로젝트를 재개하기로 했다.

 


❌ 에러

이전에 동작하는 것을 확인했는데 post 요청이 가는  url에서 오류가 났다.

아마 next.js에서 api 요청을 할 때 react에서 프록시 처럼

클라이언트와 서버간 통신시 중간 처리를 해주는 기능이 있었는데

그 부분에서 난 것으로 판단되어 해결하기 위해 찾아보았다.


⚠️ 에러 원인 ?

환경변수

axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_BASE_URL + '/api';
axios.defaults.withCredentials = true;

app.tsx에서 asxios.defaults.baseURL에  환경변수로 기본 url 값을 설정해놨는데

git clone 과정에서 env 파일 사라지면서 생긴 문제였음


✅ 에러 해결 

NEXT_PUBLIC_SERVER_BASE_URL=http://localhost:4000

netx js server 환경변수 추가로 해결


🙇‍♂️ 참고자료

Next.js 공식문서 - 환경변수

 

Basic Features: Environment Variables | Next.js

Learn to add and access environment variables in your Next.js application.

nextjs.org