웹 애플리케이션을 개발할 때 RESTful API를 호출하는 일이 흔합니다. 이때 API 엔드포인트의 일부분을 동적으로 생성해야 할 때가 있습니다. 이럴 때, 타입스크립트에서 동적 URL을 생성하는 방법을 알아보겠습니다.

1. 템플릿 리터럴 활용

가장 간단한 방법은 템플릿 리터럴을 사용하여 동적으로 URL을 생성하는 것입니다. 이 방법은 문자열 보간(string interpolation)을 통해 동적 URL을 구성할 수 있습니다.

예를 들어, 사용자의 ID를 이용하여 해당 사용자의 정보를 가져오는 REST API를 호출해야 한다고 가정해봅시다. 이때, 템플릿 리터럴을 사용하여 URL을 동적으로 생성할 수 있습니다.

const userId: number = 123;
const apiUrl: string = `https://api.example.com/users/${userId}`;

위 예제에서 userId 변수를 이용하여 동적으로 URL을 생성하고 있습니다.

2. URL 조립 유틸리티 함수 생성

프로젝트가 커지면서 API 호출 부분이 여러 군데에서 중복해서 사용된다면, URL을 조립하는 유틸리티 함수를 만들어서 이를 활용하는 것이 유용할 수 있습니다.

function buildApiUrl(endpoint: string, params: Record<string, string | number>): string {
  const queryString = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
  return `https://api.example.com/${endpoint}?${queryString}`;
}

// 사용 예시
const userApiUrl = buildApiUrl('users', { id: 123 });

이렇게 유틸리티 함수를 만들어서 endpoint와 파라미터를 전달하여 동적 URL을 생성할 수 있습니다.

마무리

동적 URL을 생성하는 것은 RESTful API 호출 과정에서 매우 중요한 부분입니다. 템플릿 리터럴이나 유틸리티 함수를 통해 타입스크립트에서 쉽게 동적 URL을 생성할 수 있습니다.

이러한 방법을 사용하여 API 호출에 필요한 동적 URL을 생성하고, 원하는 데이터를 손쉽게 얻어보세요.

참고 문헌:

• MDN Web Docs - 템플릿 리터럴

• TypeScript 공식 문서