크롬(Chrome) 캐시 사용 안함 설정 (from disk cache)

2019-10-22 TIL

HTTP 이해

Status code

[2XX : 성공] 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리

• 201 : 없던 자원이 새로 생성이 되었을 때 서버로부터 오는 응답 코드.

[3XX : 리다이렉션 완료] 클라이언트는 요청을 마치기 위해 추가 동작이 필요함. 내가 다 처리못해서 다른 애한테 위임하는 성격

• 301 : Moved permanently

• 302 : Found(HTTP 1.0) - 302 응답코드는 301과는 다르게 서버로 요청이 2번 가는 경우이다.

[4XX : 요청 오류] 클라이언트에 오류가 있음

• 401 : Unauthorized (로그인 실패하는 경우)

• 403 : 그 문서에 대해서 접근 권한이 없다.

• 404 : Not Found

[5XX : 서버 오류] 서버가 유효한 요청을 명백하게 수행하지 못했음

Cookie

• 쿠키는 도메인 별로 설정한다.

• 쿠키 path 설정

• secure 설정을 주면, https 일때만 (보안되어 있는 프로토콜) 쿠키가 유효하다는 설정을 할 수 있다.

• session cookie : 브라우저를 껐다가 켜면 없어지는 쿠키. 브라우저가 켜졌다가 꺼지면 한 session이 끝났다라고 표현이 가능하다.

• persistent cookie : expire time을 주어서 그 기간까지는 유효하게 한다. expire time 헤더가 하나의 기준이다. (ex. 로그인 상태 유지 가능)

성능 개선

정적인 자원에 대한 caching

정적인 자원(img, JS, css)에 대해서 캐싱을 하게 되면 엄청난 성능개선을 할 수 있다.

캐시 설정은 Cache-control 이라는 헤더를 통해 할 수 있다.

브라우저를 켜서 웹 페이지를 로딩할 때 네트워크 탭을 열어서 html파일, JS파일, css 파일 등 파일들을 받아오는 것을 확인해보면 JS, css 파일의 경우 from memory cache, from disk cache 라고 표시되어 있는 경우가 있는데, 이 경우는 파일들이 캐시되어 있어서 파일을 받기 위해 서버에 갔다오지 않았다는 의미이다.

• waiting 시간을 줄이는 것이 중요

• spring boot는 기본적으로 캐시설정이 되어 있다.

• bandwidth를 줄일 수 있다.

• expire time의 url을 바꾸어서 캐시를 무효화

HTTP Compression

압축률은 70% 정도로 서버에서 클라이언트로 리소스를 보낼 때 네트워크 상으로 무거운 것을 주는 것보다는 가벼운 걸 받아 압축을 푸는 것이 낫기 때문에 (압축을 푸는 데에 cpu 비용이 들긴 한다) 압축을 해서 보내면 성능이 향상한다.

응답 헤더에 Content-encoding : gzip 이라고 설정되어 있으면 gzip 알고리즘으로 압축을 풀으라는 의미이다.

이미지 최적화

• CSS sprite : 아이콘들을 하나의 파일로 클라이언트로 전송하여 css로 아이콘의 위치만 지정해준다.

• 구글은 성능개선을 위해 src에다가 이미지 파일을 byte로 변환하여 html 파일을 한번에 받아온다.

크롬 캐시 사용 설정

웹 어플리케이션을 만들 때, 크롬은 기본적으로 캐시가 설정되어 빨리 로드되긴 하지만, 외부 API를 사용하는 경우, 개발자들은 수정한 부분을 바로 확인할 수 없어 불편합니다.

페이지를 다시 열거나 새로고침 했을 때, 이전의 데이터를 캐시로부터 가져오는 것이 아닌, 서버로부터 다시 데이터를 받게 하고 싶다면 아래와 같은 설정을 해야 합니다.

1. 크롬 개발자 도구를 엽니다.

• Mac 경우, option + command + I 단축키로 열고 닫을 수 있습니다.

2. 여러 탭 중에서, Network 탭을 선택합니다.

3. Network 탭 아래 부분의 Disable cache 을 선택합니다.

Disable cache 체크 하나로, 데이터를 바로 확인할 수 있습니다.