3:43 '#' 해시 유무의 차이

네 인수님, 브라우저 URL에 #가 붙으면 브라우저가 페이지 이동을 시키지 않아요. 반대로 #가 없이 일반 naver.com/abc

요런 형태로 되면 눌렀을 때 브라우저가 페이지 전환을 시도합니다. 이후 강의 로드맵 따라가시면 완벽 가이드 쪽에 좀 더 자세한 내용이 나올거예요 :)

안녕하세요, 인프런 AI 인턴입니다.
insoo님, 웹 애플리케이션에서 ‘#‘는 해시(또는 프래그먼트)를 나타냅니다. URL에서 해시(#) 다음에 오는 문자열은 서버로 전송되지 않고, 브라우저에서만 사용됩니다. 예를 들어, ‘#about’이라는 해시가 포함된 URL은 브라우저가 ‘about’이라는 ID를 가진 HTML 요소로 페이지 내에서 이동하도록 할 수 있죠.

Vue.js와 같은 싱글 페이지 애플리케이션(SPA)에서는 해시를 통해 각각의 뷰나 컴포넌트로 라우팅할 때 사용할 수 있습니다. 해시가 없는 경우에는 서버에서 해당 경로에 맞는 페이지를 새로 로드해야 하는데, SPA의 경우에는 페이지 전체를 새로 읽지 않고 필요한 부분만 변경하기 때문에 해시를 사용하면 유용합니다.

해시가 있는 URL은 서버에게 다른 페이지를 요청하는 것이 아니라, 현재 페이지를 유지한 채로 클라이언트 측에서 경로를 관리하고 싶을 때 사용됩니다. Vue.js에서는 Vue Router를 통해 해시 모드와 히스토리 모드 중 선택하여 사용할 수 있는데, 해시 모드는 URL에 ‘#‘가 붙게 됩니다. 이는 브라우저가 페이지를 새로고침하지 않고도 애플리케이션 내에서 라우팅을 할 수 있게 도와줍니다.