[HTTP 완벽 가이드] 02 URL과 리소스_velog url 인코딩해보기

blcklamb·2022년 7월 30일
8
post-thumbnail

HTTP 완벽 가이드

중요하다고 생각한 점

URL의 기능

URL은 브라우저가 더 영리하게 리소스에 접근하고 그것을 다루게 함으로써 온라인 세상을 단순화시킨다.(브라우저는 특정 리소스를 다루기 위해 별도의 애플리케이션을 사용하기도 한다. 예를 들어 인터넷 익스플로러는 이메일 리소스를 식별하는 URL을 처리하려고 이메일 애플리케이션을 사용한다.) (30쪽)

HTML에서 상대 URL

어떤 리소스들은 기저 URL을 명확하게 기술하기도 한다. 예를 들어 HTML 문서에서는 그 안에 있는 모든 상대 URL을 변경하기 위해서 기저 URL을 가리키는 BASE HTML 태그를 기술할 수 있다. (38쪽)

URL 확장

<호스트명 확장>
...(중략)... 예를 들어 주소 입력란에 'yahoo'를 입력하면, 브라우저는 호스트 명에 자동으로 'www.'와 '.com'을 붙여서 'www.yahoo.com'을 만든다. ...(중략)... 하지만 호스트 명에 대한 확장 기능은 프락시와 같은 다른 HTTP 애플리케이션에 문제를 발생시킬 수도 있다. 6장에서 이 문제에 대해 상세히 다룬다. (40쪽)

<히스토리 확장>
사용자가 URL을 입력하는 시간을 줄이고자, 브라우저가 사용하는 또 다른 기술은 과거에 사용자가 방문했던 URL의 기록을 저장해 놓는 것이다. ...(중략)... 프락시를 사용할 경우 URL 자동확장 기능은 다르게 동작할 수 있다는 것을 유념하자. 이에 대해서는 6장의 "URI 클라이언트 자동확장과 호스트 명 분석(Hostname Resolution)"에서 상세히 다룰 것이다. (40쪽)

URL 인코딩

애플리케이션은 정해진 방식대로 구현해야 한다. 어떤 애플리케이션에 어떤 URL을 보내든지, 그 전에 클라이언트 애플리케이션에서 안전하지 않거나 제한된 문자를 변환하는 것이 좋다. 안전하지 않은 모든 문자를 인코딩하기만 하면, 다른 애플리케이션으로부터 특별한 의미를 가지는 문자를 받았을 때 혼동할 걱정 없이, 애플리케이션 간에 공유할 수 있는 URL의 원형을 유지할 수 있다. (43쪽)

velog url도 보이는 것과 공유하는 것에서 차이가 있다는 것을 인지하고 있었지만, 이게 URL 인코딩과 관련된 것이란 것을 이번에 처음 알았다. 그래서 심심해서 한 번 작성해본, velog url encoding!

인코딩 전: https://velog.io/@blcklamb/HTTP-완벽-가이드-01-HTTP-개관예비FE가-보는-HTTP

인코딩 후: https://velog.io/@blcklamb/HTTP-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C-01-HTTP-%EA%B0%9C%EA%B4%80%EC%98%88%EB%B9%84FE%EA%B0%80-%EB%B3%B4%EB%8A%94-HTTP

코드

import urllib.parse

beforeEncoding = input()

def velogEncoding(url):
	# 포스트를 결정해주는 맨 끝 파라미터만 잘라오기
    for i in range(len(url)-1, 0, -1):
        if url[i] =='/':
            tailUrl = url[i+1:]
            url = url[:i+1]
            break
    encodedTail = urllib.parse.quote(tailUrl)
    url += encodedTail
    return url

print(velogEncoding(beforeEncoding))
# 자르지 않고 전부 돌리게 되면 앞의 '://', '@'까지 인코딩 되어 버립니다.
print(urllib.parse.quote(beforeEncoding))
>>> https%3A//velog.io/%40blcklamb/HTTP-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C-01-HTTP-%EA%B0%9C%EA%B4%80%EC%98%88%EB%B9%84FE%EA%B0%80-%EB%B3%B4%EB%8A%94-HTTP

의문이 든 점

Parameter vs Query String ?

parameterquery string
http://www.example.com/hammers;sale=false/index.html;graphics=truehttp://www.example.com/inventory-check.cgi?item=12731&color=blue
{이름=값} 쌍들을 ';'로 구분{이름=값} 쌍들을 '?'와 '&'로 구분
애플리케이션이 서버에 리소스를 요청할 때요청하는 리소스 형식의 범위를 좁히고 싶을 때

(참고) BE에서의 URI_URL Parameter vs Query Parameter

/// Express.js

/// URL Parameter
/// localhost/user/blcklamb
app.get(/:user”, (req, res) => {
  res.send(req.params.user)
})

/// Quert Parameter
/// localhost/user?name=blcklamb
app.get("/user", (req, res) => {
  res.send(req.query.name)
})
URL ParameterQuery Parameter
user/blcklambuser?name=blcklamb
검색할 것을 하나씩만 받을 수 있다검색할 것이 객체로 들어온다
"/:user" 와 안에서 받는 params.user을 명명하는 것이 동일해야 함url의 이름=값 쌍 중 이름을 지칭해야 함
정적 리소스가 뒤따름동적 리소스가 뒤따름
검색 엔진 친화적결과, 정렬 및 키워드 친화적

잠시 찾아본 바, BE에서 말하는 URI parameter와 query parameter와

책에서의 parameter와 query string은 약간 차이가 있다.

이 점 헷갈리지 않도록 이해하는 것이 필요하다.

url 축소의 원리?

url은 리소스를 불러낼 수 있는 주소인데, 이 주소를 축소시키는 게 어떻게 가능한 건지라는 의문이 생겼다.

대표적으로 bit.ly에서는 기존 url을 입력하기만 하면, 바로 축소된 url을 반환하는데, 이게 어떻게 가능한지가 궁금해졌다.

단축시킨 URL: https://bit.ly/3Bv22Sa

구글링해서 이해한 바로는, 단축시킨 URL이 곧 원본 URL로 할당되는 것이 아니라, 단축시킨 그것은 원본 URL을 redirection하는 코드를 돌리게 된다. 그리고 해당 URL로 접근하기 위해 DB에 저장해 놓는 방식을 쓰는 것이다.

DB에는 [단축 URL의 파라미터-원본 URL] 의 데이터 쌍이 존재할 것이다!

구체적인 원리는 여기

문제

  1. URL에 이스케이프 문자열을 쓸 수 있게 설계한 이유

    URL이 특정 이진 데이터를 포함해야 하는 경우도 있기 때문, 특정 문자나 데이터를 인코딩할 수 있게 함으로써 이동성과 완성도를 높였다.

  2. URN이 하루 빨리 표준화되기 위해서는 어떻게 해야할까?

  3. 파라미터와 쿼리 문자열의 차이?

    🎨 파라미터: 애플리케이션이 서버에 리소스를 요청할 때, {이름=값} 쌍들을 ';'로 구분
    🎭 쿼리 문자열: 요청하는 리소스 형식의 범위를 좁히고 싶을 때, {이름=값} 쌍들을 '?'와 '&'로 구분

느낀 점

URN은 리소스가 옮겨져도 고유하게 갖고 있는 이름이기에 URL을 개선한 방식으로 활용되었으나 아직 상용화되지 않았다고 한다. URL에서 URN으로 주소 체계를 바꾸는 것은 매우 큰 작업이고, 표준화는 매우 중요한 작업인 만큼 느리게 진행될 때도 있다고 한다.

인터넷, 네트워크, 웹 이 분야에서는 특히나 표준화 작업이 정말 어려울 것 같다. FE 프레임워크만 해도 몇 년 주기로 지속적으로 변화하고 있기에 프레임워크 하나만 파는 것이 능사가 아니다.

표준화 작업의 중요성은 파악하고 있지만 과연 몇 십 억이 넘는 인터넷 사용자들 모두의 니즈를 충족시킬 만한 방식이 URN에 적용될 지는 과연 모르겠다.

한 줄 요약

완벽하지 않아도, '아직은' 스테디샐러인 URL!

출처

Query vs. URL Parameters in Express.js

How to encode URLs in Python

profile
초보 개발자 경험치 쌓는 중

1개의 댓글

comment-user-thumbnail
2022년 7월 31일

직접 인코딩을 해보시다니,,! 멋져요 👏👏

답글 달기