URL-Shortener ✂️

🎯 Requirements Spec

• 웹 페이지 입력폼에 URL 입력 시 단축된 결과 출력

• 브라우저의 주소창에 단축 URL 입력 시 기존 URL로 리다이렉트

• 같은 URL 입력 시 동일한 결과값 도출

• 결과값은 주소를 제외하고 8글자 이내로 생성

🎮 Skill

Backend

Java SpringBoot Gradle H2Database SpringDataJPA

Frontend

Mustache JavaScript jQuery CSS

🧩 API Spec

Request URL : http://localhost:8080/

POST /api/urls

✔️ 입력한 URL을 단축한다.

• Request

  • Start Line

    POST /api/urls HTTP/1.1

  • Body

    {
        "url" : "string/단축할 URL"
    }

• Response

  • Status Line

    200 OK
    400 Bad Request         // 잘못된 형식의 URL인 경우

  • Body

    {
        "originalUrl"   : "string/기존 URL",
        "shortenedUrl"  : "string/단축된 URL", 
        "redirectCount" : "int/리다이렉트 횟수" 
    }

GET /{path}

✔️ 기존 URL로 리다이렉트한다.

• Request

  • Start Line

    GET /{path} HTTP/1.1

• Response

  • Status Line

    200 OK
    404 Not Found         // 존재하지 않는 URL일 경우

🎨 Result

1차 Version

# 첫 실행

• Nothing

  

# URL 단축 요청

• URL 입력 >> Shorten 버튼 클릭

  

• 단축된 URL 확인

  

• Copy 버튼 클릭 >> 단축된 URL 클립보드에 복사

  

# 잘못된 URL로 단축 요청

• 잘못된 URL 입력 >> "유효하지 않는 URL 입니다." 알림

  

• 알러트 창 확인 버튼 >> 텍스트 입력 상자 초기화

  

2차 Version

변경된 사항 : UI 변경, clear 기능 추가

# 첫 실행

• Nothing

  

# URL 단축 요청

• URL 입력 >> Shorten 버튼 클릭 >> 단축된 URL 확인

  

• Copy 버튼 클릭 >> 단축된 URL 클립보드에 복사

  

# 잘못된 URL로 단축 요청

• 잘못된 URL 입력 >> "유효하지 않는 URL 입니다." 알림

  

• 알러트 창 확인 버튼 >> 텍스트 입력 상자 초기화

  

# 단축된 URL로 리다이렉트 요청

• 브라우저 주소창에 단축된 URL 입력

  

• 기존 URL로 리다이렉트

  

# 입력 초기화

• URL 입력 후 단축된 상태

  

• Clear 버튼 클릭 >> 텍스트 입력 상자 모두 초기화