자바스크립트로 css 캐시문제 해결하기 정보
자바스크립트로 css 캐시문제 해결하기
본문
css파일 또는 js파일의 캐시문제는
사실 php 에서 파일을 수정한 시간을 경로 꼬랑지로 주는 것이 가장 현명한 방법입니다.
현재의 날짜 등을 주면 입방시마다 트래픽이 빨리니까요.
위에 대한 방법은 냑에서 많은 분들이 배포를 하셨구요.
그러나 내가 php 등을 사용하지 못하고 html 문서 밖에는 사용할 수 없는 환경이 생길 수도 있습니다.
이 때를 대비해서 자바스크립트 함수를 하나 만들어 보았습니다.
<link rel="stylesheet" data-css="cache">
.
.
.
<script>
cacheCss = (...css) => document.querySelector("link[data-css=" + css[1] + "]").href = css[0] + "?mode=" + new Date().getTime();
cacheCss("css파일경로", "cache");
</script>
설명을 좀 드리면 href 가 없는 <link> 를 만들고
나중에 자바스크립트에서 href 를 입력해 주는 방법입니다.
new Date().getTime() 은 1970년 1월1일부터 현재 웹페이지에 입방한 시간까지의 차이숫자입니다.
그러니 매입방시마다 다르겠지요.
주의사항은 아래의 cache 는 아무 문자열을 사용해도 괜찮지만 동일한 문자열이어야 합니다.
<link rel="stylesheet" data-css="cache">
cacheCss("css파일경로", "cache");
함수를 만들었기 때문에 같은 패턴으로 여러개의 css 호출이 기능합니다.
단 이 방법은 페이지입방시마다 트래픽이 빨리는 단점이 있으니 php 를 사용하지 못하는 환경에서만 사용하세요.
불행하게도 js 는 이 방법으로 안 되구요.
인터넷상에는 js 를 이런 방식으로 된다고 올려논 게시글을 몇개 보았는데 그거 다 테스트는 해보지 않고 머리속으로만 궁리한 코드입니다.
다음에는 js 파일에 관한 방법을 올려 드릴게요.
2
댓글 6개
어려워서 이해가 않됩니다.
음... 화살표함수나 대괄호로 타겟요소를 지정하는 방식이 생경해서일까요?
이걸 함수없이 쓰면 아래처럼 됩니다.
<link rel="stylesheet" data-css="cache">
<script>
document.querySelector("link[data-css='cache']").href = "css파일경로?mode=" + new Date().getTime();
</script>
이게 이해가 안 가시면 data 를 id 로 치환해 보세요.
<link id="myCss" rel="stylesheet">
<script>
document.getElementById("myCss").href = "css파일경로?mode=" + new Date().getTime();
</script>
모던 스크립트에서는 document.getElementById() 보다는
document.querySelector() 를 사용합니다.
<link id="myCss" rel="stylesheet">
<script>
document.querySelector("#myCss").href = "css파일경로?mode=" + new Date().getTime();
</script>
document.querySelector(".my-css") 는 class="my-css" 를 가진 첫번째 요소를 의미합니다.
아이디는 하나뿐이나 클래스는 여러개일수 있기 때문에 All 을 붙여 배열화 시킬수 있습니다.
document.querySelectorAll(".my-css")[0]
document.querySelectorAll(".my-css")[1]
document.querySelectorAll(".my-css")[2]
만일 아래와 같다면
<div id="myDiv><a><span class="my-span></span></a></div>
document.querySelector("#myDiv a .my-span") 로 부르지요.
만일 input 중에서 name="my_name" 을 가진 애들 중 두번째를 부른다고 하면 대괄호롤 사용합니다.
document.querySelectorAll("input[name='my_name']")[1]
만일 input 안에 name="my_name" 을 가진 모든 애들을 호출하려면 forEach 나 for of 를 사용합니다. 저는 for of 를 씁니다.
에를 들어 아래처럼 쓰면 모든 애들의 색깔이 "red" 로 바뀌죠.
for (i of document.querySelectorAll("input[name='my_name']")) {
i.style.color = "red";
}
만일 두번째 애만 "blue" 로 주고 나머지는 모두 "red" 로 주려면 카운터변수를 하나 만들어서 루프를 돌릴때마다 1씩 더해서 해결하면 되구요.
<script>
count = 0;
for (i of document.querySelectorAll("input[name='my_name']")) {
i.style.color = count == 1 ? "blue" : "red";
count += 1;
}
</script>
다시 처음으로 돌아와서 id 를 대괄호 처리해도 됩니다.
<link id="myCss" rel="stylesheet">
<script>
document.querySelector("link[id='myCss']").href = "css파일경로?mode=" + new Date().getTime();
</script>
그런데 <link> 엘리먼트에 아이디나 클래스를 주는 것은 너무 "괴이"한 것 같아서 data 속성을 하나 만들어서 대괄호로 타겟을 준 것입니다.
@비타주리 과외공부 감사 합니다. 이제 머리에 녹이..
그러니까
getElementById()
getElementsByClassName()
document.getElementsByName()
getElementsByTagName()
위와 같은 건 다 아래로 치환할 수 있습니다.
요즘은 다 아래처럼 바꾸는 것이 추세입니다. 뭐 본인 선택의 몫이지만요.
특히 document.querySelectorAll 은 replaceAll 과 함께 크롬에서 사용할 수 있게 된 것이 2년 3년 정도 된것 같아요. 아주 유용합니다.
document.querySelector()
document.querySelectorAll()
무슨 내용인지 이해가 안되네용;;
css 파일을 동적 로딩하는걸 의미하는것 같기도 하고 모르겠네요.
<script>
document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'stylesheet', href: './test.css?'+Date.now() }));
</script>
맞습니다. 결국
document.head.append(document.createElement("link"));
document.head.lastChild.rel = "stylesheet";
document.head.lastChild.href = "css경로";
와 같은 거지요.
