디노문경

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 11장 컴포넌트 성능 최적화 12장 immer를 사용하여 더 쉽게 불변성 유지하기 11장 컴포넌트 성능 최적화 10장에서 멋진 일정 관리 애플리케이션을 만들어보았습니다. 현재까지는 사용할 때 불편하지 않지만 데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있습니다 흐름 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle과 onRemove가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더링하기 import React, { useCallback, useRef, us..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 9장 컴포넌트 스타일링 10장 일정관리 웹 애플리케이션 만들기 9장 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링할 때는 다양한 방법을 사용할 수 있다. 이 장에서 알아볼 스타일링 방식들 일반 CSS Sass CSS Module styled-components 가장 흔한 방식, 일반 CSS 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것. 중복되는 것을 방지하기 위해서 규칙을 사용하거나 CSS Selector를 활용하면 됨. 규칙 사용: 컴포넌트 이름-클래스 형태로 짓거나 BEM 네이밍 등등.. CSS Selector: ex) .App .logo Sass 사용하기 Sass(Syntactically Awesome..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 7장 컴포넌트 라이프사이클 메서드 8장 Hooks 7장 컴포넌트 라이프사이클 메서드 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지 마운트, 업데이트, 언마운트의 세 가지 카테고리로 나눌 수 있음 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 의미함. 호출되는 메서드 constructor getDerivedStateFromProps render componentDidMount 업데이트 컴포넌트는 다음과 같은 총 네 가지 경우에 업데이트 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 호출되는 메서드 ge..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 5장 ref: DOM에 이름달기 6장 컴포넌트 반복 5장 ref: DOM에 이름 달기 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS에서 특정 id에 스타일을 적용하거나 자바스크립트에서도 작업할 수 있습니다. 이렇게 요소에 id를 사용해 이름을 다는 것처럼 리액트에서는 ref(reference)를 사용해 DOM에 이름을 달 수 있습니다. 하지만 대체 '어떤' 작업을 할 때 ref를 사용해야 할까요? 정답은 'DOM을 꼭 직접적으로 건드려야 할 때' 입니다. 예를 들어, 다음과 같이 state만으로는 해결할 수 없는 기능에서는 어쩔 수 없이 ref를 사용해 DOM에 직접적으로 접근해야 합니다. 특..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 3장 컴포넌트 4장 이벤트 핸들링 3장 컴포넌트 이 장에서는 먼저 클래스형 컴포넌트에 대해 살펴본 뒤, 컴포넌트를 새로 만들고 사용하는 방법을 알아보겠습니다. 그리고 컴포넌트의 속성 값을 지닌 props와 상태 값을 지닌 state를 사용하는 방법도 알아보겠습니다. - 84p 컴포넌트를 선언하는 방식 함수형 클래스형 // 함수형 컴포넌트 import React from 'react'; const App = () => { return ( ); } export default App; // 클래스형 컴포넌트 import React, { Component } from 'react' class App extends Compon..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 1장 리액트 시작 2장 JSX 1장 리액트 시작 1.1 왜 리액트인가? Hello Hello World velopert 1 만약 위의 코드에서 likes 값을 2로 업데이트한다면 post-1에서 likes 요소를 찾아 수정해야합니다. 하지만 애플리케이션의 규모가 커지면 커질 수록 찾아서 수정하는 과정이 상당히 복잡해지고 성능도 떨어집니다. 페이스북 개발 팀은 이를 해결하려고 하나의 아이디어를 고안해 냈는데, 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식입니다. 페이스북 개발 팀이 앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경..

1단계부터 막혀서 구글링.. (package-lock.json 파일이 없다..) 훨씬 간단한 방법을 찾았다. 바로 해결되었다!