URL과 리소스

URL(Uniform Resource Locator)은 인터넷의 리소스를 가리키는 표준 이름이다. 리소스라는 이름 답게 자원이 어디 있고 어떻게 접근하는지를 나타내는 이름인 셈이다. URL은 크게 세가지로 나누어서 식별할 수 있다.

Scheme://Authority/Path

• Scheme : 웹 클라이언트가 리소스에 어떻게 접근하는지를 알려주는 식별자로 프로토콜의 이름을 쓴다.
• Authority : 서버의 위치를 나타내는 부분으로, 리소스가 어디에 호스팅되어있는지를 알려준다.
• Path : 리소스의 경로를 나타는 부분으로 서버에 존재하는 로컬 리소스가 무엇인지 알려준다.

과거에는 이러한 URL이 부재하면서 각기 다른 자원의 탐색이나 공유 등이 어려웠지만, URL이 등장한 이후로는 애플리케이션들이 공통적으로 리소스에 접근할 수 있는 방법을 제공하면서 지금과 같이 편리하게 자원을 보고 공유할 수 있다-.

URL 문법

대부분의 URL 스킴의 문법은 통일되어있기 때문에 내가 형식에 맞춰 쓰면 된다.

<스킴>://<사용자 이름>:<비밀번호>@<호스트>:<포트>/<경로>;<파라미터>?<질의>#<프래그먼트>

컴포넌트	설명	기본값
스킴	프로토콜명. 알파벳으로 시작하고 대소문자 안가림. : 로 구별	없음
사용자 이름	리소스에 접근하기 위한 사용자 이름	anonymous
비밀번호	사용자의 비밀번호	<이메일 주소>
호스트	리소스를 호스팅하는 서버의 호스트 명이나 IP주소	없음
포트	리소스를 호스팅하는 서버가 열어높은 포트번호	HTTP는 80, HTTP는 443
경로	빗금으로 경로를 표시	없음
파라미터	이름/값을 쌍으로 가지는 URL상의 인자	없음
질의	파라미터를 넘길 때 쓰는 값	없음
프래그먼트	”#“로 구별하는 리소스 조각이나 일부분의 이름	없음

Scheme

• 우리는 http나 https정도만 써봤을 테지만 다른 모든 프로토콜도 지원한다.
• : 문자로 구분하고, 이후에는 //를 써서 뒷부분과 명확하게 구분한다.
• 대소문자를 가리지 않는다

호스트와 포트

• 접근하려는 리소스를 가지고 있는 인터넷상의 호스트 장비를 나타낸다.
• 호스트 명이나 IP주소와 같은 형태로 제공한다.
• 포트는 서버가 열어놓은 네트워크 포트로, TCP 프로토콜을 사용하는 HTTP는 기본으로 80, HTTPS는 443을 사용한다.

사용자 이름과 비밀번호

• 서버가 가지고 있는 데이터에 접근을 하기 위해 주로 사용된다.
• 주로 ftp 서버에서 사용하기 때문에 http에서는 거의 볼 일이 없다
• 그렇기 때문에 사기칠 때 많이 쓰이는 수법으로도 사용된다.
• 보통 상황에서는 브라우저가 자동으로 이름은 anonymous, 비밀번호는 각 브라우저가 설정한 디폴트 값으로 들어간다

경로

• 리소스가 서버의 어디에 있는지 알려준다
• / 문자를 기준으로 각 리소스의 경로를 구분한다

질의 파라미터와 경로 파라미터

우리는 이제까지 ?로 파라미터를 받는 파라미터만 주로 보았지만, ;로 구별하는 파라미터도 있다. ?로 파라미터를 입력하는 것은 Query parameter(질의 파라미터)이고, 해당 파라미터는 Path parameter(경로 파라미터)이다.

경로 파라미터

• 서버에 정확한 리소스 요청을 하기 위해 필요한 값들을 넣는 역할을 한다
• 이름/값 쌍의 리스트로 URL 나머지 부분부터 ;로 구별하여 기술한다.
• 요즘엔 Nextjs같은 프레임워크에서도 지원을 안하고 무조건 경로나 질의 파라미터로 구별하기 때문에 보기 힘들다

질의 파라미터

• ?를 앞에 쓰고 뒤에 찾고자 하는 값에 대해서 질의 형식으로 쓰는 것을 의미한다.
• ? 우측에 있는 것은 질의 컴포넌트라고도 한다.
• 각각의 질의가 &로 나뉜 이름=값 쌍의 형태이다.

프래그먼트

• 본래의 수준보다 더 작게 나뉜 리소스의 형태이다.
• 리소스 안에 있는 특정 절을 가리키기도 한다.
• https://poiemaweb.com/js-spa#2-routing
• 위 경로로 들어가보면 하나의 html에서 # 이후의 값에 대해서 id값을 가지고 있는 부분을 포커싱해서 보여준다.
• 프래그먼트는 서버로 보내는 것이 아닌, 브라우저가 해시 뒤의 프래그먼트를 읽고 처리하는 방식이다.

단축 URL

때때로 URL을 하나하나 다 입력하는 것이 귀찮을 때가 있다. 계속 파고들다 보면 URL이 생각보다 길어지는 경우가 종종 있기 마련이기 때문에 브라우저는 사용자가 기억하고 있는 url 일부를 입력하면 나머지 부분을 자동으로 입력해주는 URL 자동 확장을 지원한다.

URL은 상대 URL과 절대 URL로 나뉜다. 보통 우리가 보는 URL은 처음 시작점부터 어떤 리소스에 접근하기 위한 경로를 다 쓰는데, 이러한 URL이 절대 URL이다. 그렇다면 상대 경로는 우리가 터미널로 ./index.html을 통해서 해당 파일에 접근하는 방식을 어떻게 사용하는 걸까?

상대 URL

상대 URL은 말 그대로 상대적인 위치에서의 URL을 의미한다. 사용자의 입장에서는 상대 경로를 입장할 수 없지만, 개발자의 입장에서는 상대 경로를 통해 현재 있는 페이지에서 다른 페이지로 가는 경로를 상대 URL로 입력할 수 있다. 즉, 개발자는 모든 URL을 직접 처음부터 쓰지 않아도 된다는 뜻이다. 이는 브라우저가 상대 URL과 절대 URL간 상호 변환이 가능하기 때문에 가능한 방식이다.

기저 URL

기저 URL은 이러한 상대 URL에서 현재 URL이 가지고 있는 URL의 정보를 의미한다. https://www.naver.com/blog 에서 다시 https://www.naver.com/로 간다고 할 때, 상대 URL에서는 ./만 입력하면 되고, 이 상태에서 기저 URL은 https://www.naver.com/가 된다.

이렇게 상대 경로를 절대 경로로 상호변환하는 과정에서 기저 URL의 정보를 브라우저가 알아낼 수 있어야 정상적으로 절대경로로 변환할 수 있는데, 이렇게 기저 URL을 가져오는 몇 가지 방법이 있다.

• 리소스에서 명시적 제공
  • <BASE> HTML 태그를 통해 명시
• 리소스를 포함하고 있는 기저 URL
  • 기저 URL이 명시되지 않은 리소스에 상대 URL이 포함되면 해당 리소스의 URL을 기저 URL로 사용 가능
  • 그냥 현재를 기준으로 상대 URL을 적용한다는 얘기

상대 URL을 절대 URL로 바꾸기

기저 URL에 대한 정보를 가져왔다면, 해당 정보를 바탕으로 상대 경로를 절대 경로로 변환해야 한다. 브라우저는 이 과정에서 URL을 파싱하여 컴포넌트 단위로 분리하고, 기저 URL과 받았던 파라미터, 상대 경로 등 각 상황에 맞게 재조합함으로써 절대 URL로 변환할 수 있다. 이렇게 변환한 절대 URL을 가지고 네트워크 요청을 보내면서 정상적으로 리소스를 요청할 수 있다.

URL 확장

대부분의 브라우저에서는 우리가 호스트명, 즉 naver와 같은 호스트만 입력해도 휴리스틱하게 자동완성을 제공해주는 기능들을 제공한다. 이러한 기능들을 URL 확장이라고 부른다. URL 확장의 종류에는 호스트명 확장과 히스토리 확장이 있다.

호스트명 확장의 경우 naver만 쳐도 브라우저는 앞뒤로 www와 .com을 넣어준다. 휴리스틱하게 우리가 가려는 호스트를 확장시키는 방식이다.

히스토리 확장의 경우 브라우저가 과거에 내가 방문했던 URL의 기록을 저장해놓고, 입력된 URL의 앞글자들을 포함하는 완결된 형태의 URL들을 선택하게 해준다.

둘 다 흔히 말해 URL 자동완성이다.

안전하지 않은 문자

URL은 태초부터 인터넷에 있는 모든 리소스를 프로토콜을 통해 안전하게 잘 전달될 수 있도록 만들어졌다.

‘안전하게 전송’이라는 뜻은 정보가 유실될 위험 없이 URL을 전송하는 것을 의미한다.

그렇기에 이 안전하게 전송하기 위해서 URL 설계자들은 URL의 안정성을 해칠 수 있는 특정 문자를 쓰지 않도록 금지했다. 하지만 바이너리 데이터를 url로 저장하거나 url을 db처럼 쓰려는 상남자들이 생기자 이스케이프라는 기능을 추가하여 안전하지 않은 문자를 안전한 문자로 인코딩할 수 있게 했다.

이러한 규칙은 RFC 2616 문서에도 나와 있는데, URL 인코딩은 ASCII 문자 집합으로 인코딩 하는 것이 표준이기 때문에 아스키 문자 코드에 포함되지 않는 문자에 대해서는 변환을 해주어야 한다.

이러한 인코딩 과정에서 퍼센트 기호가 많이 생기므로 퍼센트 인코딩이라고도 한다.

퍼센트 인코딩

Percent-encoding 은 URL 맥락에서 특정 의미를 갖는 8비트 문자로 인코딩하는 메커니즘이다. 인코딩은 ’%’ 다음에 변경할 문자를 ASCII 값으로 표현되는 16진수가 위치하는 대체 문자열로 구성된다.

URL 문자 집합

컴퓨터는 대부분 영어 중심으로 문자 집합이 설정되어 있었기 때문에 US-ASCII 문자 집합을 사용했다. 해당 문자 집합은 7비트를 사용했는데 각 문자가 전세계 언어를 수용하지 못했기에 8비트의 ASCII 코드로 바뀌었다.

나중에는 이진 데이터를 필요로 하는 경우도 생겼지만 기존의 ASCII 코드에서는 문자 데이터 전송을 위한 문자 집합이었으므로, 이진 데이터를 수용하지 못했다. 여기서 ASCII 코드에서 다른 문자 집합으로 바꾸지 않고 Base64, uuencode같이 이스케이프 문자를 도입하여 이진 데이터를 ASCII 코드로 바꿀 수 있도록 하였다.

문자 제한

그러나 이 문자 집합을 사용하면서도 몇몇 예외케이스가 있는데, 몇몇 문자가 이미 URL 내에서 특별한 의미로 예약되어있는 문자나 다른 예외 문자들을 인코딩을 하지 않고 사용하게 된다면 오류의 가능성이 있으므로 그 전에 인코딩을 꼭 하도록 했다.

이렇게 URL을 인코딩하는 역할은 우리가 처음 네트워크 요청을 보낼 때 가장 앞단의 브라우저가 이를 미리 처리해서 인코딩할 것들을 골라 인코딩한 후 네트워크 요청을 보내는 것이 베스트이다.

Scheme과 가까워지기

앞에서 얘기했던 Scheme은 간단하게만 설명했지만 여러 프로토콜을 다루기 때문에 상당히 중요하다.

스킴	설명
http	- 일반 URL 포맷을 지키는 하이퍼텍스트 전송 프로토콜 - 포트번호 기본값 80
https	- HTTP 커넥션의 양 끝단에서 암호화하기 위해 넷스케이프에서 개발한 보안 소켓 계층(Sercure Sockets Layer, SSL)을 사용 - 포트번호 기본값 443
malito	- 이메일 주소를 나타내는 스킴
ftp	- 파일 전송 프로토콜(File Transfer Protocol)로 FTP 서버에 있는 파일을 내려받거나 올리고 가져올 때 사용
rtsp,rtspu	- 실시간 스트리밍 프로토콜(Real Time Streaming Protocol)을 통해 읽을 수 있는 오디오 및 비디오와 같은 미디어 리소스 식별자 - rtspu버전은 UDP 프로토콜이 사용돼서 u가 붙음
file	- 로컬에서 바로 접근할 수 있는 파일들을 URL 포맷에 따라 만든 URL - file://<호스트>/경로의 형식
news	- 특정 문서나 뉴스 그룹에 접근하는데 사용됨 - 리소스 위치 정보를 충분히 포함하지 않기 때문에 사용자로부터 그 정보를 애플리케이션이 알아내야 한다 - 여러 서버를 통해 뉴스 리소스에 접근 가능하기 때문에 위치에 독립적이다.
telnet	- 대화형 서비스에 접근하는데 사용된다 - telnet://<사용자 이름>:<비밀번호>@<호스트>:<포트>/의 형식

딥링크

모바일 웹 서비스에서 다른 앱을 열어야 하는 경우가 있다. 예를 들어, 온라인 쇼핑몰에서 카드 결제를 선택하면 선택한 카드의 앱을 실행해서 결제를 완료한다. 리액트 네이티브를 하면서 배우게 된 건데 모바일 환경에서 이렇게 내 웹 또는 앱 서비스에서 다른 앱의 특정 화면을 바로 띄우게 하려면 **딥링크(Deep Link)**를 사용해야 한다.

딥링크를 말한 이유는 이 또한 URL의 형식을 가지고 있다. 운영체제마다도 각각의 스킴을 가지고 있다.

이런 식으로 운영체제도 있고, 앱 마다도 각자의 스킴이 있다. 주로 bundle identifier나 설정 json 에서 명시한 schem을 사용한다.

com.example.app://somepath/details

이런 식으로 bundle identifier나 커스텀 scheme이 앞에 붙고, 그 뒤에 각각 내가 설정해놓은 url 대로 이동하게 된다.

import * as Linking from 'expo-linking';
 
export default function Home() {
  const url = Linking.useURL();
 
  if (url) {
    const { hostname, path, queryParams } = Linking.parse(url);
 
    console.log(
      `Linked to app with hostname: ${hostname}, path: ${path} and data: ${JSON.stringify(
        queryParams
      )}`
    );
  }
 
  return (
  )
}