웹 표준에서 자주 쓰이는 객체들

웹 표준이란?

웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML, CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻한다. HTML은 [접근성](https://ko.wikipedia.org/wiki/%EC%A0%91%EA%B7%BC%EC%84%B1)과 [시맨틱 HTML](https://ko.wikipedia.org/wiki/HTML "HTML")의 가이드라인을 충족해야 한다.

wiki 백과 출처

• 웹 표준을 사용하면 다양한 브라우저와 기기에서 동일한 결과를 보장합니다.
• 웹 표준을 준수하면 접근성이 향상 됩니다.
• 웹 표준을 사용해서 세계 각국의 개발자들이 유지보수가 용이 해집니다.

웹 표준을 준수하지 않으면..

• 웹 표준을 준수하지 않으면 브라우저 호환성 문제가 생깁니다. 특정 브라우저에서만 제대로 작동하고 다른 브라우저에서는 레이아웃이 깨지거나 기능이 작동하지 않을 수도 있습니다.
• 웹 표준을 준수하지 않으면 장애인이나 고령자와 같은 다양한 사용자층이 웹사이트를 이용하기 어려워집니다.
• 웹 표준을 준수하지 않는 웹사이트는 사용자에게 신뢰를 읽게 됩니다. ( 크롬에서만 동작하는 기능은 크롬의 사용자만 이용가능하므로 사용자 유입이 힘들 수도 있다.)

특히 웹 표준은 영원하다. 다른 프레임워크에 종속되어 사고가 갇히게 되어 웹 표준을 무시하게 되면 나중에는 큰코 다칠것이다.

예를들어 next.js에서 리다이렉트하는 방법과 원래의 웹에서 리다이렉트를 시키는 방법이 다르고, next.js는 언젠가 레거시가되거나 다른 프레임워크로 대체될 가능성이 웹보단 높다.

-> 결과적으로 잘 알아두는것이 중요하다.

https://developer.mozilla.org/ko/

MDN을 잘 참고해서 웹 표준 기술을 익혀두는것이 중요할 것이다. 이번 글은 잘 모르는 웹 표준 객체들에 대해서 알아보는 시간을 가져야겠다.

URL

**`URL()`** 생성자는 매개변수로 제공한 URL을 나타내는 새로운 [`URL`](https://developer.mozilla.org/ko/docs/Web/API/URL) 객체를 반환합니다.

const url = new URL(url [, base])

var url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/pathname?q=value",
);

// URL.origin
console.log(url.origin); // https://developer.mozilla.org

//pathname
var result = url.pathname; // Returns:"/ko/docs/Web/API/URL/pathname"

//protocol
console.log(url.protocol); // Logs "https:"

//searchParams
let params = url.searchParams;
let q = params.get("q"); // is the string "value".

URLSearchParams

`URLSearchParams`는 JavaScript의 Web API로, URL의 쿼리 문자열(Query String)을 쉽게 다루기 위한 유틸리티 메서드를 제공하는 인터페이스입니다. 이를 통해 URL 뒤에 붙은 파라미터를 분석, 추가, 수정, 삭제할 수 있습니다.

1. 쿼리 문자열 관리
   • URL의 ? 뒤에 오는 쿼리 문자열을 쉽게 처리할 수 있습니다.
   • 예: https://example.com?foo=1&bar=2에서 foo=1과 bar=2를 다룰 수 있음.
2. 다양한 초기화 방법
   • URLSearchParams 객체는 다음과 같은 방식으로 생성할 수 있습니다.
3. node.js 에서도 사용이 가능하다

// 1. URL 객체에서 생성
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);

// 2. 쿼리 문자열 직접 전달
const params1 = new URLSearchParams("foo=1&bar=2");
const params2 = new URLSearchParams("?foo=1&bar=2");

// 3. 배열 또는 객체로 초기화
const params3 = new URLSearchParams([["foo", "1"], ["bar", "2"]]);
const params4 = new URLSearchParams({ foo: "1", bar: "2" });

간단한 예제로 객체의 사용법을 한눈에 알 수 있다. 매우 직관적.

const paramsString = "q=URLUtils.searchParams&topic=api";
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has("topic")); // true
console.log(searchParams.has("topic", "fish")); // false
console.log(searchParams.get("topic") === "api"); // true
console.log(searchParams.getAll("topic")); // ["api"]
console.log(searchParams.get("foo") === null); // true
console.log(searchParams.append("topic", "webdev"));
console.log(searchParams.toString()); 
// "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set("topic", "More webdev"));
console.log(searchParams.toString()); 
// "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete("topic"));
console.log(searchParams.toString()); // "q=URLUtils.searchParams"

Request

웹 표준에서의 Request 객체는 클라이언트가 서버로 전송한 HTTP 요청 정보를 담고 있는 객체로, 다양한 웹 프레임워크와 환경에서 활용됩니다. 이 객체는 클라이언트의 요청 데이터를 분석하고 처리하기 위한 여러 속성과 메서드를 제공합니다.

1. HTTP 요청 정보 제공
   • Request 객체는 클라이언트가 전송한 HTTP 요청의 메서드(GET, POST 등), 헤더, 쿼리 파라미터, 본문 데이터 등을 포함합니다.
   • 예를 들어:
     • request.method: 요청 메서드 반환 (예: ‘GET’, ‘POST’).
     • request.headers: HTTP 헤더 정보를 제공.
2. 쿼리 문자열 및 본문 데이터 접근
   • 클라이언트가 URL에 포함한 쿼리 파라미터나 POST 요청의 본문 데이터를 읽을 수 있습니다.
     • request.GET: URL 쿼리 문자열 데이터.
     • request.POST: 본문에 포함된 폼 데이터.
       • 특히 formData를 가져올 수 있음
       • Request.formData()
3. 쿠키 및 세션 관리
   • 클라이언트와 서버 간 상태 관리를 위해 쿠키와 세션 데이터를 다룰 수 있습니다.
     • request.COOKIES: 클라이언트가 전송한 쿠키 데이터.
     • request.session: 서버 측 세션 데이터 접근.
4. 클라이언트 정보 확인
   • 클라이언트의 IP 주소, 브라우저 정보 등을 확인할 수 있습니다.
     • request.META'REMOTE_ADDR': 클라이언트 IP 주소.
     • request.META'HTTP_USER_AGENT': 브라우저 정보.

const request = new Request("https://www.mozilla.org/favicon.ico");

const url = request.url;
const method = request.method;
const credentials = request.credentials;

console.log(url, method, credentials);

fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });

평소에 자주사용하는 request 객체는 fetch API 에서 매개변수로 사용하는 reqeust 객체이다.

const request = new Request("https://example.com", {
  method: "POST",
  body: '{"foo": "bar"}',
});

const url = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;

Note: The body can only be a Blob, an ArrayBuffer, a TypedArray, a DataView, a FormData, a URLSearchParams, a ReadableStream, or a String object, as well as a string literal, so for adding a JSON object to the payload you need to stringify that object.

Response

웹 표준에서 Response 객체는 서버가 클라이언트의 요청에 대해 생성하는 HTTP 응답 정보를 다루는 객체입니다. 이 객체는 응답의 상태 코드, 헤더, 본문 등을 설정하거나 조작할 수 있으며, 다양한 웹 기술(JSP, Servlet, Spring 등)에서 사용됩니다.

서버에서 클라이언트에게 응답을 줄때 사용하는 객체 이다.
Response 객체의 주요 역할

1. HTTP 상태 코드 설정
   • 클라이언트에게 응답의 결과 상태를 전달합니다.
   • 예: 200 OK, 404 Not Found, 500 Internal Server Error 등.
   • 메서드 예시:

   response.setStatus(200); // 상태 코드 설정

2. HTTP 헤더 설정
   • 응답에 추가적인 메타데이터를 포함할 수 있습니다.
   • 예: 콘텐츠 타입(Content-Type), 캐시 제어(Cache-Control) 등.
   • 메서드 예시:

   response.setHeader("Content-Type", "application/json");

3. 응답 본문 작성
   • HTML, JSON, 텍스트 등 클라이언트로 전송할 데이터를 작성합니다.
   • JSP나 Servlet에서는 주로 PrintWriter나 OutputStream을 사용합니다.
   • 메서드 예시:

   PrintWriter out = response.getWriter();
   out.println("<html><body>Hello, World!</body></html>");

4. 리다이렉션
   • 클라이언트를 다른 URL로 이동시킬 수 있습니다.
   • 메서드 예시:

   response.sendRedirect("https://www.example.com");

5. 쿠키 설정
   • 클라이언트에 쿠키를 추가하거나 수정할 수 있습니다.
   • 메서드 예시:

   Cookie cookie = new Cookie("sessionId", "12345");
   response.addCookie(cookie);

주요 활용 사례

1. REST API 응답 처리
   • JSON 형식으로 데이터를 반환하거나 상태 코드를 설정하여 RESTful 서비스 구현.
2. 동적 콘텐츠 생성
   • 클라이언트 요청에 따라 HTML 페이지나 파일을 동적으로 생성하여 반환.
3. 리다이렉션 및 쿠키 관리
   • 인증 후 특정 페이지로 리다이렉트하거나 세션 관리를 위한 쿠키 설정.
4. 에러 처리
   • 에러 발생 시 적절한 상태 코드와 메시지를 반환하여 클라이언트가 문제를 이해하도록 도움.

Cache-Control

Cache-Control은 HTTP/1.1에서 도입된 웹 표준 헤더로, 클라이언트와 서버 간의 캐싱 동작을 제어하기 위한 지시문(Directive)을 제공합니다. 이를 통해 브라우저, 프록시 서버, CDN 등에서 리소스를 캐싱할지 여부와 캐싱 기간 등을 설정할 수 있습니다.

Cache-Control의 주요 역할

1. 리소스 캐싱 정책 설정
   • 리소스를 캐시에 저장할지 여부와 저장 기간을 정의합니다.
2. 네트워크 트래픽 감소
   • 캐시된 리소스를 재사용함으로써 서버 요청을 줄이고 네트워크 트래픽을 절감합니다.
3. 응답 속도 개선
   • 캐시된 데이터를 사용하여 브라우저 로딩 속도를 향상시킵니다.
4. 데이터 유효성 관리
   • 캐시된 데이터가 유효한 상태인지 확인하거나, 항상 최신 데이터를 가져오도록 설정할 수 있습니다.

---

Cache-Control의 주요 지시문

1. 캐싱 동작 제어

지시문	설명
no-store	리소스가 민감한 정보일 경우, 캐시에 저장하지 않도록 지시합니다.
no-cache	캐시에 저장은 하되, 사용 전에 항상 원 서버에서 유효성을 확인해야 합니다.
public	리소스를 모든 캐시(공유 및 개인 캐시)에 저장할 수 있도록 허용합니다.
private	리소스를 특정 사용자(개인 캐시)에만 저장하도록 제한합니다.

2. 캐시 유효 기간 설정

지시문	설명
max-age=<초>	리소스가 캐시에 유효한 시간을 초 단위로 지정합니다.
s-maxage=<초>	공유 캐시에만 적용되는 max-age로, 프록시 서버나 CDN 같은 공유 환경에서 유효 기간을 설정합니다.
must-revalidate	만료된 리소스는 반드시 원 서버에서 재검증 후 사용하도록 강제합니다.

3. 기타 지시문

지시문	설명
immutable	리소스가 변경되지 않을 것을 보장하며, 만료 전까지 항상 캐시를 사용하도록 설정합니다.
stale-while-revalidate=<초>	만료된 리소스를 일정 시간 동안 임시로 제공하면서 백그라운드에서 새 데이터를 가져옵니다.

---

Cache-Control 요청 및 응답 예제

1. 요청(Request) 헤더 예제

클라이언트가 서버에 요청 시 Cache-Control 헤더를 포함하여 특정 정책을 요구할 수 있습니다.

GET /example HTTP/1.1
Host: www.example.com
Cache-Control: no-cache

• 의미: 요청 시 기존 캐시를 사용하지 않고 항상 원 서버에서 최신 데이터를 가져오도록 요구.

2. 응답(Response) 헤더 예제

서버가 클라이언트에 응답 시 Cache-Control 헤더로 캐싱 정책을 전달합니다.

HTTP/1.1 200 OK
Cache-Control: max-age=3600, public

• 의미: 이 응답은 모든 캐시에 저장 가능하며, 3600초(1시간) 동안 유효.

---

주요 사용 사례

1. 정적 파일 최적화
   • 이미지, CSS, JavaScript 파일과 같은 정적 리소스에 대해 장기적인 캐싱(max-age)을 설정하여 로딩 속도를 개선.

     Cache-Control: max-age=31536000, immutable

2. 민감한 데이터 보호
   • 금융 정보나 개인 데이터와 같은 민감한 정보를 다룰 때는 캐싱 금지.

     Cache-Control: no-store

3. 동적 콘텐츠 관리
   • 자주 변경되는 동적 콘텐츠에 대해 항상 최신 데이터를 가져오도록 설정.

     Cache-Control: no-cache, must-revalidate

4. CDN 활용
   • 공유 캐시에 대한 별도의 정책(s-maxage)을 설정하여 CDN이 효율적으로 작동하도록 지원.

     Cache-Control: s-maxage=86400, public

---

Expires와의 차이점

• Expires는 HTTP/1.0에서 도입된 헤더로, 특정 날짜와 시간을 기준으로 캐시 만료를 지정합니다.

  Expires: Wed, 21 Oct 2025 07:28:00 GMT

• 그러나 시간 동기화 문제를 해결하기 위해 HTTP/1.1에서는 상대적인 시간 기반인 Cache-Control: max-age가 선호됩니다.
• 두 헤더가 함께 사용될 경우, Cache-Control이 우선 적용됩니다.

Cache-Control은 웹 애플리케이션의 성능 최적화와 사용자 경험 향상을 위해 중요한 역할을 합니다. 적절히 활용하면 네트워크 부하를 줄이고 응답 속도를 개선하며, 민감한 데이터 보호까지 가능하게 합니다. 이를 통해 효율적인 웹 서비스 운영이 가능합니다.