project - 두 번째 기록

1 번째 기록 때에 이은 코드와 세션 때 내용기록

두 번째 기록

👉 스크롤 내릴 때 따라오는 사이드바

지난번 시연 영상을 보다보면 이렇게 생긴 사이드바가 스크롤을 내릴 때마다 따라오는 것을 볼 수 있다.
처음에는 sticky를 통해 구현하려고 했다.
position: sticky 는 선언한 영역의 위치값을 고정시켜주는 역할을한다. 평소에는 relative처럼 동작하다가 스크롤 컨테이너 등에서 스크롤 액션 등이 발생하면 fixed 속성처럼 화면에 고정이 되는 것이다.
주의할 점은 sticky는 left,top값을 반드시 지정해줘야 sticky 속성을 적용할 수 있다.
position: fixed와 다른 점은 position: sticky를 썼을 경우에는 sticky 선언한 영역의 부모 요소 안에서만 고정되어 스크롤에 따라 움직이게 된다. footer까지 내려가지않아서 이번 경우에 쓰면 좋겠다 생각했지만 문제는 sticky는 right이 먹지않아서 오른쪽에 정렬시키기 위해서는 left를 2000가까이 줬어야했다.

그래서 생각해낸 다른 방법❗️스크롤 이벤트를 이용했다.

지난번에 설명했던 componentDidMount안에 브라우저에 스크롤 이벤트를 적용하도록 addEventListener를 사용해줬다. 또한 removeEventListener를 통해 이벤트 리스너를 제거해줬다.

DOM.getBoundingClientRect()를 사용하면 대부분의 브라우저를 지원하면서 가장 쉽고 빠르게 DOM 엘리먼트의 위치 값을 가져올 수 있다.
이를 통해 top 이 0보다 클때까지는 사이드바가 100만큼만 띄어지게 해주고 0보다 작아지면 window.scrollY를 통해 사이드바가 수직으로 얼마나 스크롤됐는지 알아내서 사이드바 위의 header 높이인 1000만큼을 빼준만큼 내려가도록 해주었다.

사실상 이 방법도 DOM을 사용해야해서 멘토님께서 추천하지는 않는다고 하셨다. 다음에 기회가 된다면 다른 방법을 시도해봐야겠다.

써보지 못해 아쉬웠던 내용

Application 패널에 관해서 메인페이지에서는 사용해볼 기회가 없어서 개인적으로 아쉬웠다. 혹시나 모를 다음 프로젝트를 위해 세션 때 공부했던 내용을 정리해보았다.

Application 패널

Application 패널의 기능
현재 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트,데이터)를 열람할 수 있는 패널로 쉽게 말해서 브라우저에서 저장할 많은 저장소들과 캐시,스토리지들이 많이 있다. 로그인 관련한 유저 정보에 대한 부분도 있기때문에 매우 중요한 패널이다.

차이점

local storage: 사용자가 데이터를 지우지 않는 이상 브라우저에 계속 남아있다. 데이터의 영구성이 보장된다. 모든 데이터는 문자열로 변환된다. (value가 문자열로 저장)

session storage: 윈도우나 브라우저의 탭을 닫으면 제거된다.

cookie: 만료 기한이 있는 key-value 저장소이다. 프론트-백엔드의 통신과 관련이 있기 때문에 용량이 작다 (4킬로바이트)

어떤 데이터를 어디에 저장?

local storage: 보안이 중요한 영구 데이터 (자동 로그인), 영구적으로 저장되어도 상관없는 데이터들 (이전에 검색했던 기록들)

session storage: 보안이 중요한 임시 데이터 (은행 로그인), 민감한 데이터 혹은 (비로그인 장바구니), 언어선택

cookie: 빠른 처리가 필요한 임시 데이터(광고 팝업, 팝업창), 웹페이지 개인화와 임시 데이터 보관에 사용된다.

local storage 에 특정 데이터를 저장하고 가져오는 방법

• localStorage.setItem("key","value")
• sessionStorage.setItem("key", "value")

storage에 접근해서 값 가져오는 방법

• localStorage.getItem("key")
• sessionStorage.getItem("key")