■ Front-End/- React JS
-
React, Redux, Redux-saga에 대하여■ Front-End/- React JS 2019. 6. 19. 17:31
ReactJS란? Facebook 에서 만든 Javascript 라이브러리(!=프레임워크) DOM 관리와 상태값 업데이트 관리를 최소화하고, 개발자가 오직 기능 개발과 UI 구현에 집중할 수 있도록 하기 위해 만들어진 라이브러리(예. Angular, Vue, Backbone, React..) 특징 전체 앱은 Component들이 결합해서 만들어진다. 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 재사용이 가능하다. JSX를 사용한다. Virtual DOM을 이용한다. 단방향 데이터 바인딩. DOM이란? Document Object Model. 문서 객체 모델. HTML, XML 문서를 처리하는 API. Virtual DOM이란? (브라우저 작동 원리 참고) 일반적으로 DOM에 변화가 생기면..
-
Recharts를 이용한 chart 만들기■ Front-End/- React JS 2019. 4. 11. 10:45
급여현황을 보여줘야하는 페이지 개발 건이 있어서 사용하게된 Recharts Library. 긴급 개발 건이어서 기획서대로 만들었는데, 비슷한 차트를 사용하는 페이지가 많아서 시연 후에 공통 컴포넌트로 만들어 봐야겠다. Custom X축, Y축, Tooltip, Legend 설정 값 넣어서 만들어야할듯?? 라이브러리 사이트 http://recharts.org/ 적용 방법 1. terminal > npm install recharts 2. 차트를 사용할 파일 상단에 import 코드 추가 import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts'; --> 사용할 차트와 컴포넌트만 남기고 삭제하면 됨. 1. Stack..