기술 정리 & CS/Web 일반 8

[Web] 웹 콘텐츠 캐싱 (브라우저, 프록시-CDN, 서버) 비교

개요웹 콘텐츠 캐싱은 이미지, 비디오, css, js 등과 같은 웹 콘텐츠를 사용자에게 더 빠르고 효율적으로 제공하기 위해 임시로 캐싱(저장)해두는 기술로 사용자의 원본 서버에 다시 접근하지 않고, 캐시에 저장된 데이터를 사용해 웹 페이지를 로드하는 방식 서버와 네트워크 부하를 줄여 응답 속도를 개선하고, 사용자 경험을 향상시킬 수 있는 장점이 있음 브라우저 캐시  vs 프록시 캐시 vs 서버 캐시주요 내용은 다음과 같다. 브라우저 캐시 (Client-Side)프록시 캐시 (Proxy or CDN)서버 캐시 (Server-side)목적동일 웹페이지 재방문시 빠른 로딩빠른 콘텐츠 전송 및 지연 시간 감소서버 부하 ↓ 응답 속도와 효율성 ↑대상정적 리소스 (CSS, JS, 이미지)정적(이미지) 및 동적(비디..

[Web 일반] CORS 란?

CORS 란Cross-Origin Resource Sharing(CORS)는 웹 브라우저에서 서로 다른 출처(origin) 간의 자원 요청을 허용 또는 제한하기 위해 사용하는 보안 기능.  (CORS 는 대부분 브라우저 관련 이슈) 교처 출처에 대한 자원 요청을 허용 하더라도 보안적으로 안전하게 하기 위한 작업을 수행. CORS 배경Origin 에 대해 다르다는 것은 다음 3가지 요소들이 다를 때 출처가 다르다고 한다.도메인 (예: example.com)프로토콜 (예: http, https)포트 (예: 80, 443) 웹 브라우저는 보안상의 이유로 기본적으로 동일 출처 정책(Same-Origin-Policy)를 따른다. 동일 출처 정책 : 한 출처(fe-domain.com) 에서 로드된 웹 페이지가 다른..

[WEB 일반] MIME Type, Content-Type 이란

MIME Type 이란MIME Type(Multipurpose Internet Mail Extensions)는 인터넷에서 전송되는 데이터의 형식을 나타내는 표준 방식 MIME 타입은 클라이언트(브라우저)가 데이터를 처리하는 방식을 결정하는 데 중요한 역할웹에서는 HTTP 통신시 Content-Type 이란 Key값으로 Header에 담겨 사용됩니다. MIME Type 구성MIME 타입은 타입(Type)과 / 서브 타입(Subtype) 으로 구성 (ex. type/subtype => text/plain)타입(type): 데이터의 일반적인 범주, ex) 텍스트, 이미지, 오디오, 비디오 서브타입(subtype): 특정 타입(type) 내에서 데이터의 구체적인 형식을 나타냄. ex) 텍스트 - plain, h..

[Web 일반] 실시간 통신 (Pooling, Long Pooling, Streaming, WebSocket) 비교

HTTP Pooling Client가 Server로 주기적으로 요청을 날려 이벤트 확인하는 방식 (ex. 10초마다 서버로 Request 확인) 🎈 단점 일정 주기에 기반한 것이라 완벽한 실시간성이 보장되지 않음 (ex. 10초마다 , 서버는 근데 1초에 바뀌는 경우 9초 후에 전송되는 것) 요청 후 응답이 오래걸리더라도, Server로 계속 추가적인 Request를 보내기 때문에 Server의 부담이 큼 HTTP Long Pooling Client가 Server로 요청을 날려 이벤트가 생길 때 까지 기다리는 방식 (ex. Request 10초 후 이벤트 발생하여 Response를 보내고, 응답 하는 즉시 Request를 보내 연결) 🎈 단점 요청이 많아지면 (동시에 이벤트가 발생하면) Server로의 ..

[Web 기본] URI, URL, URN 차이

URI, URL, URN 이란? 👉 URI (Unifom Resource identifier, 통합 자원 식별자) URI는 인터넷 상의 자원을 나타내는 고유 식별자로, 즉 인터넷에 있는 자료의 ID이다. URI의 역할은 리소스(전화, 지도, 이미지, 텍스트) 에 접근할 수 있는 유일한 식별자 역할을 수행하며, URI를 수신하는 기기는 해당 URI에 맞게 데이터를 반환한다. URI의 하위 개념으로는 URL과 URN 등이 있다. 👉 URL (Uniform Resource Locator) 특정 리소스에 대한 구체적인 위치를 서술하는 것 (현재 대부분의 URI는 거의 URL인 경우가 많다) URL의 표준 포맷은 다음과 같다. 일반적으로 Protocol, HostName, Port, Query 4가지 요소로 구분..

[Web 기본] HTTP 메소드 (+ PRG 패턴)

HTTP 메소드 종류 📁 GET 서버로부터 데이터를 요청(GET)하는 메소드 GET은 요청을 전송시 필요 데이터를 Body 대신, 쿼리스트링을 통해 전송함 📁 POST 데이터를 생성(등록)하는 요청에 주로 사용되는 메소드 📁 PUT 데이터 리소스를 대체, 해당 리소스 없으면 생성. 쉽게 말해 데이터를 덮어씀 📁 PATCH PUT 과 유사하게 리소스 수정시 사용. 다른점은 PATCH는 데이터 리소스 일부분만 변경 가능 📁 DELETE 삭제 요청을 보낼 때 사용되는 메소드 📁 기타 메소드 4가지 HEAD: GET과 유사, 메시지 부분을 제외하고 상태 줄과 헤더만 반환 OPTIONS: 대상 리소스에 대한 통신 가능 옵션 설명 (주로 CORS에서 사용) CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을..

[Web 기본] HTTP 상태 코드 정리

HTTP 응답 코드 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다. 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다. 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다. 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다. 1XX : Information responses 상태코드 요약 의미 100 Continue 진행중임을 의미 101 Switching Protocol 서버에서 프로토콜 변경할 것임을 알려줌 102 Processing 서버가 요청을 수신 후 처리 중 이란 뜻 2XX : Successful responses 상태코드 요약 의미 ..

[Web 기본] HTTP 통신 정리

HTTP(Hyper Text Transfer Protocol 통신 웹상에서의 정보를 주고 받는 프로토콜 통신 규약 HTTP 통신 주요 특징 목차 요청 (Request) 응답 (Response) Stateless 쿠키/세션 요청/응답 예시 요청 (Request) 웹 브라우저를 통해 서버에 어떠한 정보를 요청하는 것 (프론트 => 서버) 요청하는 정보 자체는 Request 객체가 관리한다. 응답 (Response) 웹 브라우저의 요청에 대해 서버가 응답하는 것 (서버 => 프론트) 응답하는 정보 자체는 Respons 객체가 관리한다. Stateless 웹은 기본적으로 클라이언트와 서버간에 서로 직접적인 연결이 되어 있지 않다. 각각의 HTTP 통신은 독립적이며, 그 전에 처리된 HTTP 통신에 대해 알 수 ..