183 lines
5.7 KiB
Markdown
183 lines
5.7 KiB
Markdown
# URL (Uniform Resource Locator, 통합 자원 식별자)
|
||
|
||
URL은 웹에서 **특정 자원의 위치를 식별**하고 접근할 수 있도록 하는 주소 체계입니다.
|
||
우리가 브라우저 주소창에 입력하는 **웹사이트 주소**가 바로 URL입니다.
|
||
|
||
예를 들어,
|
||
```
|
||
https://www.example.com:8080/path/to/page?query=hello#section
|
||
```
|
||
이 URL을 분석하면, 각 요소가 특정한 의미를 가집니다.
|
||
|
||
|
||
## URL의 구성 요소
|
||
|
||
URL은 다음과 같은 주요 구성 요소로 이루어집니다.
|
||
|
||
```
|
||
<프로토콜>://<호스트>:<포트>/<경로>?<쿼리>#<프래그먼트>
|
||
```
|
||
|
||
| 구성 요소 | 설명 | 예시 |
|
||
|-----------|--------|-------------------------|
|
||
| **프로토콜 (Scheme)** | 통신 방식 지정 | `http`, `https`, `ftp`, `file` |
|
||
| **호스트 (Host, 도메인 또는 IP)** | 서버 주소 | `www.example.com`, `192.168.1.1` |
|
||
| **포트 (Port, 선택사항)** | 서버 접속을 위한 포트 번호 | `80`, `443`, `21` |
|
||
| **경로 (Path)** | 서버 내 특정 리소스 위치 | `/products/item1` |
|
||
| **쿼리 스트링 (Query String)** | 추가 정보 전달 (Key-Value) | `?search=apple&page=2` |
|
||
| **프래그먼트 (Fragment, 해시)** | 문서 내 특정 위치 지정 | `#section1` |
|
||
|
||
|
||
### 프로토콜 (Scheme)
|
||
URL의 맨 앞 부분으로, **자원에 접근하는 방법(통신 방식)을 정의**합니다.
|
||
|
||
| 프로토콜 | 설명 |
|
||
|----------|----------------------------------|
|
||
| `http://` | 일반 웹사이트 접속 (보안 X) |
|
||
| `https://` | 보안 웹사이트 접속 (SSL/TLS 사용) |
|
||
| `ftp://` | 파일 전송 프로토콜 |
|
||
| `file://` | 로컬 파일 시스템 접근 |
|
||
| `mailto:` | 이메일 전송 |
|
||
| `tel:` | 전화 걸기 |
|
||
|
||
> **보안이 중요한 경우 HTTPS 사용이 필수** (HTTP는 데이터가 암호화되지 않음).
|
||
|
||
|
||
### 호스트 (Host)
|
||
서버의 주소를 나타내며, **도메인 이름 또는 IP 주소**를 사용할 수 있습니다.
|
||
|
||
도메인 예시:
|
||
```
|
||
https://www.google.com
|
||
```
|
||
- `www.google.com`은 호스트(도메인)입니다.
|
||
|
||
IP 주소 예시:
|
||
```
|
||
http://192.168.1.1
|
||
```
|
||
- `192.168.1.1`은 호스트(IP 주소)입니다.
|
||
|
||
|
||
|
||
### 포트 (Port, 선택 사항)
|
||
서버에서 특정 서비스가 실행되는 네트워크 포트를 지정합니다.
|
||
포트를 생략하면 기본값이 사용됩니다.
|
||
|
||
| 프로토콜 | 기본 포트 |
|
||
|----------|----------|
|
||
| HTTP | `80` |
|
||
| HTTPS | `443` |
|
||
| FTP | `21` |
|
||
|
||
포트 지정 예시:
|
||
```
|
||
http://example.com:8080
|
||
```
|
||
➡️ `8080` 포트에서 실행 중인 웹 애플리케이션에 접근
|
||
|
||
> 일반적으로 80(HTTP)과 443(HTTPS)은 생략 가능
|
||
|
||
|
||
|
||
### 경로 (Path)
|
||
서버 내 특정 리소스의 위치를 나타냅니다.
|
||
|
||
예시
|
||
```
|
||
https://example.com/products/item1
|
||
```
|
||
* `products/item1`은 서버 내 특정 파일이나 페이지의 경로를 의미
|
||
|
||
> 웹사이트에서는 `/about` 같은 경로가 **파일 경로일 수도 있고, 동적 라우팅일 수도 있음**.
|
||
|
||
|
||
### 쿼리 스트링 (Query String)
|
||
`?key=value&key2=value2` 형식으로, **추가적인 데이터를 서버에 전달**하는 데 사용됩니다.
|
||
|
||
예시
|
||
```
|
||
https://example.com/search?query=phone&page=2
|
||
```
|
||
* `query=phone` → 검색어 "phone"
|
||
* `page=2` → 2페이지 요청
|
||
|
||
> 쿼리 스트링은 `&`로 여러 개의 값을 연결 가능
|
||
|
||
> RESTful API에서는 쿼리 스트링 대신 URL 경로를 활용하는 경우가 많음
|
||
> ```
|
||
> https://api.example.com/users/123
|
||
> ```
|
||
> * `123`은 특정 사용자의 ID
|
||
|
||
|
||
|
||
### 프래그먼트 (Fragment, 해시)
|
||
`#` 이후의 값으로, **웹페이지 내 특정 위치를 지정**합니다.
|
||
서버에는 전달되지 않으며, 브라우저에서만 사용됩니다.
|
||
|
||
예시:
|
||
```
|
||
https://example.com/docs#section3
|
||
```
|
||
* `#section3`은 문서 내 특정 섹션으로 이동
|
||
|
||
> 단일 페이지 애플리케이션(SPA)에서 해시 라우팅에 사용될 수 있음.
|
||
> 예: `https://myapp.com/#/dashboard`
|
||
|
||
|
||
## URL의 동작 과정
|
||
URL을 입력하면 다음 과정이 이루어집니다.
|
||
|
||
1️. **DNS 조회** : 도메인(`www.google.com`)을 IP 주소(`142.250.190.46`)로 변환
|
||
2️. **TCP/UDP 연결** : 클라이언트와 서버가 연결됨 (HTTPS의 경우 SSL/TLS 핸드셰이크 포함)
|
||
3️. **HTTP 요청 전송** : 브라우저가 서버에 HTTP 요청을 보냄 (`GET /index.html HTTP/1.1`)
|
||
4️. **서버 응답** : 서버가 HTML, JSON 등의 데이터를 반환
|
||
5️. **브라우저 렌더링** : HTML, CSS, JavaScript를 해석하여 화면에 표시
|
||
|
||
|
||
## URL과 URI의 차이
|
||
| 구분 | URL (Uniform Resource Locator) | URI (Uniform Resource Identifier) |
|
||
|------|-------------------------------|-------------------------------|
|
||
| 의미 | 리소스의 "위치"를 나타냄 | 리소스를 "식별"하는 모든 방식 포함 |
|
||
| 예시 | `https://example.com/page.html` | `mailto:user@example.com`, `isbn:978-3-16-148410-0` |
|
||
| 포함 관계 | URI의 한 종류 | URI의 더 넓은 개념 |
|
||
|
||
* 즉, 모든 URL은 URI이지만, 모든 URI가 URL은 아님.
|
||
|
||
|
||
## URL 인코딩 (Percent Encoding)
|
||
URL에는 **특수 문자(공백, &, ?, = 등)를 포함할 수 없음**.
|
||
따라서, 특정 문자를 **URL 인코딩(Percent Encoding)** 해야 합니다.
|
||
|
||
예시:
|
||
| 문자 | URL 인코딩 |
|
||
|------|-----------|
|
||
| 공백 (` `) | `%20` |
|
||
| `&` | `%26` |
|
||
| `?` | `%3F` |
|
||
| `=` | `%3D` |
|
||
|
||
인코딩 예제:
|
||
```
|
||
https://example.com/search?query=hello world
|
||
```
|
||
* URL 인코딩 후:
|
||
```
|
||
https://example.com/search?query=hello%20world
|
||
```
|
||
|
||
> 브라우저와 서버는 자동으로 URL 디코딩(복원)함.
|
||
|
||
|
||
## URL 단축 서비스
|
||
긴 URL을 짧게 줄여주는 서비스도 많이 사용됩니다.
|
||
예시:
|
||
```
|
||
https://bit.ly/3A4Bx5C
|
||
```
|
||
* 원래 긴 URL을 짧게 변환하여 사용
|
||
|
||
> Google의 `goo.gl`, Bitly, TinyURL 같은 서비스가 존재
|
||
|