Techfold

전통적인 callback 패턴function mySandwich(param1, param2, callback) { alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2); callback();} mySandwich('ham', 'cheese', function() { alert('Finished eating my sandwich.');});Colored by Color Scriptercs위와 같은 형식들로 자바스크립트에서 비동기 프로그래밍을 위한 패턴으로 callback을 사용했습니다. 하지만 이러한 전통적인 callback 패턴에는 몇가지 단점이 있습니다.비동기 처리 중에 발생한 오류를 예외처리 하기가 까다롭다. (http:/..

D3는 'Data-Driven Document' 라는 이름에서도 알 수 있듯이 다양한 방법으로 쉽게 Data를 DOM element에 쉽게 바인딩 할 수 있기 때문이다. Data를 바인딩하여 출력물을 내는 간단한 예제를 통해서 D3의 기본적인 구조, selection 객체, select & selectAll 메소드 등을 알아본다. 현재 D3 v4가 release되었지만 v3, v4의 비교를 통한 공부를 하기위해 v3으로 진행한다. 기본개념에 대한 예제123456789101112131415161718192021222324252627 var theData = [1, 2, 3, 4 ,5]; var selection = d3.select("body") .selectAll("p") .data(theData) .e..

데이터 바인딩 이란? Data Binding 은 Angular에만 존재하는 개념이 아닙니다. 기존의 공학적 측면에서의 Data Binding은 응용 프로그램의 UI와 비즈니스 논리를 서로 연결하는 프로세스입니다. 마찬가지로 로직을 담당하는 컴포넌트와 UI를 나타내는 Template 를 구성요소로 하는 Angular에서의 Data Binding은 이 둘 사이의 '통신(커뮤니케이션)' 이라고 표햔하는 것이 조금더 자연스러울 수도 있을 것 같습니다. 결론적으로 Angular와 같은 Framework 관점에서 Data Binding은 데이터 및 템플릿과 비즈니스로직(컴포넌트) 간의 상호작용 입니다. 또는 모델과 뷰, 구성요소간의 데이터 동기화 라고 표현해도 좋을 것 같습니다. 동적 콘텐츠에 관련된 모든 것에는 ..

'리눅스 기초' 를 주제로 진행된 생활코딩 리눅스 오프라인강의를 아주......간략히 정리하였습니다. 생활코딩 '리눅스 기초' 에 대한 자세한 내용은 아래 주소를 참조해주세요.https://opentutorials.org/course/2598/14160이후에는 리눅스 기초와 관련해 소 주제별로 포스팅할 예정입니다. 기본 명령어 pwd : 현재 경로를 나타낸다.nano, vi, vim : 각각의 편집기를 실행한다.man : 명령어에 대한 자세한 Usage를 제공한다.‘-‘ 뒤에 옵션을 입력할수 있고, ‘—‘ 는 좀더 자세하게 나타낸다. ls 명령어 정의 List Directory Contents 의 약어리눅스의 기본 명령이며 디렉터리에 있는 내용을 출력한다.ls 는 많은 옵션을 가지지만 일반적인 몇가지 옵..

SVG 에 대한 정리 내용은 대부분 아래의 Spec 과 Tutorial 을 참조하여 작성하였다.https://www.w3.org/TR/SVG : W3C SVG spec http://tutorials.jenkov.com/svg/index.html : SVG tutorial by Jenkov 이번 페이지에서는 SVG의 기본도형에 대해서 정리하였다. 기본 도형에 대한 내용은 element에 대해 이런것이 있구나 라는 것을 알기위한 목적으로 간단히 정리하고 후에 나오는 path 등을 좀더 자세히 다룰 예정이다. 기본도형의 종류 spec 에 정의된 기본도형에 대한 내용이다. 도형의 이름과 그에 대한 element가 나타나있다. 사각형, 원, 타원, 선, 꺾은선, 다각형 이 있다. 각각의 spec은 각 elemen..

SVG 에 대한 정리 내용은 대부분 아래의 Spec 과 Tutorial 을 참조한다.https://www.w3.org/TR/SVG : W3C SVG Spec http://tutorials.jenkov.com/svg/index.html : SVG Tutorial by Jenkov이번 페이지에서는 SVG 에 대한 기본 개념과 좌표체계 그리고 여러 요소들을 표현하기 위한 기본적인 svg element 에 대해 정리하였다. SVG 개념 Scalable Vector Graphics 의 약어로 Vector 기반이기때문에 해상도에 영향을 받지 않고 확대나 축소를 하여도 이미지가 깨지지 않는다.XML basedJavascript SVG DOM API를 이용하기 때문에 Event handler를 등록하여 Element ..