SPA
SPA : Single Page Application의 준말로, 여러 페이지를 html로 작성해 여러 페이지를 옮겨다니는 것이 아닌, html 하나에 javascript 등으로 여러가지 컴포넌트를 제작해 컴포넌트를 변경시켜주는 것으로 페이지 이동 효과를 주는 방식
오늘 SPA가 왜 나왔는가 하면.. 바로 EventListener 때문이다.
SPA의 특징인 원페이지 방식 때문에 window에 이벤트를 걸어줄 경우, 다른 페이지 컴포넌트로 넘어가도 이벤트가 사라지지 않고 그대로 유지되는 경우가 생기게 된다.
내가 작성했던 코드의 경우, location pathname이 변경되었을 경우, 헤더의 로고 이미지 사이즈가 scale(1)이 되도록 작성했었다.
하지만 의도와 다르게 첫 화면에서는 scale1을 유지하고있지만 스크롤 이벤트가 발생할 경우 실행시키지 않고 싶었던 함수가 실행되었다.
여러 삽질을 진행하다가 멘토님께 들고 갔고, 그제서야 React가 SPA 기반 UI 관리 프레임워크라는 사실과 함께 함수가 계속해서 실행되는 이유를 깨닳을 수 있었다.
function sayHello(){
console.log("hello");
}
window.addEventListener("scroll",sayHello,true);
window.removeEventListener("scroll",sayHello,true);이렇게 이벤트 리스너를 잘 지워줘야 이벤트가 중복으로 발생되거나, 다른 페이지 컴포넌트로 넘어갈 경우 이벤트가 재발생 되는 경우를 막을 수 있다.
git reflog
fatal: OfflineLoading cannot be resolved to branch.git에 push하기 위해서 열심히 터미널을 뚝딱뚝딱 하고있었는데 갑자기 이런 에러를 만났다.
직전 작성했던 commit 내역을 지우기 위해 이것저것 찾아보다가 그만..
git reset --hard HEAD~3명령어를 치고 나니.. 오늘 한 내용들이 싹 날아가는 매직을 경험할 수 있었다.
완전 멘붕이 제대로 와서 열심히 찾아본 결과 다행히 git reflog로 이전 내역들을 불러오고, 그 당시 내역으로 돌아갈 수 있었다.
$ git reset --hard 3477df6이런 식으로..! 다행히 내역을 잘 불러왔고ㅠㅠㅠㅠ
이벤트나 component 위치 맞춘 것도 잘 데려올 수 있었다..!
