트러블 슈팅 🤯
🔍 apiKey
api key를 발급받아서 적용하려하는데 자꾸만 에러가 발생했다.
500에러도 나오고 405, 403 정말 온갖 에러를 만났는데 공통적으로 api를 받아오는 그 부분이 문제였다.
.env 파일에서 키 값을 관리하는게 늘 헷갈렸는데 이 부분에서 트러블 슈팅이 나서 싹 정리해보기로 했다.
💡 Failed to load resource: the server responded with a
status of 405 (Method Not Allowed)위 에러 문구를 해석하면 Api method( Get ,Post … )와 Api 서버가 설정한 Api method가 다르다는 것이다.
따라서 내가 쓴 GET 함수 부분이 문제라는 것!
01. 처음 작성한 코드 👩🏻💻
import { NextResponse } from "next/server";
export async function GET() {
const apiKey = process.env.RIOT_API_KEY;
if (!apiKey) {
return NextResponse.json(
{ error: "API 키가 설정되지 않았습니다." },
{ status: 500 }
);
}
try {
const response = await fetch(
"https://kr.api.riotgames.com/lol/platform/v3/champion-rotations",
{
headers: {
"X-Riot-Token": apiKey,
},
}
);
if (!response.ok) {
return NextResponse.json(
{ error: "데이터를 불러오는데 실패했습니다." },
{ status: response.status }
);
}
const data = await response.json();
return NextResponse.json(data);
} catch (error) {
return NextResponse.json(
{ error: "데이터를 불러오는데 실패했습니다." },
{ status: 500 }
);
}
}
코드는 복잡한 것 없이 강의에서 실습했던 걸 생각하면서 간단히 작성했다.
try catch 문을 사용하고 NextResponse 메소드를 사용해서 주어진 JSON 본문으로 응답을 생성하게 만들었다.
💡 NextResponse ?
NextResponse는 추가 편의 메서드와 함께 Web Response API를 확장한다.
작성방법은 NextResponse 뒤에 .redirect() .json() 처럼 적어주면 된다.
참고자료
https://nextjs.org/docs/app/api-reference/functions/next-response
02. apikey 변수 저장하고 코드에 적용하기 (.env.local) 👩🏻💻
NEXT_PUBLIC_RIOT_API_KEY = RGAPI-2******-2877-****-9ca9-e*******9.env.local 파일에는 이렇게 발급받은 내 api key를 넣었다.
const apiKey = **process.env.RIOT_API_KEY;**
if (!apiKey) {
return NextResponse.json(
{ error: "API 키가 설정되지 않았습니다." },
{ status: 500 }
);
}그리고 위 코드로 적용한 것인데 잘못 적은 부분이 많아서 당연히 api 데이터를 받을 수 없는 상황이다…ㅋㅋㅋ
하나씩 수정해보도록 하자!
🚧 코드 수정하기
01. .env.local 수정 🚧
NEXT_PUBLIC_RIOT_API_KEY=RGAPI-2******-2877-****-9ca9-e*******9.env파일에 api key를 쓸 때마다 헷갈렸던게 2가지였다.
api에“”를 붙이는 것인가=양쪽으로 스페이스바를 띄는 것인가
튜터님께 질문드려보았는데 정답은 위에처럼 쓰는게 맞다. “” 없이! 띄어쓰기도 없이!
02. GET 함수 수정하기 🚧
const apiKey = **process.env.NEXT_PUBLIC_RIOT_API_KEY;**
if (!apiKey) {
return NextResponse.json(
{ error: "API 키가 설정되지 않았습니다." },
{ status: 500 }
);
}NEXT_PUBLIC_RIOT_API_KEY 로 작성해주면 정상적으로 데이터를 불러올 수 있다!
03. 추가 tip! 🍀
이건 튜터님께 질문드리러 갔다가 알게된 내용인데 너무 유용한 꿀팁이었다.
api key 값 처럼 외부에 노출되면 안되는 코드들은 이렇게 저장해두고 git ignore에 적어서 업로드 해도 보이지 않도록 한다. .env.local도 마찬가지이다!
그런데 누군가 내 github를 clone해서 보게된다면, 이 프로젝트는 개인 api 가 있어야 하는데 다운 받는 사람은 이를 알 수 없다. 왜? git ignore파일로 되어있으니까!
그럴 때는 아래처럼 해주면 된다.
root폴더에.env.sample파일 생성하기- 아래처럼 코드 작성하기
git ignore에는.env.local파일명만 넣어주기
NEXT_PUBLIC_RIOT_API_KEY=이렇게 하면 clone 받은 사람도 파일을 보고 api key가 필요하구나! 하고 알게되어서 원활한 공유가 가능해진다.
리드미 같은 곳에 이에 대한 설명을 적어주는 것도 좋은 방법! 👍
🧐 export default 와 export
처음 작성한 코드
import { NextResponse } from "next/server";
export default async function GET() {
const apiKey = process.env.NEXT_PUBLIC_RIOT_API_KEY;
}항상 코드를 작성할 때 export default functuon~~ 하면서 시작했는데 아무생각 없이 쓰다가 다음 메소드를 작성할 때도 default를 써도 되나 싶었다. 그래서 또 여기저기 검색해봤다.
지금은 GET만 필요해서 다행히 문제는 없었지만,
API Route에서는 여러 HTTP 메서드(GET, POST, DELETE 등)를 다룰 수 있기 때문에 export를 통해 명시적으로 내보내는 방식이 더 유용하다. 만약 export default를 사용하면 오직 하나의 함수만 내보낼 수 있으므로, 다른 HTTP 메서드를 추가할 수 없다.
수정한 코드 🚧
import { NextResponse } from "next/server";
export async function GET() {
const apiKey = process.env.NEXT_PUBLIC_RIOT_API_KEY;
if (!apiKey) {
return NextResponse.json(
{ error: "API 키가 설정되지 않았습니다." },
{ status: 500 }
);
}
//중략
}
🫨 정리 🫨
export는 여러 메서드를 정의할 때 사용, 각각의 메서드에 대해 명시적으로 정의할 수 있다. 이 방식이 API Route에서는 더 유용!!export default는 파일에서 하나의 기본 함수만 내보낼 수 있으므로, 다중 메서드 지원이 필요한 API Route에서는 적합하지 않다.
Next.js의 App Router를 사용하는 경우, 각 HTTP 메서드를 개별적으로 정의할 수 있으므로, export default 대신 export를 사용하여 메서드를 정의하는 것이 더 일반적이다.
조금 사소한 것들이고 기본적인 내용이라 정리하는게 맞나 싶었지만 내가 공부하고 알아가는 걸 정리하는거니까!ㅎㅎ 앞으로 api key 값을 줄 때 헷갈리지도 않을거고 추후 팀프로젝트를 하면서 HTTP 메서드를 쓸 때 더 유의해서 사용해서 트러블이슈를 막을 수 있을 것 같다!
