wish me luck

html, css, js 파일 등 웹 서버에 파일을 올렸는데 적용이 안된 경험을 한 적이 있는가?

이런 경우에 패치된 내용을 확인할 수도 없고 원인을 모른다면 정말 답답한 상황이 찾아온다.

이러한 현상이 일어나는 이유는 방문한 페이지를 다시 접속할 때 더 빠르게 보여주기 위해서 웹 브라우저에서 웹 캐시(문서, 그림, 파일 등)를 저장하기 때문이다.

이러한 기능 덕분에 우리는 더 빠른 페이지 로딩이 가능하지만 때로는 오래된 정보를 보여주는 경우가 생기기도 한다.

앞서 말한 새로운 파일이 적용이 안된 이유도 이것 때문이다.

그래서 우리는 웹 브라우저에서 캐시를 무시하거나 지우는 방법에 대해 알아야 한다.

OS와 브라우저에 맞는 방법을 찾아 여러 가지 방법들을 해보면 좋을 것 같다.

[캐시 무시하기]

1. 인터넷 익스플로러

Ctrl + F5(새로 고침)

2_1. 구글 크롬(window)

Ctrl + F5(새로 고침)

Shift + F5(새로 고침)

2_2. 구글 크롬(mac)

Cmd + Shift + R

2_3. 리눅스

Ctrl + F5

3_1. 사파리(버전 4 이상)

Shift + 새로 고침

3_2. 사파리(버전 3 이하)

Cmd +  R

4. 오페라

Ctrl + F5(새로 고침)

Shift + F5(새로 고침)

5. 캉커러

F5(새로 고침)

[캐시 지우기 & 설정 끄기]

1. 인터넷 익스플로러

* 캐시 지우기

1. Ctrl + Shift + Del

2. '임시 인터넷 파일 및 웹 사이트' 체크

3. '삭제' 버튼

* 캐시 설정 바꾸기

도구 -> 인터넷 옵션 -> 검색 기록 -> 설정 -> 캐시 및 데이터베이스 ->'웹 사이트 및 데이터베이스 허용' 에서 변경

2. 구글 크롬

* 캐시 지우기

1. Ctrl + Shitf + Del

2. '다음 항목 삭제' 옆 목록에서 '전체' 선택

3. '캐시 삭제' -> '인터넷 사용정보 삭제'

3. 파이어폭스

* 캐시 지우기

1. Ctrl + Shift + Del

2. '삭제할 기간' -> '전체' 선택

3. '캐시' 선택 -> '지금 삭제' 클릭

* 캐시 설정 바꾸기

설정 -> 고급 -> 네트워크 -> '자동 캐시 크기 관리' 체크 후 '제한 용량' 값 '0' 으로 변경

BMP, JPG 등 이미지 이름 끝에 붙는 확장자들을 보면서도 우린 무슨 차이가 있는지 알지 못합니다. 그래서 그 차이를 설명하려고 합니다.

1. BMP ( Microsoft Windows Device IIndependent Bitmap )

: DOS와 윈도우 호환 컴퓨터에서 사용되는 Bitmap 이미지이다. 압축을 지원하지 않아 지나치게 높은 파일 용량이 문제가 되어 웹용 이미지에 적합하지 않다는 단점이 있다. 최근 BMP 파일도 압축을 지원하기 시작했다.

2. PNG ( Portable Network Graphics )

: 배경이 투명한 파일을 만들거나 저장할 때 많이 쓰이며 색상을 최대한 그대로 유지할 수 있기 때문에 최근에 많이 쓰이고 있다. 단점이 있다면 색상을 그대로 유지시키는 만큼 파일 용량이 크다.

3. GIF ( Graphic Interchannge Form )

: JPG나 PNG 파일 형식과 비교했을 때 파일 크기가 작다는 장점이 있으며, 투명한 배경과 움직이는 이미지를 만들 수 있다는 장점이 있다. 단점으로는 표현할 수 있는 색상 수는 최대 256가지 뿐이다. 그래서 웹 페이지에서는 아이콘이나 불릿 등 작은 이미지에 주로 사용하고 있다.

4. JPG, JPEG( Joint Photographic Experts Group )

: 사진을 웹 페이지에 넣기 위해 개발된 형식이다. 컴퓨터에서 저장할 때나 디지털 카메라에서 저장할 때 많이 쓰이는 확장자이다. JPG와 JPEG 차이는 없으며 정식 명칭은 JPEG 이지만 윈도우와 도스에서는 확장자가 3자리로 표시되어 JPG로 쓰인 것이다.

5. PSD ( Periscope Debugger Definition )

: 포토샵에서 저장할 때 쓰는 확장자이다. 포토샵에서 작업을 했을 때 사용한 레이어들을 하나하나 다시 사용할 수 있기 때문에 계속된 작업이나 수정을 할 때 중요하다. 다른사람이 사진을 수정할 수 있게 하고 싶다면 사진과 함께 PSD 파일을 주면 좋다.

6. TIFF ( Tagged Image File Format )

: TIFF는 무손실 압축방식의 파일이다. 최대한 원본 그대로 보존해야하는 중요한 이미지에 쓰는 확장자이며 데이터 손실이 최소화 된다. 단점으로는 용량이 매우 높기 때문에 많이 사용하진 않는다.

7. SVG (Scalable Vector Graphics )

: 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식이다. 이미지 또는 이미지에 채도, 투명도 등을 더하면  XML 텍스트 파일로 정의되어 검색화, 목록화, 스크립트화가 가능하며 압축 역시 가능하다.

AI, PXR 등 여러가지 이미지와 관련된 확장자들이 있습니다. 

그렇지만 '이 확장자가 제일 좋다' 라는 것은 없습니다. 물론 자주 쓰이는 확장자들은 있습니다. PNG, GIF, JPG, PSD 가 대표적으로 많이 쓰이는 확장자들이죠. 그 외의 것들이 나쁘다라는게 절대 아닙니다. 사용자의 용도에 맞게 사용하는 것이 가장 중요하며 그러기 위해 많은 확장자들이 존재하는 것이 아닌가라는 생각이 듭니다.