캐싱(Caching) & CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing)

전산학(컴퓨터 과학, Computer Science)을 보면 캐싱(Caching)이라는 주제가 나오게 됩니다. 성능 최적화를 위해 사용되는 개념으로 최적화가 필요한 웹 서비스 환경에서도 성능 개선을 위해 캐싱 기술이 사용되고 있습니다. 웹 개발에 있어서 반드시 알고 있어야 하는 내용으로 CORS와 함께 캐싱까지 간단히 정리해 보겠습니다.

 

 

 

 

 

1. 캐시(Cache)와 캐싱(Caching)?

1-1. 캐시(Cache)

(1) 컴퓨터 과학(Computer Science, CS)에서 캐시는 자주 사용되는 데이터나 값들을 저장하는 임시 보관 장소를 의미합니다.

 

(2) 캐시는 자주 사용되는 데이터들이 캐시까지의 접근 시간에 비해 기존 데이터가 저장된 곳까지 접근하는 시간이 더 오래 걸릴 경우 해당 데이터를 캐시에 저장해서 데이터를 가져오는 latency를 줄이기 위해 사용합니다.

 

 

 

 

1-2. 캐싱(Caching)

(1) 캐시는 자주 사용되는 데이터를 보관하는 장소입니다.

 

(2) 캐싱은 자주 사용되는 데이터나 값들을 접근 속도가 더 빠른 영역에 저장해서 latency를 감소시킴에 따라 애플리케이션의 처리 속도를 향상시키는 기법 자체를 의미합니다.

 

 

 

 

 

 

 

2. 웹 캐싱(Web Caching)의 뜻과 종류 

2-1. 웹 캐싱(Web Caching)

(1) 웹 서비스에서는 클라이언트가 서버에 접속하거나 요청을 보낼 때 Static contents(HTML, CSS, JS 등과 같은 파일)를 특정 위치에 저장해서 서버에 해당 컨텐츠를 계속해서 요청을 보내 받는 것이 아닌 특정 위치에 저장된 컨텐츠들을 불러옴으로써 서버 latency와 부하(Traffic)을 감소할 수 있는 웹 캐싱이라는 기술을 사용하게 됩니다.

 

(2) 서버 부하와 latency를 줄임으로써 백엔드에서는 애플리케이션의 성능 최적화(Performance optimization), 사용자의 엔드 포인트를 다루는 프론트엔드에서는 사용자 경험(User experience)을 개선을 기대할 수 있게 됩니다.

 

 

 

 

2-2. 웹 캐시의 종류

(1) Browser cache(브라우저 캐시, caches)

-  HTTP 기반 Request를 보내는 웹 브라우저, 클라이언트 특정 Application에 의해 내부 디스크에 캐시되는 것

 

- 캐시된 리소스를 공유하지 않는 이상 개인에게 한정된 캐시 영역

 

- 브라우저 상에서 뒤로 가기(Back, ←)를 누르거나 방문한 페이지를 재요청할 시 브라우저 캐시가 극대화

 

 

(2) Proxy cache(프록시 캐시, caches)

- Browser cache와 동일한 원리로 동작하지만 클라이언트나 서버가 아닌 네트워크 상에서 동작하는 캐시

 

- 서비스 규모가 큰 회사나 IPS의 방화벽에 설치되어 latency, 부하 트래픽 감소, 접근 정책, 사용률 기록 체크 등을 수행

 

- 한정된 수의 클라이언트를 위해 웹 서버의 컨텐츠를 캐시

 

 

(3) Gateway cache(게이트웨이 캐시, caches 또는 Reverse or Surrogate proxy)

- 서버 앞 단에 설치되어 요청에 대한 캐시 및 효율적인 자원 분배 등을 통해 가용성, 신뢰성, 성능 등을 향상

 

- Encryption, SSL acceleration, Load balancing, Compression 등을 수행하는 캐시

 

- 무한대의 클라이언트들에게 한정된 수의 웹 서버의 컨텐츠를 캐시

 

 

 

 

 

 

3. 웹 캐싱(Web Caching)의 장점과 단점

3-1. 장점

(1) 서비스에 대한 웹 브라우징 속도 향상

- 캐싱을 사용하게 되면 잦은 페이지 재요청 시 변하지 않는 정적 요소들을 빠르게 렌더링할 수 있어서 서비스 성능 향상과 높은 사용자 경험을 가져올 수 있게 됩니다.

 

- 정적 요소들을 서버로부터 가져오는 프로세스의 속도는 대역폭(Bandwidth)에 큰 영향을 받습니다. 크기가 작은 요소들은 다운로드할 때 시간이 많이 걸리지 않겠지만 고화질의 이미지, 영상 같은 경우는 많은 시간을 소모할 수밖에 없고 이는 사용자 경험에 부정적인 영향을 줄 수밖에 없기 때문에 성능 향상을 위해서 적절한 캐싱 기술 사용을 고려해봐야 합니다.

 

 

 

 

3-2. 단점

(1) 업데이트된 파일을 만료되지 않은 캐시 때문에 새로 받아오지 않아 충돌 문제와 별도의 보안 이슈

- 캐시는 항상 유지되는 것이 아니라 서버에서 설정한 캐시 만료기간에 의해 그 정보들이 유지되고 사라지는 라이프 사이클을 갖게 됩니다.

 

- 보안 이슈 등을 고려했을 때 캐시 유지 기간이 길다면 외부에서 캐시 정보를 탈취하는 등의 보안적인 요소로 위험이 존재할 수 있게 됩니다.

 

- 서버에서 제공하는 웹 서비스의 사이트 포맷이나 작동 방식이 업데이트되었을 때, 특정 사용자가 보유한 캐시 정보로 인해 업데이트된 부분을 인지하지 못해 기존 캐시 정보로 사이트를 렌더링하는 순간 웹 사이트의 이미지나 형식이 깨지는 등의 문제가 발생할 수도 있으므로 이때는 클라이언트의 브라우저 캐시 정보를 모두 삭제한다면 문제가 해결된다는 특징 또한 가지고 있습니다.

 

 

 

 

 

 

4. CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing)

4-1. CORS의 정의

(1) CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원을 공유한다는 의미로, 한 출처에 존재하는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념으로 볼 수 있습니다. 한글로 직역하면 교차되는 출처 자원들의 공유로써 다른 출처에 있는 자원을 요청한다고 하면 이 경우를 교차 출처 요청이라고 합니다.

 

(2) Web MDN Docs 공식 문서에는 아래와 같이 정의되어 있습니다.

- 교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(Domain, Protocol, Port)와 다를 때 서로 다른 출처라고 인식하고 교차 출처 HTTP Request를 보내게 됩니다.

 

 

 

 

4-2. 출처(Origin)

(1) 웹 서비스의 URL 체계입니다.

https://beomy.github.io/tech/browser/cors/

 

(2) 동일 출처라 하면 Protocol, Host, Port 3가지만 같으면 동일 출처(Same origin)입니다.

 

(3) 여기 중에서 한 개의 요소라도 다른 URL로 요청을 하게 된다면 다른 출처(Cross-Origin) 요청입니다.

 

 

 

 

4-3. 정리

(1) 일반적으로는 동일 출처 요청만 자유롭게 요청이 가능하고 이를 동일 출처 정책(Same-Origin Policy)라고 합니다.

 

(2) 하지만 현대의 웹 서비스들은 웹 비즈니스의 복잡도가 커짐에 따라 다른 출처의 자원을 받아야 하는 상황도 생겼기 때문에 기준을 완화시켜서 다른 출처의 자원도 요청할 수 있도록 만든 정책이 다른 출처 정책(Cross-Origin Policy)입니다.

 

 

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

(3) 위와 같이 Spring Boot의 MVC 인터페이스 중 하나인 WebMvcConfigurer를 구현해 CORS 정책을 전역으로 설정할 수 있습니다. WebMvcConfigurer 인터페이스는 필터 기반이기 때문에 모든 HTTP Request가 거쳐야 하는 구간인 Dispatcher Servlet에 도달하기 전에 전역적으로 모든 요청을 검사할 수 있다는 특징이 있습니다.

 

 

Spring Web MVC Structure

 

 

 

 

 

 

5. Reference

(1) URL : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EC%96%B4%EB%96%A4_%EC%9A%94%EC%B2%AD%EC%9D%B4_cors%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%82%98%EC%9A%94

교차 출처 리소스 공유 (CORS) - HTTP | MDN

※ 해당 포스팅에 대해 내용 추가가 필요하다고 생각되면 기존 포스팅 내용에 다른 내용이 추가될 수 있습니다.

개인적으로 공부하며 정리한 내용이기에 오타나 틀린 부분이 있을 수 있으며, 이에 대해 댓글로 알려주시면 감사하겠습니다!