[Javascript] URL을 문자열로 막 생성하면 안 되는 이유

URL을 문자열로 막 생성하면 안 되는 이유

엄밀히 말하면, URL을 문자열로 생성, 사용한다고 해서 크게 잘못된 방식은 아닙니다.

 

다만 프로젝트의 규모가 커지고 여러 개발자들과 협업을 해야 한다거나, URL에 붙는 조건과 경우의 수가 복잡해짐에 따라

단순히 문자열로 URL을 조합하는 방식은 URL의 구조와 파라미터 규칙이 코드 전반에 암묵적으로 분산되면서,
점차 변경 시 영향 범위를 예측하기 어려운 상태로 이어지기 쉽습니다.

 

이 글에서는 URL을 생성, 할당하는 여러 가지 방법을 가볍게 다루며 왜 URL을 체계적으로 다루는 것이 중요한지 알아보겠습니다.

변수에 URL 할당하기

자바스크립트에서 URL을 변수에 할당하는 방법은 크게 두 가지가 있습니다.

• 문자열로 생성
• URL 객체 활용

두 가지 경우 모두 뚜렷한 장단점이 있으며 어떤 특징이 있는지 간단하게 알아보겠습니다.

문자열로 생성하기

URL을 문자열로 직접 조합하고, 쿼리스트링을 수동으로 이어 붙이는 방식입니다. 선언과 할당 자체는 단순하고 쉬운 방법입니다.

하지만 코드 가독성이 좋지 않기 때문에 파라미터를 동적으로 수정하거나 문자열을 조합하는 과정에서

인코딩 누락, 조건 분기 누락 등 인간의 실수가 발생할 여지가 커 유지보수의 안정성도 낮아질 수 있습니다.

const url =
  "/search?keyword=" + encodeURIComponent(keyword) +
  "&page=" + page +
  "&sort=" + sort;
  
  ...

URL 객체 활용하기

JavaScript에서 제공하는 URL과 URLSearchParams를 이용해 URL을 구조적으로 구성합니다.

이는 브라우저와 Node.js에서 공통으로 채택한 URL 표준을 기반으로, URL의 각 구성 요소를 분리해 다룰 수 있도록 설계된 객체입니다.

// URL 객체는 상대 경로 단독 생성을 허용하지 않으므로, 기준이 되는 origin이 필요합니다.
const origin = window.location.origin || 'https://example.com';
const path = '/search';

const url = new URL(path, origin);
url.searchParams.set("keyword", keyword);
url.searchParams.set("page", page);

const finalUrl = url.toString();

쿼리 파라미터를 키, 값 쌍으로 관리하기 때문에 유지보수성과 가독성이 좋고 인코딩을 자동으로 처리합니다.

문자열 방식에 비해 코드가 약간 길어지는 단점이 있지만 이는 구조와 의도를 명확히 드러내기 위한 최소한의 비용에 가깝습니다.

혼합 방식

또는 Base URL을 문자열로 선언하되, URLSearchParams으로 매개변수를 처리하는 혼합 방식도 권장합니다.

URL 전체가 아닌, 쿼리 파라미터만 객체로 관리하기 때문에 상대경로 기반의 URL 구성에서는 오히려 간단명료한 선택이 될 수 있습니다.

const params = new URLSearchParams();
params.set("keyword", keyword);
params.set("page", page);

const url = `/search?${params.toString()}`;

패턴화

데이터와 URL 생성을 아예 분리하기 위해 아래와 같이 패턴화 할 수도 있습니다.

프로젝트 전체에서 동일한 유틸 함수로 관리하려면 고려해 볼 만합니다.

 

하지만 아래 코드는 예시일 뿐, 실무에서의 코드 품질이나 안정성에 있어서는 철저한 관리와 검토가 필요하겠죠.

특히 파라미터 타입이나 배열, 객체의 중첩구조 등에 대해 명세와 규칙이 명확하지 않으면 오히려 일관성을 해칠 수도 있습니다.

function buildQuery(params) {
  return Object.entries(params)
    .filter(([, v]) => v !== undefined && v !== null)
    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
    .join("&");
}

const query = buildQuery({ keyword, page, sort });
const url = `/search?${query}`;

마치며

그래서 URL을 막 생성하면 안 되는 이유는 결국, URL을 문자열로 생성하는 행위 자체가 아니라,

URL을 구조와 규칙 없이 다루는 것이 기술 부채로 이어질 수 있다는 것이었습니다.

 

언제나 상황에 맞는 방식을 유연하게 선택하되, 장기적으로 더 적은 비용이 들어가는 방식을 항상 고려해야 하는 것 같습니다.

 

감사합니다.