화면의 네비게이션 처리는 매우 중요하다.
플랫폼의 특성을 이해하는데 아주 중요하기도 한데
웹 어플리케이션은 싱글 페이지 어플리케이션 (SPA)
현재 active 한 페이지를 보여주는 형태라고 한다.
새로운 페이지를 가면 새로운 페이지의 html이 로드되는것이다.
앵커태그를 추가하여 페이지 전환을 시도해볼것이다.
타이틀을 클릭할수도 있지만, 댓글을 클릭해서도 페이지가 이동될 수 있는 경우를 고려요소에 넣어야한다.
타이틀이 관심이 가서 클릭할 수도 있지만, 댓글이 흥미로워서 접근할 수 있는 경우가 생기기 때문이다.
이제 앵커를 걸건데, 앵커는 선택돼는 어떤 컨텐츠를 선택했는지에 따라서 바뀌어야하기 때문에, 지금 넣어줄 수 없다.
그러므로 그때 바꾸기 위해서 마킹을 한다.
const CONTENT_URL = "https://api.hnpwa.com/v0/item/@id.json";
이제 이벤트로 UI와 연동할것인데, 보통 검색 버튼이 있어서 그걸 누른다면 작동을 해야한다.
그래서 보통 UI와 이벤트를 연결해서 작동할 수 있게 변경한다.
a링크에 # 을 걸어놓으면 그걸 보통 우리는 해시라고 하는데, 이 해시의 변경값이 생겼을때 이벤트를 발동하게 할 수 있다.
그것이 바로 hashChange이다.
a.addEventListener("click", function (e) {}) --> window.addEventListener("hashchange", function ()
이제 해쉬값에서 데이터를 가져올것이다.
location.hash.substring(1)
ajax.open("GET", CONTENT_URL.replace("@id", id), false);
또한 반복코드는 좋지않다.
동일한 값이 하나 이상이라도 반복되면 작은것이라도 하나 바꾸려면 계속해서 바꿔줘야해서 계속 빼줘야한다.
const container = document.getElementById('root');
