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

Chaejung·2022년 7월 30일

CS 독서스터디

엘리스AI트랙4기_독서스터디

목록 보기

7/10

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 ?

parameter	query string
`http://www.example.com/hammers;sale=false/index.html;graphics=true`	`http://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 Parameter	Query Parameter
user/blcklamb	user?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] 의 데이터 쌍이 존재할 것이다!

구체적인 원리는 여기

문제

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

URL이 특정 이진 데이터를 포함해야 하는 경우도 있기 때문, 특정 문자나 데이터를 인코딩할 수 있게 함으로써 이동성과 완성도를 높였다.
URN이 하루 빨리 표준화되기 위해서는 어떻게 해야할까?
파라미터와 쿼리 문자열의 차이?

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