this.drawGroupNames(svg); this.drawAxis(svg); this.drawData(svg); 텍스트가 먼저 그려지고 축, 데이터가 순서대로 그려져야 한다. drawGroupNames(svg){ for(var i = 0; i < this.dimension.length - 1; i++){ var _group_name = this.group_name['group' + (i + 1)] this.drawText(i, svg, _group_name); } } drawText(index, svg, _group_name){ var scale_func = this.createScale(); var xScale = scale_func[0]; svg.selectAll(".category_group"..
자바스크립트는 가비지 컬렉션 기능이 있는 언어이므로 참조 타입을 사용할 때 메모리 할당 문제에 대해 고민하지 않아도 되지만 쓰지 않을거면 null값을 주는 편이 좋다. 객체에서 프로퍼티를 완전히 제거할 때는 delete연산자를 사용해야 한다. 객체에 추가하는 프로퍼티는 기본적으로 열거가 가능하다. for in 반복문을 실행하면 객체에 있는 프로퍼티 중 열거 가능한 것을 훑는다. for(property in object){ console.log("name : " + property) console.log("value : " +object[property]) } 위의 방법 + var properties = Object.keys(object); for(var i = 0; i < properties.length..
App.js class App extends Component { constructor(props){ super(props); this.max_id = 3; this.state ={ mode : 'default', dash_mode : 'hello', selected_id : 1, contents : [ {id : 1, title : 'html', desc : 'html is hyper markup langauge##'}, {id : 2, title : 'css', desc : 'css is decorate html@@'}, {id : 3, title : 'js', desc : 'js is dynamic html!!'}, ] }; } render(){ var _title, _desc = ''; if(th..
D3 목표 자유자재로 축과 막대 그래프를 그릴 수 있도록 책과 구글링을 통해 기술 점검을 할 것. 기존에는 복붙을 통해 데이터를 짜집기해서 차트를 그렸다면 실질적으로 개념을 이해하여 혼자서 차트를 그리는 것이 목표이다. 척도 척도란? 척도(scale)는 입력되는 정의역(domain)과 출력되는 치역(range)를 매핑하는 함수를 말한다. 데이터 집합에 있는 값은 시각화에서 사용할 픽셀 값으로 바로 사용하기 적합치 않다. 예시로 픽셀로만 데이터를 표현한다면, 사과의 판매량이 2000개가 넘어간다? 그러면 2000픽셀이 필요하다는 얘기로, 매우 부적절한 것이다. 척도를 사용하면 데이터 값을 만들려는 시각화에서 필요한 적절한 값으로 비율을 바꿔서 쉽게 매핑한다. **척도는 필요한 만큼 만들어 사용할 수 있다 ..
App.js import React, { Component } from 'react'; import TOC from "./components/TOC"; import ReadContent from "./components/ReadContent" import CreateContent from "./components/CreateContent" import Subject from "./components/Subject" import Control from "./components/Control" import './App.css'; class App extends Component { constructor(props){ super(props); this.max_content_id = 3; this.state =..
D3 라이브러리 BarChart 코드 분석 const svg = select("svg") .attr("width", user_define_width) .attr("height", user_define_height) .style("border", "1px solid rgba(0,0,0,0.1)"); 혹은, svg 태그가 body에 없다면, const svg = select('body').append("svg") // 다른 태그이름도 가능. scaleBand 관련 내용이 헷갈려 코딩을 참고. var A = d3.scaleBand() .domain(['January', 'February', 'March', 'April', 'May']) .range([1, 2]); // Getting the correspond..
React Component 모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다. 마운트 아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출된다. [**`constructor()`**](https://ko.reactjs.org/docs/react-component.html#constructor) [`static getDerivedStateFromProps()`](https://ko.reactjs.org/docs/react-component.html#static-getderivedstatefromprops) [**`render()`**](https://ko.reactjs.org/docs/rea..
npm run build : 실제 배포를 하는 명령어. 이유는 create-app 모드의 경우 리액트의 사용하는 도구들이 무거워 파일이 가볍지 않다. index.html의 공백을 모두 삭제하여 용량을 줄이며 src에 있던 데이터나 에러 메시지도 삭제한다. npx serve -s build : 컴파일/배포. props 컴포넌트를 만드는 클래스 선언하는데 유사 자바스크립트이다. 여러 따옴표나 문자열에 신경쓰는 일반 자바스크립트와 다르게 태그로만 이루어져 있다. 이것을 JSX라고 한다. 이는 create-react app이 JSX를 js 코드로 변환해준다. 컴포넌트의 이름에만 집중하여 복잡도를 획기적으로 낮춘다. JSX임. js아니다! props는 html에서의 어트리뷰트라고 생각하면 편하며 우리가 원하는 값..
- Total
- Today
- Yesterday
- https://react.vlpt.us/
- https://wikidocs.net/68
- https://react.vlpt.us/basic/11-render-array.html
- https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD
- https://subicura.com/2017/01/19/docker-guide-for-beginners-1.html
- Co
- https://jwprogramming.tistory.com/52
- ㄴ
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |