2025-02-09T19:02:05
This commit is contained in:
@@ -42,7 +42,7 @@ HTTP는 지속적으로 발전하고 있으며, 현재 주로 사용되는 버
|
||||
* 헤더: 추가적인 정보를 제공합니다. (User-Agent, Accept 등)
|
||||
* 본문: 서버로 전송할 데이터 (POST 메서드에서 주로 사용)
|
||||
|
||||
```
|
||||
```http
|
||||
GET /products HTTP/1.1
|
||||
Host: www.example.com
|
||||
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
|
||||
@@ -56,7 +56,7 @@ Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
|
||||
* 헤더: 추가적인 정보를 제공합니다. (Content-Type, Content-Length 등)
|
||||
* 본문: 요청한 데이터
|
||||
|
||||
```
|
||||
```http
|
||||
HTTP/1.1 200 OK
|
||||
Content-Type: text/html; charset=utf-8
|
||||
Content-Length: 1234
|
||||
|
||||
182
doc/http/02_url.md
Normal file
182
doc/http/02_url.md
Normal file
@@ -0,0 +1,182 @@
|
||||
# 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 같은 서비스가 존재
|
||||
|
||||
163
doc/webcomponent/01_webcomponent.md
Normal file
163
doc/webcomponent/01_webcomponent.md
Normal file
@@ -0,0 +1,163 @@
|
||||
# 웹 컴포넌트(Web Components)
|
||||
|
||||
## 웹 컴포넌트(Web Components)란?
|
||||
웹 컴포넌트(Web Components)는 **재사용 가능한 UI 요소를 캡슐화하여 웹 애플리케이션에서 독립적으로 사용할 수 있는 기술**입니다.
|
||||
HTML, CSS, JavaScript를 **하나의 독립된 컴포넌트**로 묶어, 다른 프레임워크(React, Vue, Angular) 없이도 사용할 수 있습니다.
|
||||
|
||||
* 웹 컴포넌트의 핵심 목표
|
||||
- **재사용성** : 여러 프로젝트에서 동일한 컴포넌트를 재사용
|
||||
- **캡슐화** : 내부 스타일과 동작을 외부로부터 보호
|
||||
- **프레임워크 독립적** : React, Vue, Angular 없이도 동작
|
||||
- **모듈화** : HTML 요소를 조합하여 더 복잡한 UI 요소를 생성
|
||||
|
||||
|
||||
## 웹 컴포넌트를 구성하는 3가지 핵심 기술
|
||||
웹 컴포넌트는 다음 세 가지 핵심 기술을 기반으로 동작합니다.
|
||||
|
||||
### 1. Custom Elements (사용자 정의 요소)
|
||||
HTML에서 `<my-button>` 같은 새로운 태그를 직접 정의하여 사용할 수 있게 해주는 기술입니다.
|
||||
|
||||
#### 새로운 HTML 요소 정의 예시
|
||||
```javascript
|
||||
class MyButton extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `<button>Click Me</button>`;
|
||||
}
|
||||
}
|
||||
customElements.define("my-button", MyButton);
|
||||
```
|
||||
사용 방법
|
||||
```html
|
||||
<my-button></my-button>
|
||||
```
|
||||
➡️ `my-button` 태그가 자동으로 버튼으로 렌더링됨.
|
||||
|
||||
|
||||
|
||||
### 2. Shadow DOM (캡슐화)
|
||||
웹 컴포넌트 내부의 스타일과 구조를 **외부 영향 없이 독립적으로 유지하는 기능**입니다.
|
||||
CSS 충돌을 방지하고, 외부에서 변경할 수 없도록 **컴포넌트 내부를 보호**합니다.
|
||||
|
||||
#### Shadow DOM 사용 예시
|
||||
```javascript
|
||||
class ShadowButton extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" }); // Shadow DOM 활성화
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<button>Shadow Button</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
customElements.define("shadow-button", ShadowButton);
|
||||
```
|
||||
사용 방법
|
||||
```html
|
||||
<shadow-button></shadow-button>
|
||||
```
|
||||
> Shadow DOM이 적용되면 외부 CSS가 이 버튼에 영향을 주지 않음.
|
||||
|
||||
|
||||
### 3. HTML Templates (템플릿 & 슬롯)
|
||||
컴포넌트에서 **반복해서 사용할 HTML 구조를 정의하고, 동적으로 채울 수 있도록 해주는 기능**입니다.
|
||||
|
||||
템플릿을 이용한 컴포넌트 예시
|
||||
```html
|
||||
<template id="card-template">
|
||||
<style>
|
||||
.card {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
<div class="card">
|
||||
<slot name="title"></slot>
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
class MyCard extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const template = document.getElementById("card-template").content;
|
||||
this.attachShadow({ mode: "open" }).appendChild(template.cloneNode(true));
|
||||
}
|
||||
}
|
||||
customElements.define("my-card", MyCard);
|
||||
</script>
|
||||
|
||||
<my-card>
|
||||
<span slot="title"><h2>웹 컴포넌트</h2></span>
|
||||
<span slot="content"><p>웹 컴포넌트 예제입니다.</p></span>
|
||||
</my-card>
|
||||
```
|
||||
> `slot`을 사용하여 컴포넌트 내부에 동적으로 콘텐츠를 삽입 가능.
|
||||
|
||||
|
||||
## 3. 웹 컴포넌트의 장점 & 단점
|
||||
* 장점
|
||||
- **프레임워크 독립적** : 모든 브라우저에서 동작
|
||||
- **재사용성** : 한 번 만든 컴포넌트를 여러 프로젝트에서 활용 가능
|
||||
- **스타일 격리** : Shadow DOM을 이용해 CSS 충돌 방지
|
||||
- **성능 향상** : 네이티브 브라우저 지원으로 최적화됨
|
||||
|
||||
* 단점
|
||||
- **구형 브라우저 지원 부족** : IE11 등에서는 폴리필 필요
|
||||
- **데이터 바인딩 부족** : React/Vue처럼 상태 관리 기능이 없음 (별도로 구현 필요)
|
||||
- **초기 학습 비용** : 기존 프레임워크 사용자에게는 생소할 수 있음
|
||||
|
||||
|
||||
## 4. 웹 컴포넌트 vs 프레임워크 비교
|
||||
| 비교 항목 | 웹 컴포넌트 | React/Vue/Angular |
|
||||
|-----------|------------|-------------------|
|
||||
| **기술 종속성** | 없음 | 특정 프레임워크 필요 |
|
||||
| **재사용성** | 네이티브 지원 | 같은 프레임워크 내에서만 가능 |
|
||||
| **렌더링 성능** | 브라우저 최적화 | 가상 DOM 사용 (추가 오버헤드) |
|
||||
| **스타일 격리** | Shadow DOM 사용 | 기본적으로 없음 (Scoped CSS 사용 가능) |
|
||||
| **데이터 바인딩** | 직접 구현해야 함 | 내장 기능 제공 |
|
||||
|
||||
➡️ 웹 컴포넌트는 특정 프레임워크에 종속되지 않는 강력한 기능을 제공하지만, 상태 관리 및 데이터 바인딩이 부족하므로 필요에 따라 프레임워크와 함께 사용할 수도 있음.
|
||||
|
||||
---
|
||||
|
||||
## 5. 웹 컴포넌트 활용 사례
|
||||
* 디자인 시스템 (Design System) 구축
|
||||
* 대규모 프로젝트의 UI 모듈화
|
||||
* 프레임워크 간 호환이 필요한 경우
|
||||
|
||||
|
||||
## 6. 웹 컴포넌트 배포 및 사용
|
||||
웹 컴포넌트는 **NPM 패키지**로 배포하거나, **CDN을 통해 웹사이트에서 직접 사용**할 수 있습니다.
|
||||
|
||||
### CDN을 활용한 웹 컴포넌트 로드
|
||||
```html
|
||||
<script type="module" src="https://your-cdn.com/my-component.js"></script>
|
||||
<my-component></my-component>
|
||||
```
|
||||
|
||||
### NPM으로 배포 후 사용
|
||||
```bash
|
||||
npm install my-web-component
|
||||
```
|
||||
```javascript
|
||||
import "my-web-component";
|
||||
```
|
||||
|
||||
|
||||
## 7. 결론
|
||||
웹 컴포넌트는 모든 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 표준 기술입니다.
|
||||
* 프레임워크 독립적이며, 캡슐화된 UI 컴포넌트를 쉽게 만들고 재사용할 수 있음.
|
||||
* Shadow DOM을 활용하여 스타일 충돌을 방지하고, HTML 템플릿으로 동적 콘텐츠를 관리 가능.
|
||||
* 프레임워크 없이도 UI 컴포넌트를 사용할 수 있어, 현대적인 웹 개발에서 점점 더 많이 활용됨.
|
||||
|
||||
웹 컴포넌트를 활용하면 프로젝트의 유지보수성과 확장성을 크게 높일 수 있습니다!
|
||||
Reference in New Issue
Block a user