[Final Project] 8/24 (화)

오늘 작업

• 검색창 결과물이 4개 이상일 경우 다 띄울게 아니라 스크롤바로 스크롤하게 만들기
• 스크롤바 사이즈 줄이기
• 방향키로 검색결과 조회 시 스크롤이 자동으로 움직이게 하기

스크롤바 커스터마이징

스크롤바 관련 css 특성은 아직 non-standard 라서 브라우저마다 css 특성 이름이 다르다.

.searchbar-result-ol-scroll{
  height: 250px;
  overflow-y: scroll;
  /* firefox */scrollbar-color:auto;
  /* firefox */scrollbar-width:3px;
}

/* for Webkit browsers(Chrome, Safari and Opera) */

.searchbar-result-ol-scroll::-webkit-scrollbar {
  /* display:none; 스크롤바를 없애고 싶을 때*/
  width: 5px;
  /* background-color: #fff; 스크롤바 배경색 변경*/
}
.searchbar-result-ol-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

참고자료
https://stackoverflow.com/questions/4053220/how-can-i-increase-a-scrollbars-width-using-css
https://css-tricks.com/custom-scrollbars-in-webkit/

스크롤바 자동 이동

React useRef hook 을 이용하여 스크롤바를 가지고 있는 element 를 가져온 후, scrollTop(스크롤의 y 위치값), scrollHeight(스크롤바의 전체 길이) 특성과, scrollTo() 함수를 이용하여 스크롤을 특정 위치로 움직이게 만들 수 있다.

function declaration vs function expression

https://javascript.info/function-expressions
Javscript info 에서는 특별히 expression 을 써야 할 이유가 있지 않은 이상 declaration 을 쓰기를 추천한다. 왜냐하면,

1. hoisting 이 가능해서 코드 순서를 원하는 대로 정할 수 있고,
2. 일반 변수와 함수를 구분할 때 가독성이 더 좋기 때문에다.

비록 우리 프로젝트에서는 expression 을 쓰고 있지만... 내 개인 프로젝트에서는 declaration 을 사용해야겠다.