[weekly] [nb] 웹 개발 시작하기(1)

url의 구성 요소 중 쿼리가 무엇인지 실제 웹 서비스의 쿼리를 예시로 설명해 주세요.

url(uniform resource locator)

url은 웹에 게시된 리소스를 검색하기 위한 주소에 불과하다.

이론적으로 각각의 url 주소는 고유한 하나의 리소스를 가리킨다. 단순하게는 html 문서, css 문서, 이미지 등이 될 수 있다. 그러나 이 규칙에도 몇 가지 예외가 있는데, 대게 더 이상 존재하지 않거나 이동된 리소스를 가리키는 경우다.

그렇기 때문에 url 을 관리하는 것은 백엔드 개발자에게는 굉장히 중요한 부분 중 하나다.

url의 기본구조

url의 기본적인 구조를 살펴보자.

구성요소 중에서 일부는 필수적이고, 일부는 선택 사항이다.

각 요소별로 정리하면 아래와 같다.

scheme(스낌)

라틴어 Skhema(형태)에서 유래 되었다.

단순히 리소스가 있는 주소라고 했는데 왜 형태를 따지는 지 궁금할 것이다. 이 url은 클라이언트와 서버가 서로에게 보내는 일종의 공문서의 개념이다.

모든 공문서가 그런 것은 아니지만, 대체로 공문서들은 지정된 양식을 반드시 지켜야 한다.

여기에 url을 위해서 정립된 규약(protocol)을 적는다. 다양한 규약들이 있지만, 우리에게 가장 익숙한 규약들은 아래 2 가지 일 것이다.

http, https

http(hyper text transfer protocol) 은 말 그대로 hyper text 를 주고 받는 규약을 뜻한다.

hyper text는 서로 뛰어넘어 다닐 수 있는 글을 의미한다. 우리가 흔히 말하는 html(hyper text markup language)가 이 글을 작성하기 위한 언어다. 즉, 단순하게 생각하면 웹 페이지 통신을 위한 규약이라는 뜻이 된다.

https(hyper text transfer protocol secure) 는 http에 보안을 추가한 규약이다.

기존의 http 는 일반 글 형태로 서로 주고받았다. 별도의 처리가 없기 때문에 빨랐지만, 문제는 글을 주고받는 사이에 있는 다른 사람들도 이 글을 온전히 볼 수 있었다.

이건 심각한 보안 문제를 가지고 왔기 때문에, 암호화와 인증서를 사용하는 새로운 규약이 만들어졌다. 현 시대에는 https 가 아닌 웹페이지는 보안을 이유로 웹브라우저에서 접근을 막기도 한다.

외우기 드립
이 형태, 이 스낌(느낌) 알지?

authority(어쏘리티)

주최자(host)의 정보를 담고 있다.

scheme 이 보내는 공문서의 양식을 정했다면, authority는 공문서를 받을 주소지를 뜻한다. 이 주소를 표현하는 방법은 크게 ip 주소 와 domain 주소로 나뉜다.

ip 주소 는 192.168.0.1 과 같이 숫자로 이루어지는 반면, domain 주소 는 youtube.com 처럼 단어의 형태로 이루어진다.

하지만 domain 주소도 결국엔 ip 주소를 가리키는 것과 같다. 직관적으로는 ip 주소는 실제 우리 집 아파트의 주소, domain 주소는 우체국의 주소라고 생각하면 편하다.

domain 주소로 공문서가 왔을 때, 우체부가 ip 주소에 공문서를 대신 전달해준다. 이 우체부를 dns(domain name server)라고 부른다.

외우기 드립
어쏘(어서) 오세요.
전 이 펜션의 호스트(host)에요.

ip 주소 보고 오셨어요,
domain 주소 보고 오셨어요?

path(패쓰)

우체부가 우리 집 아파트로 공문서를 들고 왔지만 한가지 문제가 있다.

어느 동 어느 호인지 이제 찾아야 한다.

다행히 공문서 규약에 따라서 어느 동 어느 호에 가져다 주면 되는지 적혀있다.

/101동/\1004호/의 형태로 적혀있기 때문에 차근차근 찾아가면 된다.

parameter(파라미터)

이제 101동 1004호 앞에 도착한 우체부가 문을 두드리고 공문서를 전달하려고 한다.

그런데 문을 열고 나온 사람이 물었다.

"누구에게 온 공문서인가요?"

우체부는 다시 한번 공문서를 살펴본다. 규약에 따라서 누구에게 이 공문서가 가야하는 지 적혀있기 때문이다. 그곳에는 짤막하게 공문서를 받을 사람의 이름이 적혀있다.

?name=춘식

우체부는 춘식이라는 사람을 찾으면 된다는 것을 알았다.

설명을 들은 사람이 집안을 보고 "춘식아!"라고 외치자, 고양이 한 마리가 토도도 달려왔다. 공문서를 받을 대상은 고양이 였던 것이다!

이 사람(?)을 찾는 과정을 쿼리(query)라고 한다.

라틴어 quaerere(찾다) 에서 유래된 쿼리는 url 에서는 '?'로 시작한다. 그러나 쿼리의 내용 자체는 웹서비스 마다 규칙이 조금씩 다르기 때문에 조심해야 한다.

외우기 드립
인도에 가면 쿼리(커리)를 찾아야 하나?

anshor(앵커)

anchor 는 이번 예제에서는 사용되지 않았지만, 주로 문서에 많이 쓰인다.

위키피디아 나 api 문서 같은 경우가 많은데, anchor 의 역활 자체가 해당 문서에서 특정 위치를 지정하기 때문이다.

https://panda-market-api-crud.vercel.app/docs/#/Product/CreateProduct

이 url 로 들어가는 누구나 동일한 문서의 동일한 위치에서 열린다.

그래서 보통 특정한 문서를 참조할 때 많이 쓰인다.

단, 모든 문서가 가능한 것은 아니고, 개발자가 해당 anchor 를 사용할 것을 염두에 두고 개발해 두어야만 쓸 수 있다.

마무리

그래서 원래의 목표대로 url의 구성 요소 중 쿼리가 무엇인지 실제 웹 서비스의 쿼리를 예시로 설명 하자면,

https:// : https 규약에 따라

www.youtube.com : youtube.com 주소지에 있는

/watch/ : 호실의

?v=PeLAIPQ_rZo : v가 PeLAIPQ_rZo 인

리소스를 요청하는 공문서에서 v가 PeLAIPQ_rZo 인 조건을 쿼리라 한다.