같은 이름의 함수를 썼을 때, RangeError: Maximum call stack size exceeded

섀도잉 ?

주로 변수나 메서드가 동일한 이름으로 중첩된 스코프에서 정의될 때 발생하며, 더 좁은 스코프의 변수가 더 넓은 스코프의 변수를 가리는 현상을 의미

이로 인해 외부 변수에 접근하기 어려워질 수 있음

자바스크립트는 동일한 이름의 변수나 함수가 여러 스코프에 존재할 경우, 가장 가까운 스코프의 정의를 우선적으로 사용해, 글로벌 변수와 동일한 이름으로 지역 스코프에서 정의하면 글로벌 변수가 가려짐

예시

let과 블록범위


let a = 10; // 전역 변수
function example() {
    let a = 20; // 지역 변수
    console.log(a); // 20 (전역 변수 'a'는 가려짐)
}
example();
console.log(a); // 10 (전역 변수)

내 문제 코드


const BASE_API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;

export const fetch = async (apiUrl: string, options?: RequestInit) => {
  const fullUrl = new URL(apiUrl, BASE_API_URL).toString();

  const response = await fetch(fullUrl, options);

  return response.json();
};

내 로컬 함수 fetch가 전역 fetch 함수(API)를 섀도잉하고 있음

따라서 함수 내부에서 fetchAPI가 아닌 자기 이름을 호출해 무한 루프에 빠지게 된 것이다.

해결방법

2가지가 있다.

내 커스텀 함수 이름을, 전역객체와 충돌하지 않도록, fetch가 아닌 다른 이름으로 하기


export const apiFetch = async (apiUrl: string, options?: RequestInit) => {

fetchAPI를 호출 시 window.fetch로 전역객체의 메소드라고 명시


export const fetch = async (apiUrl: string, options?: RequestInit) => {
	...
  const response = await window.fetch(fullUrl, options);