자바스크립트는 시간이 지남에 따라 점저 변해가고 있다. 하지만 그 만큼 발전한 버전을 따라와 주지 못하는 브라우저나 환경이 있기 마련이다. babel은 최신 문법을 써도 이전 버전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전버전의 js로 변환해주는 툴이다. 즉, 최신문법을 이전문법으로 바꿔주는 API인것. 바벨에 사용하는 4가지 모듈 - @babel/core : 말 그대로 바벨의 코어, 핵심 요소들이 들어가 있는 모듈 - @babel/cli : 명령어를 통해 cmd에서 바벨을 직접 컨트롤 할 수 있게 해준다. - @babel/preset-env : 바벨의 설정을 일일이 할 필요없이 가장 일반적인 대표 설정들을 모은 플러그인 세트 - @babel/preset-react ; 바벨을 JSX 문..

d3.select("body").selectAll('') - 조건과 일치하는 첫번째 DOM 문서요소의 참조를 반환한다. - DOM에서 'body'를 찾고 'p' 엘리먼트를 모두 선택한다는 의미 .data(dataset) - data() 메서드는 데이터 값이 몇 개 인지 계산하고, 파싱한다. - dataset 변수에서 불러온 배열의 값이 5개이면, 다음 체인으로 연결된 모든 내용은 값마다 한번씩 총 5번 실행된다. .enter() - 불러온 데이터를 적용합니다. - 이때 enter를 사용함으로써 DOM요소보다 데이터의 개수가 많은 경우 이름없는 요소들을 생성해서 데이터들을 동적으로 모두 표현할 수 있게 해준다. .append('p') - 위 enter()에서 생성된 이름없는 요소에 p태그를 사용한다는 의미..

Data-Driven-Documents.js 1. Loading (데이터 불러오기) : 시각적 요소를 그리기 전에 보여주고자 하는 데이터를 불러온다. .tsv, .csv, json 등 다양한 형식의 데이터 연동 가능. 2. Binding (데이터 엮기) : 데이터를 시각적인 요소와 연동시킨다. 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동시킨다. 3. Transform (시각적 요소 지정) : 데이터의 시각적인 요소 지정 그래프의 유형, 요소의 색상, 축과 범례의 여부 등 다양한 요소 지정 가능 파이, 트리맵 등 그래프 유형별로 레이아웃 코드 제공 4. Transition (사용자 반응 지정) : 클릭, 드래그 등 사용자 반응에 따른 효과 지정 가능

SVG는 Scalable Vector Graphics의 약자로 웹용 벡터그래픽을 뜻한다. HTML 문서에 직접 포함시키거나 삽입할 수 있으며, IE8 이하를 제외한 모든 브라우저에서 지원한다. 코드작업으로 이미지 편집이 가능하고, 품질손상없이 확대/축소가 가능하다.

React 함수 인자를 array로 받기에 PropType을 TodoList.propTypes = { todoList: PropTypes.array.isRequired, }; 으로 설정한다면 Prop type `array` is forbidden 이라는 에러를 접할 것이다. 이 이유는 airbnb eslint에서 금지하고 있기 때문이다. (정확히 말하면 eslint-plugin-react) Why? 왜냐하면 PropTypes.array는 아래 경우가 모두 해당되기 떄문이다. array of objects [{name:'ABC'},{name:'XYZ'}] array of strings ['Lorem','Ipsum'] array of integers [2,4,66,4] array of nested array..

feat: introduces a new feature to the codebase fix: patches a bug in your codebase refactor: A code change that neither fixes a bug nor adds a feature 출처: stackoverflow.com/questions/48075169/semantic-commit-type-when-remove-something

기존 문제점 리액트는 DOM 노드의 자식들을 재귀적으로 처리할 때 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경한다. ex) 1 2 to 1 2 3 위 코드로 변경하는 경우 리액트는 2개의 트리에서 1 가 일치하는 것을 확인하고 2 가 일치하는 것을 확인하고 3가 다르므로, 트리에 추가한다. 즉, 1,2번째 엘리먼트가 똑같고 마지막 엘리먼트만 다르므로 모든 자식 노드를 새로 그릴 필요 없이, 변경된 사항만 새롭게 그리게 된다. 하지만 아래의 경우에는 리스트의 맨 앞에 엘리먼트를 추가하는 경우 성능이 좋지 않다. 1 2 to 3 1 2 왜냐하면 새로운 엘리먼트가 첫번째로 생겼기 때문에 리액트가 모든 요소가 제자리에 위치하지 않았다고 판단하고, 모든 자식 엘리먼트를 새로그리기 때문이다. (성능..

- 비교 알고리즘 (Diffing Algorithm) ko.reactjs.org/docs/reconciliation.html#the-diffing-algorithm 2개의 트리를 비교할 때, 리액트틑 두 Element의 Root 엘리먼트부터 비교한다. 이후의 동작은 root Element의 타입에 따라 달라진다. 1. Element의 타입이 다른 경우 2개의 Root Element 타입이 다르면, 리액트는 이전 트리를 버리고, 완전히 새로운 트리를 구축한다. 트리를 버릴 때에는 이전 DOM 노드들을 모두 파괴되고, 컴포넌트 인스턴스에 componentWillUnmount()가 실행된다. 새로운 트리가 만들어 질 때에는 새로운 DOM노드들이 삽입되고 해당 컴포넌트 인스턴스에 compoenetWillMoun..