Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 URL 단축기 만들기: 단축 URL 생성 및 원본 주소 복원 함수 구현

짧은 URL 서비스(bit.ly, tinyurl 등)를 사용해 보셨다면, 긴 웹 주소가 어떻게 간결한 형태로 변환되고 다시 원래 주소로 되돌아가는지 궁금했을 것입니다. 이번 글에서는 JavaScript만으로 이러한 URL 단축 기능을 직접 구현하는 방법을 알아보겠습니다.

문제 정의

우리는 다음과 같은 두 가지 JavaScript 함수를 작성해야 합니다.

  • 첫 번째 함수(urlShortener): 긴 URL을 입력받아 그에 대응하는 짧은 URL을 반환합니다.
  • 두 번째 함수(urlRedirector): 짧은 URL을 입력받아 원래의 긴 URL로 연결(리다이렉트)할 수 있도록 원본 주소를 반환합니다.

구현 코드

핵심 아이디어는 객체(obj)를 일종의 저장소(맵)처럼 활용하는 것입니다. 단축 URL을 키(key)로, 원본 URL을 값(value)으로 저장하면 언제든 역방향 조회가 가능합니다.

const url = 'https://www.google.com/search?client=firefox-b-d&q=google+search';
const obj = {};

// 긴 URL을 받아 짧은 URL을 생성하는 함수
const urlShortener = (longURL = '') => {
  let shortURL = "short.ly/" + longURL.replace(/[^a-z]/g, '').slice(-4);
  if (!obj[shortURL]) {
    obj[shortURL] = longURL;
  }
  return shortURL;
};

// 짧은 URL을 받아 원본 URL을 반환하는 함수
const urlRedirector = (shortURL = '') => {
  return obj[shortURL];
};

const short = urlShortener(url);
const original = urlRedirector(short);

console.log(short);
console.log(original);

코드 동작 원리

1. 단축 URL 생성 로직

urlShortener 함수 내부를 살펴보면 다음 과정이 진행됩니다.

  • longURL.replace(/[^a-z]/g, '') — 정규표현식을 사용해 URL에서 영어 소문자(a~z)를 제외한 모든 문자(숫자, 특수문자, 대문자 등)를 제거합니다.
  • .slice(-4) — 남은 문자열 중 마지막 4글자만 추출합니다.
  • 추출한 문자열 앞에 접두사 short.ly/를 붙여 최종 단축 URL을 완성합니다.

2. 중복 방지 및 저장

if (!obj[shortURL]) 조건문은 이미 같은 단축 URL이 저장소에 존재하는지 확인합니다. 새로운 단축 URL이라면 obj 객체에 단축 URL → 원본 URL 형태로 매핑하여 저장합니다.

3. 원본 URL 복원

urlRedirector 함수는 저장소 역할을 하는 obj 객체에서 단축 URL을 키로 조회하여, 대응되는 원본 URL을 그대로 반환합니다. 실제 서비스라면 이 시점에 브라우저를 원본 주소로 리다이렉트하게 됩니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

short.ly/arch
https://www.google.com/search?client=firefox-b-d&q=google+search

긴 Google 검색 URL이 short.ly/arch라는 짧은 주소로 변환되었고, 이 단축 주소를 통해 원본 URL을 정확히 되찾아온 것을 확인할 수 있습니다.

마무리 및 개선 아이디어

이 예제는 학습용으로 단순화된 구현입니다. 실제 운영 환경에서 적용한다면 다음 사항들을 고려해야 합니다.

  • 충돌 처리: 마지막 4글자만 사용하기 때문에 서로 다른 URL이 같은 단축 주소를 가질 수 있습니다. 해시 기반 생성이나 더 긴 문자열 사용으로 개선할 수 있습니다.
  • 영구 저장소: 메모리상의 객체는 페이지를 새로고침하면 사라지므로, 데이터베이스나 파일 시스템에 저장해야 합니다.
  • 대소문자 구분: 현재 정규식은 소문자만 남기므로, 대문자와 숫자를 포함하려면 패턴을 /[^a-z0-9]/gi처럼 확장할 수 있습니다.

이처럼 객체를 맵으로 활용하는 간단한 아이디어만으로도 URL 단축 서비스의 핵심 원리를 손쉽게 이해하고 구현할 수 있습니다.