<TIL id="20210910금">멘토링__클론프로젝트, CSS</TIL>

1. 스크롤 높이 체크

(window.innerHeight + window.scrollY) >= document.body.offsetHeight

• window.innerHeight
• window.scrollY
• document.body.offsetHeight

2. "clone" 프로젝트 관련 피트백

1. 디자인

• "클론" 이기 때문에 CSS, 디자인이 중요함
• Notion의 소스코드를 보면서 css 파악하기
• Computed 탭의 내용이 최종적으로 적용된 CSS임.

2. 기능

• 기본 기능은 필수적으로 구현하고,
• 부족한 기능 추가적으로 보완/수정하는 작업까지 있어야 포폴로 적합.

3. CSS

• scss, styeld-components 등도 사용하기
• CSS에 대한 모듈화 ⇒ module.css, module.scss
• 각 페이지 마다의 고유한 css를 만들 수 있다.
  ex. login.module.scss 이라는 이름으로 파일을 만들 수 있다.
• ant.design 이나 bootstrap 등을 사용하기 보다는 직접 만들어서 사용하는게 좋다.
• 만든 디자인에 대해 Story book으로 관리
  • useAxios, useSWR
  • code Inspector: 코드 유사도 검사

4. debounce와 throttle

• debounce
  :일정 시간 내에 같은 이벤트가 발생할 경우 이벤트의 실행을 지연시키다가 가장 마지막 이벤트를 실행함.
• throttle
  : 가장 처음 들어온 이벤트를 실행하고, 일정 시간 내에 다시 들어오는 이벤트들은 무시한다.