ToDoList
-
React :: 11. 컴포넌트 성능 최적화Dev/프론트엔드 2021. 7. 20. 16:15
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 10장에서는 학습한 지식을 활용하여 멋진 일정 관리 애플리케이션을 만들어 보았스니다. 현재까지는 이 애플리케이션을 사용할 때 불편하지 않습니다. 추가되어 있는 데이터가 매우 적기 때문이죠. 그러나 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생합니다. 이번 실습은 다음과 같은 흐름으로 진행합니다. 많은 데이터 렌더링 하기 - 크롬 개발자 도구를 통한 성능 모니터링 - React.memo를 통한 컴포넌트 리렌더링 성능 최적화 - onToggle과 onRemove가 새로워지는 현상 방지하기 - react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더..
-
React :: 10. 일정관리 애플리케이션 만들기Dev/프론트엔드 2021. 7. 19. 17:19
지금까지 리액트의 기본기부터 시작해서 컴포넌트를 스타일링하는 방법까지 배워 보았습니다. 이 장에서는 지금까지 배운 지식을 활용하여 프런트엔드를 공부할 때 많이 구현하는 일정 관리 애플리케이션을 만들어 보겠습니다. 이번 실습은 다음 흐름으로 진해앟ㅂ니다. 프로젝트 준비하기 - UI 구성하기 - 기능 구현하기 10.1 프로젝트 준비하기 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 create-react-app을 사용하여 프로젝트를 생성하세요. $ yarn create react-app todo-app 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하세요. $ cd todo-app $ yarn add node-sass@4.14.1 classnames..