강사님께 문의드려보니
favicon.ico 파일 자체에 문제가 없다면, 브라우저 파비콘 캐시 문제일 수 있습니다.
강력 새로고침(Cmd + Shift + R)을 해보거나 혹은 <link rel="shortcut icon" href="./favicon.ico" /> 코드를 추가한 후 브라우저에서 확인하고 다시 코드를 삭제하는 방법을 사용할 수도 있습니다.(그대로 두어도 되고요)
강사님의 답변에 따라 강력 새로고침을 해보니
파비콘이 바로 똬앟 !
브라우저 캐시 문제인가보다..
캐시에 대해 몰라 좀 더 알아보고자 조사한 내용은 다음과 같다.
캐시(Cashe)란 무엇일까?
컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 메모리 장소를 가리킨다.
캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.
캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있다.
그러한 측면에서 시스템의 효율성을 위해 여러 분야에서 두루 쓰이고 있다.
캐시의 작동 방식
자주 쓰이는 데이터(Hot data)들을 복사해 캐시 공간에 저장해 둔다.
데이터 요청이 들어오면 먼저 캐시 공간 내부에 존재하는지 확인하여 존재한다면 캐시에서 해당 데이터를 제공받는다.(Cashe hit)
하지만, 요청한 데이터가 캐시에 들어있지 않거나(Cashe miss) 너무 오래되었다면(Expiration) 원본 데이터가 있는 곳으로 접근해 가져오고 동시에 캐시에도 복사하거나 또는 갱신한다.
캐시 공간은 크지 않기 때문에 공간이 부족하게 되면 사용하지 않는 데이터부터 삭제해 저장 공간을 확보한다.(Eviction)
캐시(메모리)의 종류
㉮ CPU 캐시 : 대용량의 메인 메모리에 접근하는 것을 빠르게 하기 위해 CPU 칩 내부나 바로 옆에 탑재하는 작은 메모리이다. 대부분의 CPU는 1~6개까지의 서로 다른 기능을 가진 CPU 캐시를 장착하고 있다.
주 메모리 접근 속도의 향상보다 CPU 처리 속도 향상이 더욱 크기 때문에,
이 CPU 캐시가 현재 마이크로프로세서 성능에 직접적인 영향을 미치게 되었다.
SRAM(Static Random Access Memory)이라는 특수한 메모리를 CPU에 넣어 캐시 메모리로 사용하고 있다.
속도가 빠르고 메모리 용량이 작은 캐시 순으로 L1, L2, L3이며 필요한 데이터를 검색하는 순서도 이와 같다.
㉯ 디스크 캐시(디스크 버퍼) : 대부분의 하드 디스크는 디스크 제어와 외부와의 인터페이스를 관장할 작은 컴퓨터가 내장되어 있으며, 그 안에 디스크에 입출력되는 데이터를 저장하는 작은 메모리이다. 최근 사용된 디스크 블록을 메모리에 캐시해놓는다. 하드디스크, 데이터베이스 등에서 활용된다.
㉰ 페이지 캐시 : 운영 체제의 메인 메모리를 하드 디스크에 복사해 놓는 캐시이다.
㉱ HTTP 캐시(웹 캐시) : 브라우저가 서버에 리소스(데이터)를 요청하여 받는데, JS나 CSS같은 정적 파일들을 브라우저 캐시에 저장해놓고 재사용한다. 단, 서버는 리소스를 응답해 보내줄 때 해당 리소스를 캐싱할 수 있는 시간(Max-Age)을 HTTP Cashe-Control Header에 명시하여 보냄으로써, 서버에 생겨있을지도 모르는 변화에 대처할 수 있게 해준다. 혹 서버에 있는 원본 데이터에 변화가 없다면 데이터 내용을 기준으로 해시값을 만든 Etag를 If-None-Match Header에 담아 서버에 보냄으로써, 변화가 없으면 같은 값의 Etag를 보내 확인하여 브라우저가 가지고 있는 캐시 데이터를 그대로 계속 사용하게 함으로 불필요한 네트워크 비용이 발생하지 않게 장치한다.
다만 etag는 캐싱 시간이 만료된 뒤에 작동한다.
그래서, CSS와 같은 정적 파일은 만료 시간을 길게 두는 편(max-age=31536000(1년))인데 만료 시간동안 원본 데이터가 업데이트 되었음에도 캐시 데이터를 계속 사용해야 되지 않도록 리소스 URL을 변경하는 방식으로 해결한다. 브라우저는 리소스 URL이 바뀌면 새로운 데이터로 인식하기 때문에 데이터가 업데이트 되면 파일의 디지털 지문이나 업데이트시마다 설정되는 버전 번호를 파일 이름에 포함하여(ex. style.3ba78kf.css) URL이 아예 바뀌도록해서 캐시 데이터가 아닌 업데이트된 데이터를 가져오도록 한다 !
Etag, Cashe-Control(캐싱 기간 설정), 파일 버전 번호를 통해 효율적으로 캐싱할 수 있게 된다.
이 외에도 서버에서 생성한 HTML을 캐싱해 두었다가 다음 번 요청에 재활용하는 응답 캐시, 클라이언트에서 자주 요청받는 내용은 웹 서버에 전달하지 않고 웹 서버 앞단의 프록시 서버에서 캐싱해둔 데이터를 바로 제공하는 프록시 캐시가 있다.
CDN(Content Delivery Network) 공유 캐시 : 여러 사용자를 위한 캐시로, 큰 단위의 사용자들 근처에 캐시 서버를 두어 전송속도를 높이고 부하를 분산하는 시스템으로 활용되고 있다. ex. YouTube의 Google Global Cashe
'컴퓨터 사이언스 > 에러(error) 노트' 카테고리의 다른 글
autoprefixer와 postcss 동시에 설치할 때 오류나는 경우 (0) | 2022.10.14 |
---|---|
git commit error: pathspec '메세지'' did not match any file(s) known to git (0) | 2022.09.23 |
VS Code에서 npm 설치 후 실행이 안 될 때 (0) | 2022.08.22 |
JSX 문법 작성시에도 VSCode에서 EMMET 기능 사용하고 싶을 때 (0) | 2022.08.19 |
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. (0) | 2022.08.17 |