Frontend (7) 썸네일형 리스트형 무한스크롤 구현하기 Angular에서 Directive를 사용해서 무한 스크롤을 구현해보겠다. 무한 스크롤이란?유저에게 대용량 데이터를 한번에 가져와서 보여주려면 많은 시간이 걸린다.그래서 유저의 화면 영역을 채우는 데이터를 불러와 보여주고 스크롤을 내리면 그만큼의 데이터를 불러와서 보여주는 것을 의미한다. 1. 데이터를 가져와야 하는 시점 계산하기무한스크롤을 구현하기 위해서는 스크롤의 위치를 계산하는 것이 중요하다.문서의 높이와 현재 화면의 높이 등을 계산해서 데이터를 더 가져올 지를 선택해야 하기 때문이다. - scrollHeight: 전체 문서의 높이- innerHeight or clientHeight : 뷰포트의 높이- scrollTop : 문서의 최상단부터 뷰포트의 최상단까지의 거리 |-------------.. [React] 컴포넌트의 라이프사이클 메서드 *리액트 공식문서 및 책 을 바탕으로 정리한 내용입니다. https://www.notion.so/7-fe8d8f661f1b41e6982535ac0ac23789 7장. 컴포넌트의 라이프사이클 메서드 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. www.notion.so [React] 컴포넌트 반복 *리액트 공식문서 및 책 을 바탕으로 정리한 내용입니다. https://www.notion.so/6-36e408a53ebf4178ac4c572913ea646c 6장. 컴포넌트 반복 웹 어플리케이션을 만들다 보면 이와 같이 반복되는 코드를 작성할 때가 있다. www.notion.so [React] 이벤트 핸들링 *리액트 공식문서 및 책 을 바탕으로 정리한 내용입니다. https://www.notion.so/4-d68c7c79d2e64cb0b7d3747245a8b307 4장. 이벤트 핸들링 이벤트 : 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것 www.notion.so [React] Component와 Props, State *리액트 공식문서 및 책 을 바탕으로 정리한 내용입니다. https://www.notion.so/3-Component-Props-State-777bd103cef54902bd467f8e12683395 3장. Component와 Props, State 컴포넌트(Componenet) www.notion.so [React] JSX *리액트 공식문서 및 책 을 바탕으로 정리한 내용입니다. https://www.notion.so/2-JSX-35ca9f01003e4de3b6af89840e9c4df4 2장. JSX React 코드 이해하기 www.notion.so [React] React 환경설정 및 용어 정리 *리액트 공식문서 및 책 을 바탕으로 정리한 내용입니다. https://www.notion.so/1-10c1906fb3ef42cdb50208b85db37bef 1장. 리액트의 시작 React 정의 및 용어 정리 www.notion.so 이전 1 다음