엣지, 크롬 새로고침 단축키 - 개발자 새로고침 방법

[엣지, 크롬 새로고침 단축키 - 개발자 새로고침 방법] 

웹사이트의 페이지를 다시 열 때 새로고침을 누릅니다. 이때 새로고침 단축키를 누르면 더 편리하므로 알아두면 좋습니다. 또한 웹사이트 변경 내용을 확인할 때 웹개발자는 새로고침을 더 많이 사용하게 됩니다. 웹개발자가 알아둘 새로고침 단축키도 함께 알아봅니다. (윈도우 OS 기준) 

[엮인 글]

스크롤 때 상단 고정 코드 - 상단 고정 레이어 스크립트

일반 사용자용 새로고침 단축키 

'새로고침'이란 서버로부터 내 PC나 스마트폰으로 홈페이지 등의 내용을 다시 보내달라는 것입니다. 인터넷이란 서버에서 데이터를 받아서 보는 것인데, 브라우저는 속도를 높이기 위해 매번 "새로 받지는 않고 저장했다가 보여"주게 됩니다. 

(새로고침을 눌러도 작업내용으로 변하지 않으면 고민에 빠지게 된다 [엣지, 크롬 새로고침 단축키] / ⓒ StockSnap)

다운 시간을 줄여서 로딩 시간을 줄이자는 기능이지만, 어떤 때는 새 정보를 가져오지 않는 문제점을 발생시킵니다. 이때 브라우저에게 지난번 방문했을 때 저장한 것 말고 다시 접속해서 데이터를 다시 받으라는 명령이 바로 새로고침입니다. 

(PC나 모바일 등에 따라 새로고침의 방법과 적용이 달라진다 [엣지, 크롬 새로고침 단축키] / ⓒ fancycrave1)

새로고침 방법 

• 모바일 : "동그란 화살표"를 누르거나 "화면을 아래로" 잡아끌면 됩니다. 
• PC : "동그란 화살표"를 누르면 됩니다. 
• PC에서의 새로고침 단축키 : 키보드 위쪽의 'F5'를 누르면 됩니다. 

이렇게 해도 안될 때는 아래의 방법을 이용하면 됩니다. 

개발자가 알아둬야 할 새로고침 단축키 

그런데 문제가 생깁니다. 브라우저에 따라 새로고침 단축키를 눌러도 제대로 새로고침을 하지 않는 경우가 종종 있습니다. 어떤 브라우저는 글자만 새로고침 하고 스크립트를 그냥 놔두기도 하고, 어떤 브라우저는 이미지를 계속 저장 폴더에서 불러옵니다. 

(새로고침이 잘 되지 않는 이유는 일부만 새로고침되기 때문이다 [엣지, 크롬 새로고침 단축키] / ⓒ FirmBee)

새 인터넷 데이터와 지난 데이트를 비교해서 내용이 같으면 새로 받지 않고 로딩 시간을 줄이자는 의도지만, 이름만 같고 내용이 다른 새 파일을 다운로드하지 않아서 화면이 바뀌지 않는 문제점이 있습니다. 특히 웹제작자의 경우 새로 작성한 페이지가 변경되지 않은 것 같은 착각을 하고는 코드에 문제가 있는지 삽질을 하게도 됩니다. 

(웹제작자의 경우 디자인이 바뀌지 않을때 웹개발자모드를 살펴보는 것이 좋다 [엣지, 크롬 새로고침 단축키] / ⓒ Free-Photos)

이런 경우를 대비해서 '크롬' 새로고침 단축키는 여러 가지가 있다는 것을 알아두면 좋습니다. 즉 일반적인 새로고침인지 완전히 다 리로딩을 해야 하는 것인지를 새로고침 단축키를 통해 선택할 수가 있다는 것입니다. 웹제작자는 작업 중 아래 단축키들을 눌러보면서 어떤 차이가 있는지를 알 수 있습니다. 

크롬 새로고침 단축키 종류 비교 

• Ctrl + R : 일반 새로고침 단축키. (F5와 같은 기능) 
• Ctrl + Shift + R : 저장된 캐시를 무시하고 완전히 다시 새로고침 하는 단축키. (Shift + F5와 같은 기능) 

이상의 크롬 새로고침 단축키를 적용해보면 브라우저가 사용자의 선택에 따라 리로딩을 수행하도록 하는 기능을 가지고 있다는 것을 알게 됩니다. 구글 크롬은 F5키와 관계없이 Shift가 관여하면 완전히 다시 리로딩하는 새로고침을 한다고 기억하면 됩니다. 또한 브라우저 새로고침 버튼에서 마우스 오른쪽 버튼을 눌러봐도 알 수 있습니다. 

익스플로러, 엣지 새로고침 단축키와 비교 

그러나 이는 사용자 편의를 위해서 크롬 브라우저에 추가된 기능일 뿐 모든 웹브라우저의 기본 기능이 아닙니다. 구글의 크롬 새로고침 단축키와 달리 MS '엣지' 새로고침 단축키는 비슷한 듯하면서도 약간 다릅니다. 

엣지 새로고침 단축키 종류 비교 

• Ctrl + R : 일반 새로고침 단축키. (F5와 같은 기능) 
• Ctrl + F5 : 저장된 캐시를 무시하고 완전히 다시 새로고침 하는 단축키. 

보는 바와 같이 MS 엣지에서는 Ctrl과 F5가 만났을 때에만 완전 리로딩 새로고침이라고 기억해야 합니다. 이것은 익스플로러 때와 같습니다. 즉 MS의 브라우저는 완전 새로고침이 항상 Ctrl + F5입니다. 

(새로고침 방법에는 낮은 새로고침과 깊은 새로고침이 있다는 것이다 [엣지, 크롬 새로고침 단축키] / ⓒ StockSnap)

일반 사용자는 새로고침을 할 기회가 많지 않지만 웹개발자는 새로 만든 코딩과 이미지가 잘 적용되는지 자주 확인하게 되므로 브라우저별 새로고침 단축키를 잘 기억해 두는 것이 좋겠습니다. "왜 변화가 없지? 내가 잘못 코딩했나?"하고 오해를 하면 엄청난 고민에 빠지게 되니 말입니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)

(크롬, 오페라, 엣지 등 여러가지 브라우저를 동시에 사용하는 것도 좋은 방법이다 [엣지, 크롬 새로고침 단축키] / ⓒ diegovr7)

그리고 모바일 브라우저에서는 새로고침 단축키를 쓸 수가 없어서 답답합니다. 모바일에서는 크롬 브라우저에서 새로고침이 잘 안되면 크롬보다 새로고침이 강력한 '오페라 브라우저'를 사용하는 것도 하나의 방법입니다. 

마지막으로 개발자가 더 알아두면 좋은 방법은 크롬에서 F12를 눌러 개발자 모드를 여는 것입니다. 그 후 새로고침 아이콘을 계속 누르고 있으면 여러 가지 새로고침 메뉴를 볼 수 있습니다. 

[엮인 글]

메뉴/팝업 등에 써먹기 좋은 "떠있는 고정 레이어"코드 만들기