[HandTris] #5. .env 적용이 안 될 때.. - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

게임 로직적인 부분의 경우 .env 파일을 사용해야 할 일이 적었다. 그리고 백엔드에서 URL이 바뀐다거나 요청 Interface가 달라진다거나 할 이유가 적었기 때문에 .env 파일을 사용하지 않았다. 그러다가 게임 로비, 마이페이지 등을 개발하면서 백엔드 Interface가 바뀌거나  요청 주소가 달라지는 등 이를 수정하는 경우가 잦아져 .env 파일로 관리하는 게 낫겠다 생각이 들어 적용하였다.

🐛 분명히 .env에서 잘 가져왔는데, undefined?

...
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
export const fetchRooms = async () => {
    const data = await fetchWithAuth(`${BASE_URL}/games`);
    return data;
};
...

위 코드처럼 .env 파일을 잘 가져왔다. 그런데, BASE_URL이 undefined로 나왔다. 

undefined/games ?..

 

1️⃣ 시도 - BASE_URL 자리에 .env에서 할당한 URL을 하드 코딩하여 fetchWithAuth() 메써드에서 undefined로 바꾸어 버리는 것인지 확인하기

...
// const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
export const fetchRooms = async () => {
    const data = await fetchWithAuth("https://api.~~~.shop/games");
    return data;
};
...

이렇게 바꾸어보니 알맞은 주소로 잘 연결되었다..

2️⃣ 시도 - process.env.NEXT_PUBLIC_BASE_URL 이 작동하지 않으면, .env에서 URL을 가져올 수 없으니 .env 가져오는 라이브러리 설치하기

dotenv install

dotenv 라이브러리는 여러 환경에 따라 환경 변수가 달라질 때 사용한다고 한다. 나는 한 환경에 대한 환경 변수를 가져와달라고 하는 것이니 잘 되겠지 하는 안일한 생각으로 dotenv를 설치하였다.

next.config.mjs 파일도 수정하고, 다시 컴파일하였으나 실패!

3️⃣ '왜 안 되지?' 고민하다가 우연히 발견..

.env.local 파일이 src 폴더 내에 있었다

'env 문제만 해결하고 기숙사로 가야겠다' 생각하고 자리에 앉자마자 파일 트리가 보였다. '.env.local'만 로고가 오른쪽으로 쏠려 보였는데, src 폴더 내에 위치하고 있었던 것이다. 파일 트리 밖으로 .env 파일을 빼주니 당연하게도 정상적으로 읽어져 왔다(dotenv도 필요 없었다).

---

어처구니없는 원인이었고, 그 누구도 하지 않을 실수 같지만 블로그에 작성하는 이유는 기억하기 위해서!

1. .env 파일을 프로젝트 초기에 생성하며 안 써도 될 것 같다고 방치했을 때, 그때 올바른 위치에 넣어뒀어야 했다.😅 이제 어떤 파일이든, 코드든 가볍게 생각하고 넘어가지 말자. 나중에 더 많은 시간을 쏟게 될 수도 있다..
2. 그리고 프로그래밍 관련 경험을 더 많이 하고, 실력을 더 많이 갈고닦아야 한다. 적극적으로 해내자!

---

 

나만무 최종 발표 후에 나만무 레포를 다시 볼 일이 없을 수도 있다. 나만무 하는 시간일 때인 지금, 더 많이 들여다보자. 갈 길이 멀다.

내일도 빠이팅.

최종 발표 D-8