J's inner world

HTTP 웹 캐싱이란?

HTTP 웹 캐싱은 서버가 중복적인 요청을 했을 때 상태값이나 식별이 가능한 유용한 데이터를 저장하여, 또 다시 동일한 데이터의 통신을 하지 않게끔 유도하여, 웹 성능을 최적화하는 기술 중 하나이다. 이를 통해 네트워크 대역폭을 줄이고 웹 페이지 로딩 속도를 향상시키는 데 목적이 있다.

🔹 웹 캐싱의 주요 유형

1. 브라우저 캐시 (Browser Cache)
   • 사용자의 웹 브라우저가 방문한 페이지의 정적 리소스(이미지, CSS, JavaScript 등)를 저장하여 동일한 요청 시 다시 다운로드하지 않도록 하는 방식으로, 이를 통해 동일한 사이트를 재방문할 때 빠르게 로딩할 수 있다.
2. 프록시 서버 캐시 (Proxy Server Cache)
   • 중간 서버(프록시 서버)가 서버와 클라이언트 사이에서 데이터를 캐싱하여 여러 사용자가 동일한 요청을 할 때 응답 속도를 개선하는 방식으로, 기업 내부 네트워크 또는 ISP(Internet Service Provider, KT같은 곳)에서 주로 사용된다. AWS 로 치면, LoadBalancer 같은 느낌..
3. CDN 캐시 (Content Delivery Network Cache)
   • CDN 서버가 전 세계 여러 지역에서 자주 요청되는 콘텐츠를 캐싱하여 사용자에게 더 가까운 서버에서 제공하는 방식으로, 이미지, 동영상, 정적 파일 등을 효율적으로 배포하기 위해 사용된다.

🔹 그러나 주의해야 할 점 (보안 문제)

성능을 향상시킬지 몰라도, 성능보다 더 중요한 사항이 있다. 바로 `보안` !!

예를들어 로그인 정보,  결제 카드 정보와 같은 민감한 데이터가 캐싱돼서는 안될 것이다.

이러한 경우를 대비해서 HTTP 에서 제공하는 헤더가 있다.

바로 Cache-Control: no-store 헤더이다.

이 헤더를 사용하여 브라우저나 프록시 서버가 특정 응답을 절대 캐싱하지 않도록 설정할 수 있다.

🔹 웹 캐싱 사용 방법 : HTTP Response(응답)의 헤더 활용

웹 캐싱은 HTTP Response 헤더를 활용하여 사용이 가능하다.

다음은 그 헤더의 대표적인 유형이다.

1. Cache-Control
   • 캐싱 정책을 지정한다.
   • [정책 종류]
     
     • public → 누구나 캐시 가능
     • private → 브라우저에서만 캐시 가능
     • no-cache → 항상 서버에 검증 요청 필요
     • no-store → 캐싱 금지 (보안 데이터 보호)
     • max-age=3600 → 1시간 동안 캐싱 유지
2. ETag (Entity Tag)
   • 리소스의 고유한 식별자를 제공하여 변경 여부를 확인하는 역할을 한다. 이때 주어지는 고유한 식별지는 해쉬코드이며, 서버는 (클라이언트의 요청에 의해서) 응답을 보낼 때, ETag 값을 응답 헤더에 포함한다. 이때 ETag 값은 무작위 해쉬코드이다.
   • 이제 클라이언트의 두번 째 요청부터는, 기존 첫 요청때 응답 받았던, ETag 값을 If-None-Match 요청 헤더에 값을 복사해서 보내면, 서버가 ETag를 비교하여 변경되지 않았다면 304 (Not Modified)를 반환하여 불필요한 데이터 전송을 방지한다.
   • If-None-Match 말고도 (조금 더 정밀성이 떨어지긴 하지만) If-Modified-Since 헤더도 있다. 이 헤더에는 마지막 수정 시간을 이용하여 날짜를 기반한 변경 여부 비교를 한다.
3. Expires
   • 특정 날짜와 시간을 지정하여 캐시 만료 시점을 설정하는 방식이다.
   • 그러나 최신 웹에서는 Cache-Control: max-age가 더 자주 사용된다.

✅ 결론

HTTP 웹 캐싱은 네트워크 트래픽을 줄이고 웹 성능을 최적화하는 유용한 기술이지만,

보안 문제를 고려하여 민감한 데이터는 캐싱되지 않도록 주의해야 하며,

이를 활용하기 위해 Cache-Control, Etag, Expires 등의 HTTP 응답 헤더를 사용할 수 있다. 🚀

함께 다음과 같은 버튼을 꾸며보자.

첫 번째 방법. 테두리 꾸며보기

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

https://developer.mozilla.org/en-US/docs/Web/CSS/border

나는 테두리를 아예 없애보겠다.

outline: none;

border: none;

두번째, 마우스를 올려놓았을 때 변화주기

:hover 의 의미는 버튼에 마우스를 올려놓았을 때 변화하는 방법을 말한다.

transition 속성 : 변화할때 어떻게 변화할지 정의하는 부분.

scale(1.1) : 1.1배 크게 변화되게 하기

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient() 

 

linear-gradient() - CSS: Cascading Style Sheets | MDN

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of

.

developer.mozilla.org

바로 linear-gradient 속성이다.

더보기

/* 45 degrees(45도)로 시작하는 그라디언트이며,

파란색으로 시작해서 빨간색으로 끝나는 경우 */

linear-gradient(45deg, blue, red);

 

/* 오른쪽 아래에서부터 왼쪽 위로 향하는 그라이언트이며,

파란색으로 시작해서 빨간색으로 끝나는 경우 */

linear-gradient(to left top, blue, red);

 

/* 아래에서 위로 가는 그라디언트이며,

파란색으로 시작해서 40% 지점에서 초록색이되고 빨간색으로 끝나는 경우 */

linear-gradient(0deg, blue, green 40%, red);

 

/* 왼쪽에서 오른쪽으로 가는 그라디언트이며,

빨간색으로 시작해서 10% 지점에서 두 색이 섞이는 지점을 두고,

나머지 90%는 파란색으로 변하도록 두는 경우 */

linear-gradient(.25turn, red, 10%, blue);

 

/* 45도로 시작하고

왼쪽 아래 반은 빨강, 오른쪽 위 반은 파란색이며,

hard line(명확한 구별라인)을 빨강과 파랑 사이에 두는 경우 */

linear-gradient(45deg, red 0 50%, blue 50% 100%);

사용법은 다음과 같다.

참고로, 자주 사용하는 각도는 문자로도 정의 되어 있다.

파라미터 쉽게 설명	입력 예시	결과 예시
background: linear-gradient(시작 색상, 끝 색상); 딱히 언급이 없다면, 기본 값은 0deg이며, 시작 색상은 위쪽이고, 끝 색상은 아래쪽이다.	background: linear-gradient(#e66465, #9198e5); 시작색상(위) : #e66465 끝색상(아래) : #9198e5
background: linear-gradient(얼마만큼 회전할 것인지, 시작 색상, 중간 색상, 끝 색상);	background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); 1/4(90도=0.25turn)만큼 회전하면 가로로 그라데이션이 된다. 이번에는 색상을 세번 넣었다. 시작 색상(왼쪽) : #3f87a6 끝 색상(오른쪽) : #f69d3c
background: linear-gradient(to left, 시작 색상, 중간색상 50%, 중간색상2 75%, 끝색상 75%); to left(270도)이므로 오른쪽부터 시작. 퍼센트의 의미는 공간의 그부분쯤에 색상을 칠하겠다는 의미이다.	background: linear-gradient(to left, red, blue 50%, orange 75%, #333 75%); #333과 orange 색상이 저렇게 딱 분리된 이유는 #333에 75%를 주었기 때문이다.
background: linear-gradient(시작각도, 색상설정), linear-gradient(시작각도, 색상설정), linear-gradient(시작각도, 색상설정);	background:  linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

그레디언트 색상 선택에 도움되는 사이트

↓↓↓↓↓

https://cssgradient.io/

https://color.adobe.com/ko/create/color-wheel

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

바로 border-radius 속성을 이용하면 된다.

그림자의 경우는 위에 사이트에서 원하는 테마를 조정한다음

CSS 코드를 복붙해넣으면 된다.

https://html-css-js.com/css/generator/box-shadow/