WIL 1주차 : 바닐라 JS 마스터의 길

첫 주차 항해를 마무리하면서 작성하는 회고

첫 주차 과제는 바닐라 JS로 SPA 만들기를 하였다. 늘 프로젝트를 하면서 기술부채에 대해 문득문득 떠올렸던 나이기에 이번 과제에서 예상대로 학습부채의 쓴 맛을 보았다. 리액트에서는 이벤트 등록 시점을 신경 쓸 필요가 없어서 이벤트 등록 시점에 대한 고민을 크게 하지 않았다. 이번에 ReferenceError를 겪으면서 너무나 기초적이지만 나는 몰랐던 이벤트 등록 시점에 대해 다시 학습하게 되었다. 늘 기초가 튼튼한 개발자가 되고 싶다는 생각을 하게 되었는데 이번 1주 차를 겪고 항해를 통해 기초가 튼튼한 개발자가 되는 것에 몇 발자국 더 다가갈 수 있겠다는 확신이 들었다. 부지런히 1주 차 과제를 했다고 생각했지만 막상 과제를 하는 시간에는 집중을 잘 못했던 것 같다. 과제 제출 전날부터 벼락치기를 했던 여파가 너무 커서 이번에는 반성하고 진짜 부지런히 2주 차 과제에 임해야겠다는 다짐을 하였다. 과제하다가 피곤해서 내일 마저해야지하고 자러들어가는 것이 아닌 오늘 과제를 어디서부터 어디까지 했는지 앞으로 얼마나 걸릴지를 자기 전에 되짚고 자는 연습을 하면 앞으로 과제 일정관리에 더 도움이 되지 않을까.

🚀 WIL

렌더링 후에 이벤트 등록해 주기

처음 작성한 코드는 render 함수 밖에서 이벤트 등록하는 로직을 작성하였는데 덕분에 계속 ReferenceError를 겪었다. 페이지가 다 그려진 후에 DOM요소를 가져와야 한다는 것을 잊지 말자.

이벤트 위임

이벤트 위임은 비슷한 방식으로 여러 요소를 사용할 때 사용된다.

Hashbang과 HistoryAPI

• hashbang은 url에 #을 넣어서 처리하는 방식인데 사용하려면 hashchange이벤트를 추가해줘야 한다. hashbang는 html 네임 앵커를 사용한 원리이다. hashchange 이벤트와 hash를 추적해 렌더링 될 페이지를 선택한다. 단점은 검색엔진 크롤러가 hashbang을 이용한 SPA 웹을 인식하기 어렵다는 이유로 요즘 SPA에 잘 사용하지 않는다.

const { hash } = window.location

window.addEventListener('hashchange', () => {
  /* ... */
})

• historyAPI는 브라우저에서 세션 히스토리라는 것을 이용해 페이지 이동 기록을 저장한 것을 다루는 방식이다.
• popState, replaceState 로 url을 업데이트할 수 있다.
• history.pushState(state, title[, url]): 세션 히스토리에 새 url 상태를 쌓는다.
• history.replaceState(state, title[, url]) : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다.
  • state : history.state에서 꺼내쓸 수 있는 값이다.
  • title : 변경될 페이지의 title을 가리키는 값인 것 같지만, 거의 대부분의 브라우저에서 지원 X. 빈 string 넣으면 된다.
  • url : 세션 히스토리에 새로 넣을 url이다. a태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게, 이 url이 변경된다고 해서 화면이 리로드(새로고침) 되거나 하진 않는다. 다만, pushState()는 이전 URL과 신규 URL의 해시가 다르더라도 절대 hashchange 이벤트를 유발하지 않는다. 위와 같은 이유로, popstate()나 기타 이벤트를 이용해 pathname을 추적하게 된다
• https://developer.mozilla.org/ko/docs/Web/API/History_API
• https://developer.mozilla.org/ko/docs/Web/API/Window/location
• https://developer.mozilla.org/ko/docs/Web/API/History/pushState
• https://velog.io/@kimin3004/TIL-11JS-Hashbang-history-API