javascript14 [React] 컴포넌트 성능 최적화 컴포넌트 성능 최적화 추가되어 있는 데이터가 무수히 많아지면, 애플리케이션이 느려집니다. 이러한 현상으로 렌더링 최적화를 하여 성능을 높여봅시다. 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle과 onRemove가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 많은 데이터 렌더링 성능 분석 결과에 나타난 Timings에 작업이 처리되는 데 1.02초가 걸렸습니다. 데이터가 많으면 많을수록 시간이 오래걸려 성능이 매우 나쁘다고 판단됩니다. 느려지는 성능 원인 분석 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수.. 2020. 5. 19. [JS] 자바스크립트란? 자바스크립트란? 웹 페이지는 기본적으로 HTML, CSS, Script 요소들로 이루어져 있습니다. HTML: 어떻게 브라우저에 보여줄지 구조(layout)를 잡습니다. CSS: 구조를 잡은 것을 어떻게 보여줄지 스타일을 입혀줍니다. (위치, 크기, 색상 등..) SCRIPT: HTML과 CSS로 만들어진 정적인 페이지를 동적으로 동작할 수 있게 만들어줍니다. 초기의 자바스크립트는 웹페이지의 보조적 기능을 수행하기 위한 용도로 사용되었으나, 프론트엔드와 백엔드 영역의 프로그래밍 언어로 사용할 수 있는 애플리케이션 개발 언어로 성장했습니다. 중요한 로직들은 서버사이드에서 처리하고, 클라이언트단에서는 받은 데이터 또는 HTML등을 렌더링 해주는 수준이었습니다. JQuery 같은 라이브러리의 등장으로 DOM을.. 2020. 5. 19. [JS] 배열 1. 배열 1. 배열 요소 1-1. push와 pop / shift와 unshift - 추가 또는 제거 push, pop은 각각 배열의 끝에 요소를 추가하거나 제거. shift와 unshift는 각각 배열의 처음에 요소를 추가하거나 제거. push와 unshift는 새 요소를 추가해서 늘어난 길이를 반환. pop과 shift는 제거된 요소를 반환. const arr = ['a', 'b', 'c']; arr.push('d'); // 4 arr.pop(); // 'd' arr.unshift('d'); // 4 arr.shift(); // 'd' 1-2. concat - 여러 요소를 추가하여 사본으로 반환. (한 번만) concat메서드는 배열의 끝에 여러 요소를 추가한 사본을 반환. concat에 배열을 넘.. 2020. 4. 30. [JS] 표현식과 연산자 1. 표현식 값으로 평가될 수 있는 문, 결과가 값인 문과, 표현식이 아닌 문의 차이를 구분. let x; // 선언문 x = 3 * 5; // 표현식: 3 * 5 / 15 2. 객체와 배열 연산자 연산자 설명 . 점 연산자 [] 대괄호 연산자 in 프로퍼티 존재 연산자 new 객체 인스턴스화 연산자 instanceof 프로토타입 체인 테스트 연산자 ... 확산 연산자 delete 삭제 연산자 2020. 4. 30. 이전 1 2 3 4 다음
