기본 콘텐츠로 건너뛰기

개발 공부 - 브라우저 웹 캐싱

 면접 중에 이것은 웹 캐시 중에 캐시 비우기 및 강력 새로고침 기능 할때 캐시인가요? 라고 물어 봤었어서 공부할까 한다.

웹 캐시 : HTTP 캐시와 같은 말로, 서버 지연을 줄이기 위해 웹 페이지, 이미지, 기타 유형의 웹 멀티미디어 등의 웹 문서들을 임시 저장하기 위한 정보기술이다.

서버 - 클라이언트 간 통신 시 지연이 생기기 때문에, 접근 시간을 단축하기 위한 기술의 일련을 웹 캐시라고 부른다.

브라우저 캐시는 웹 캐시의 일종이다. 브라우저가 웹사이트의 에셋을 저장한다.

이미지, HTML, CSS, Javascript 등인 정적 자산을 캐싱하는데, 
개발 시 빠릿빠릿하게 반응이 안 되면 보통 개발자 도구를 켜 놓고 캐시 비우기 기능을 쓴다.

프록시 캐시, 게이트웨이 캐시 등도 있다.

HTML 헤더에다가 설정을 해 놓고 캐시 정보를 컨트롤도 가능하다.
(일반적으로 구축된 사이트는 거의 다 설정이 되어 있으니 확인이 용이하다.)


이 분 글과 같이 캐시 방지를 하려면 헤더에 저러한 정보를 설정하면 된다.
나는 개발용에도 no-cache는 설정해놓고 쓴다. (프론트 쪽 개발)

  1. HTML 파일 캐시 방지
     <!-- 다음 코드를 헤더에 삽입한다.-->
    	
     <!-- 
     Cache-Control
     no-cache : 캐시를 사용하기 전에 재검증을 위한 요청을 강제함.
     no-store : 클라이언트의 요청, 서버의 응답 등을 일체 저장하지 않음
     must-revalidate : 캐시를 사용하기 전에 반드시 만료된 것인지 검증을 함.
     Ex) Cache-Control: no-cache, no-store, must-revalidate
     -->
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    
     <!-- 
     Expires
     리소스가 validate 하지 않다고 판단할 시간을 설정함
     유효하지 않은 날짜 포맷(0)과 같은 경우 리소스가 만료 되었음을 의미함.
     Ex) Expires: Wed, 21 Oct 2015 07:28:00 GMT
     -->
     <meta http-equiv="Expires" content="0">
    
     <!-- 
     HTTP 1.0 버전에서 HTTP 1.1의 Cache-Control 헤더와 같은 역할을 함
     Ex) Pragma: no-cache
     -->
     <meta http-equiv="Pragma" content="no-cache">
    
  2. CSS, JS 파일 Load
     <!--
     실제 파일 변경이 이루어졌을 때, 버전을 명시해주면 캐시를 사용하지 않고 새롭게 로드
     다만 JSP 같은 경우 스크립트릿을 삽입하여 자동화 할 수 있는데 
     순수 HTML 문서에서는 수동으로 고쳐줘야할 듯 하다.
     -->
     <script type="text/javascript" src="./jquery-3.3.1.min.js?ver=1.0"></script>



웹 서버 기준 캐싱 처리를 할 때, 캐시 미스 - 캐시 히트를 발생시키는데,
웹 서버로 첫 요청 시, 하드 디스크가 캐시를 확인하고 "캐시 미스"를 발생시킨다.
추후 다시 요청받을 수 있다고 하면, 캐시를 하드에 저장한다.

이후 요청부터는 캐시를 사용할 수 있는 경우, "캐시 히트"를 발생시키고, 캐시 미스가 발생하기 전까지는 버퍼에서 캐시가 제공된다.

캐시 미스는 데이터가 없어서 가져와야 할 경우에 생기고,
캐시를 가지고 있을 경우에는 캐시 히트가 발생된다.







출처 : https://oizys.tistory.com/m/59
https://velog.io/@mgm-dev/%EA%B0%84%EB%9E%B5-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BA%90%EC%8B%9C%EC%97%90-%EB%8C%80%ED%95%B4
https://hahahoho5915.tistory.com/33


댓글

이 블로그의 인기 게시물

Ebook - 전자책 drm 상관 없이 pdf로 만들기

yes24와 교보문고에서 ebook을 구매 해야 했는데 너무 불편하고, 필기가 매우 화날 정도로 안 좋아서 원시적으로 사용하기로 했다. 1. 목적 : ebook에서 필기 및 사용이 불편하여 pdf로 변환  2. 용도 : 개인 사용 목적이며 화질이 다소 저하되어도 필기만 용이하면 상관 없음 3. 방법 1) 휴대폰 및 카메라로 동영상을 촬영했다. DRM 때문에 프로그램으로는 촬영이 안 되는 것을 확인했다. (사실 개인 사용 목적이면 기본 화면 캡쳐를 사용해도 된다...) 2) 마우스 클릭 해주는 매크로를 사용했다. (1) key_macro.exe > https://blog.daum.net/pg365/250 듀얼 모니터에서 위치 이탈 현상이 있긴 해도 괜찮았다. (2) AutoClick.exe > http://bestsoftwarecenter.blogspot.com/2011/02/autoclick-22.html 이 걸로 잘 사용했다. 3초마다 한 번 클릭하도록 사용했다. 3) 동영상을 이미지로 변경해주는 프로그램을 사용했다. Free Video to JPG Converter > https://www.dvdvideosoft.com/products/dvd/Free-Video-to-JPG-Converter.htm (240826: 다운로드 시 정상적으로 되지 않아서 URL 수정) 일 하면서 듀얼 모니터에 켜 놨는데 속도가 괜찮았다. * Every frame 으로 사용해야 한다. 4) 중복 사진 제거해주는 프로그램을 사용했다. VlsiPics  > http://www.visipics.info/index.php?title=Main_Page 생각보다 느리니 퇴근시에 걸어놓고 가면 된다. 한번 play가 끝나면 Auto-select 하고 Delete 하면 된다. 5) 이미지를 일괄 Crop 작업 해주는 프로그램을 사용했다. JPEGCrops > https://jpegcrops.softonic.kr/ *...

개발 공부 - PC 카카오톡 작업 표시줄 아이콘 이미지 변경 방법

PC 카카오톡 사용시 작업 표시줄에서 아이콘 이미지를 변경하는 방법이다. 1) 작업 표시줄 내 카카오톡 아이콘에서 마우스 오른쪽 버튼을 누른  뒤 속성에 들어간다. 2) 아이콘 변경에서  C:\Windows\system32\imageres.dll C:\Windows\system32\shell32.dll C:\Windows\system32\DDORes.dll C:\Windows\System32\moricons.dll (MS DOS Icons) 등을 누른 뒤 적당한 것을 선택하여 적용한다. * 사내 메신저 아이콘을 참고해도 된다. 참고 : 기본 아이콘 위치 https://blog.silnex.kr/windowstip-windows-%EA%B8%B0%EB%B3%B8-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9C%84%EC%B9%98/ 2022. 11. 29.  생각보다 유입이 많아서 놀랐습니다. PC 카톡 사용자 화이팅!

운동 정보 - 어메이즈핏 밴드 5 스마트밴드 나이키 런 클럽(NRC = Nike Run Club) 연동

 나이키 런 클럽 쓰려고 산 어메이즈핏 밴드5 인데 연동이 영 어려워서 찾아보고 써봤다. 1. Zepp 앱은 연동이 되어 있어야 한다. 2.  Zepp 앱 -> 프로필 -> 내 기기 -> Amazfit Band 5 3. 검색 가능 : 켜짐 활동 심박수 공유 : 켜짐 연결 제한 : 꺼짐 (기본) 백그라운드에서 실행 : 제외로 등록 4. NRC(나이키 런 클럽) 앱 -> 설정 -> 러닝 설정 -> 기기 5. 심박수 표시 -> 블루투스에서 AmazFit Band 5 누르고 NRC 즐기면 된다! * 안드로이드 이용자입니다.