성능 최적화하기 - (11) 캐시 최적화

 

◽ 캐시 설정하기

 

 

 

◽ 캐시의 종류

1. 메모리 캐시

메모리상에(RAM) 저장

 

2. 디스크 캐시

디스크에 file로 저장

 

 

 

◽ Cache-Control

Http Header에 들어가는 값으로 서버에서 설정해야 한다.

- 요청: 나 어떤 이미지가 필요해

- 서버: 니가 이미지가 필요하구나? 가져가

 

 

 

◽ Cache-Control의 5가지 속성

1. no-cache

캐시를 사용하기 전에 서버에 검사 후 사용을 결정한다. 요청한 이미지가 다르면 캐시된 이미지를 사용하지않고 다시 보내준다.

max-age=0과 같다.

캐시 시간이 만료되더라도 브라우저는 리소스를 갖고있다.

새로 다시 리소스를 요청할 때 만료된 데이터에 대해 다시 사용해도되는지 검사한다.

 

2. no-store

캐시를 사용하지 않음

 

3. public

모든 환경에서 캐시 사용 가능

 

4. private

브라우저 환경에서만 캐시를 사용하는 옵션.

외부 캐시 서버에서는 사용이 불가하다.

 

5. max-age

캐시의 유효시간으로 초단위이다.

 

ex)

cache-control: provate, max-age=600

cache-control: no-cache

 

 

 

◽ Cache-Control 설정하기

const express = require('express')
const app = express()
const port = 5001
const path = require('path')


const header = {
    setHeaders: (res, path) => {
        // max-age=20로 설정했다.
        res.setHeader('Cache-Control', 'max-age=20')
    },
}

app.use(express.static(path.join(__dirname, '../build'), header))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build/index.html'))
})

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

 

캐시가 적용되어 있다.

 

 

304: 서버에서 확인했을 때 수정되지 않은 리소스이면 304가 떨어진다.

 

 

ETag라는 지시문에서 수정되었는지 아닌지 확인할 수 있다. ETag는 리소스에 대한 해시이다.

서버에 확인요청 시 이미지를 보내는게아니라 ETag를 보낸다.

서버에서는 확인해보고 태그가 변하지않았으면 해당 리소스가 변하지않았다고 판단한다.

 

ETag

 

 

◽ Cache-Control 리소스 별로 설정하기

1. HTML

no-cache를 사용한다.

항상 최신 리소스를 사용해야하기 때문!

 

2. JS

public를 사용한다.

html이 최신으로 유지되는 한 최신 js를 호출한다.

max-age=무한(=일주일, 한달 등의 긴 시간으로 지정하는 것)으로 사용한다.

 

3. CSS

public를 사용한다.

max-age를 긴 시간으로 사용한다.

 

4. IMG

public를 사용한다.

max-age를 긴 시간으로 사용한다.

 

📄 예제

const express = require('express')
const app = express()
const port = 5001
const path = require('path')

const header = {
    setHeaders: (res, path) => {
        if(path.endsWith('.html')) {
            res.setHeader('Cache-Control', 'no-cache')
        } else if(path.endsWith('.js') || path.endsWith('.css') || path.endsWith('.webp')) {
            res.setHeader('Cache-Control', 'public, max-age=31536000')
        } else {
            res.setHeader('Cache-Control', 'no-store')
        }
    },
}

app.use(express.static(path.join(__dirname, '../build'), header))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build/index.html'))
})

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

 

 

 

---

 

 

 

출처

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의