.
sns를 하던 중 내가 공유한 링크의 미리보기 카드가 youtube의 실제 제목과 다른 이상한 현상을 발견했다. 결론부터 말하자면 두 개의 제목이 달랐던 이유는 yotube 영상 투고자가 영상의 제목을 바꿨고, 내 웹에서는 캐시 때문에 공유를 했을 때 그게 적용되지 않았기 때문이었다. 아주 기초적인 현상인데 다른 이유 때문일거라 짐작하고 한참 구글링을 했다...
이렇게 처음에 생각했던 문제는 해결되었으나, 다른 궁금증이 생겼다.
1. 브라우저 캐시에 저장되는 데이터의 기준(?) 그리고 저장된 데이터는 언제 사라질까?
2. 타 사이트에서 어떻게 youtube같은 외부링크로 미리보기 카드를 보여주는걸까?
그래서 위 문제에 대한 답을 찾아보고 개인적으로 공부한 걸 블로그에 정리해보았다. 확실히 이해하고, 다른 사람이 읽었을 때 알기 쉽도록 글을 작성하고 싶었으나, 내용이 아직 나에게 너무 어려워서 내가 깨달은 것 위주로만 간략하게 설명하게 될 것 같다.
브라우저 캐시
먼저 캐시(cache)란? 데이터나 값을 미리 저장해두는 임시 저장 공간을 말한다. 주로 사용되는 데이터를 캐시에 저장해놓으면 접근 속도도 빨라지고 효율적이다. 웹에서는 css나 js 파일 등 자주 사용되고, 변화가 크지 않은 데이터를 상대로 사용한다. 캐시를 사용했을 때 장점은 데이터 전송이 빨라지기도 하지만, 웹 서버에 가는 부하나 인터넷에 부과되는 트래픽 또한 줄일 수 있다.
http header
위 이미지는 개발자도구를 통해 확인한 http header이다. 이 중에서 cache-control 헤더와 etag 헤더가 캐싱 구현에 사용된다. 헤더 속성은 아래 링크에 잘 설명되어 있었다.
developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control
Cache-Control
Cache-Control 일반 헤더 필드는 요청과 응답 내의 캐싱 메커니즘을 위한 디렉티브를 정하기 위해 사용됩니다. 캐싱 디렉티브는 단방향성이며, 이는 요청 내에 주어진 디렉티브가 응답 내에 주어��
developer.mozilla.org
cache-control 헤더에서 속성을 지정할 수 있는데, no-store 속성은 캐시를 사용하지 않음을 나타내고, no-cache 속성은 캐시를 사용한다. Etag는 캐시된 데이터의 값을 검사하는 기능을 하는데, 서버에서 데이터 값이 바뀌면 Etag의 값도 바뀌어서 cache에서 읽을 때 서버에 새로운 데이터를 요청할 수 있게 한다. max-age 속성은 캐시의 수명을 결정한다. 단위는 초이며, 'max-age=60'이면 60초가 지나기 전까지 해당 캐시를 사용한다는 뜻이다.
html manifest 속성
html에서 manifest 속성을 사용해서 캐시로 저장할 파일을 지정해줄 수 있다. <html manifest = "파일명">의 형태로 텍스트 파일을 지정해주면 된다. 텍스트 파일에서 3가지 옵션을 지정해준다.
CACHE:
- 캐시로 저장할 파일 이름을 적어준다.
NETWORK:
- 캐시로 저장하지 않고, 항상 서버에 리소스를 요청할 파일 이름을 적어준다. *로 표시하는 일이 많은 것 같았다.
FALLBACK:
- 서버에서 파일을 불러오지 못했을 때, 브라우저가 사용하는 대체 페이지를 적어준다.
실습도 해보려 했지만 생각만큼 잘 되지 않았다... tomcat에 mine-type을 추가해도 안 되었는데 stack overflow에서 보니 크롬 개발자 도구에서 설정을 바꿔줬더니 되었다는 사람도 있고... 아직 잘 모르겠다.
developer.mozilla.org/ko/docs/Web/HTML/Using_the_application_cache
애플리케이션 캐시 사용하기
HTML5 는 웹기반의 애플리케이션들이 오프라인에서도 실행되도록 해주는 애플리케이션 캐시 메카니즘을 제공한다. 개발자는 브라우저에 캐시되어 오프라인 사용자가 사용할 수 있도록 자원을
developer.mozilla.org
위 위키에서 많은 정보를 얻었다.
미리보기 링크
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
결론부터 말하자면, 미리보기 링크의 구현은 opengraph라는 프로토콜과 관련이 되어있다.
opengraph(이하 OGP)는 메타데이터 표기 방법에 대한 프로토콜이다. og:태그명 형태로 사용하며, 웹 사이트가 특정 정보를 더 쉽게 찾을 수 있게 한다. 티스토리나 카카오 등으로 유튜브, 페이스북, 타 웹사이트의 링크가 보내지면 웹은 첨부된 링크의 웹으로 이동해서 미리보기 카드 생성에 필요한 정보를 긁어온다.
ogp.me 사이트의 코드를 보면 다음과 같이 메타데이터가 생성되어 있음을 볼 수 있다. 티스토리 공유를 통해 바로 상단에 첨부된 링크의 카드와 비교해볼 수 있다.
이와는 별개로 사용자가 미리보기 카드를 클릭했을 때 웹에서 열릴건지, 모바일일 경우 앱에서 열건지, 앱이 설치되어 있지 않다면 앱 설치 페이지로 이동할건지, 아니면 웹으로 열릴건지... 이런것들을 처리하는 건 딥링크라고 하는 모양이다. 딥링크에 대해서도 여건이 된다면 나중에 공부해보고 싶다.
캐시에 대해서 대략적인 개념은 알고 있었으나, 헤더 구조나 실제 구현을 살펴보니 어려운 부분이 많아서 따라가기 힘들었다. 이 글을 작성하는데도 며칠이 걸렸다. 그래서 현재 단위에서 완벽하게 글을 작성하는건 포기하고 나중에 실력이 더 쌓이면 정리된 글을 다시 써보고 싶다. 이렇게 부족했던 흔적을 남겨두는 것도 나중에 봤을 때 성장의 폭이 보여서 좋지 않을까...
- 참고 링크들
ko.wikipedia.org/wiki/%EC%BA%90%EC%8B%9C
brunch.co.kr/@jiyeonsongofnt/11
'web' 카테고리의 다른 글
| [220730] curl 사용해서 간단하게 rest api 요청하기 (0) | 2022.07.30 |
|---|---|
| [211030] tomcat 자바 실행 옵션 setenv로 설정하기 (0) | 2021.10.30 |
| [201231] emmet 사용법 2. CSS 약어(CSS Abbreviations) (0) | 2020.12.31 |
| [201228] emmet 사용법 1. 약어(Abbreviations) (0) | 2020.12.28 |
| [200927] eclipse 에서 web.xml 생성하기 (0) | 2020.09.29 |
