본문 바로가기

Javascript34

Data Join Data Join이란? 기본적으로 이미 존재하는 Element에 데이터를 매핑하는 것이다. 그럼으로써 Element를 주입, 수정, 제거 할 수 있게 해준다. Data set [10, 20, 30, 25, 15] HTML D3.js code d3.select("#list").selectAll("li") .data([10, 20, 30, 25, 15]) .text(function(d) { return d; }); 위의 코드를 실행 하게 되면 아래와 같이 실행되게 된다. 10 20 현재 li Element가 2개만 실제로 존재하고 있기 때문에 3,4,5 번째 값은 출력이 되지 않는다. 나머지 값들이 출력되도록 하려면 조작을 해줘야 한다. Element가 없다면 생성하도록 해줘야 한다. d3.select("#.. 2019. 3. 8.
정규식. 규식이형! 사용하기 정규식. 애타게 불러보는 그 이름 개발자에게 정규식은 아픈 손가락이다. 사용할 때 마다 찾아봐야 하는 번거로움이 있다.(머리속에 도저히 저장되지 아니한다.) 그래서 내가. 자주. 사용하는. 정규식을 정리하려고 한다. 단순 문자열 매칭 (exec 함수) const patt = /abc/; const str = 'haha abc'; patt.exec(str); // 결과 값은 ["abc"] 문자열 존재 여부 (test 함수) const patt = /abc/; const str = 'haha abc'; patt.test(str); // 결과 값은 true 거의 위 2개 함수에 패턴만 만들어서 사용 한다. 2018. 12. 3.
String replace 사용법 모든 문자를 바꾸고 싶다면? 자바스크립트로 개발을 하다보면 자주 사용하는 함수 모음들이 있다. String.replace도 그런 함수 중 하나이다. const str = 'Hello world'; const replacedStr = str.replace('l', ''); 위의 코드의 결과 값은 l 하나만 바뀌게 된다. 모든 l을 바꾸려면 어떻게 해야 할까? 답은 규식이형이다. 규식이형! const str = 'Hello world'; const replacedStr = str.replace(/l/gi, ''); 위에서 따옴표를 대신 슬래쉬로 감싸고 끝에 특정 문자열을 추가했다. g: 정규식에서 발생하는 모든 패턴에 대한 탐색 i: 대/소문자 구분 안함 m: 여러 줄 검색(멀티라인) 2018. 12. 3.
select와 selectAll 문서요소 그룹핑 d3 라이브러리르 사용하면서 가장 많이 사용하는 메소드는 바로 select다. 데이터를 바인딩 하거나 문서 요소를 조작하려면 먼저 요소를 찾아야 하기 때문이다. select 선택된 문서요소를 원소로 하는 한 개의 group 배열을 원소로 하는 배열을 반환한다. const selection = d3.select('div'); selectAll 선택된 모든 문서요소를 원소로 하는 한 개의 group 배열을 원소로 하는 배열을 반환한다. const selection = d3.selectAll('div'); select 이후 data와 연동해서 많이 사용한다. 2018. 10. 16.
D3란 무엇인가? D3.js란? Data Drivened Document'의 약자(3개의 D로 시작하기 때문) HTML, SVG(Scalable Vector Graphics), CSS를 사용해 데이터를 시각적인 결과물로 나타낸다. 간단히 요약하자면 차트 형태나 그래프, 트리 형태 등으로 데이터를 화려하고, 예쁘게 표현한다. 기본적인 사용방법은 어느 js 라이브러리(jquery 등)와 비슷한데 메서드 체이닝 방식이 기본이다. 예제 node.append('text') .attr('dx', -18) .attr('dy', 8) .style('font-family', 'overwatch') .style('font-size', '18px') .text(d => d.name); 요구사항 인터넷 익스플로러8 이하를 제외한 모든 웹 브라우저 2018. 10. 16.
Override 조심! 조심! 조심! Override는 예상치 못한 동작을 야기한다. ExtJS는 사용자에게 많은 확장성을 제공해준다. 하지만 무분별하게 사용 할 경우 어디에서 문제가 발생하는지 찾기 힘들게 만든다. 특히나 override!! override를 하는 경우에는 override 하고자 하는 메소드를 꼭! 참고해서 작성 해야한다. override 메소드가 내부적으로 처리하는 필수 로직이 있는데 무작정 덮어써버리면 해당 로직이 사라지게 되고 이상동작 증상이 발견된다. Template Method를 사용하게 될 경우 주의해야 한다. 상위 함수를 꼭 호출 해야하는 경우에는 override 함수 내부에서 컴포넌트.prototype.[Template Method].apply(this); 를 호출하도록! 2018. 9. 7.

티스토리툴바