본문 바로가기

분류 전체보기91

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.
BLoC 개념 BLoC 패턴이란? BLoC는 비즈니스 로직 컴포넌트(Business Logic Component)의 약자이다. BLoC 패턴이 쓰이는 이유? UI와 비즈니스 로직을 분리해 개발을 원활히 하고자 한다. 비즈니스 로직은 데이터베이스 조회나 서버와의 통신 등 데이터를 처리하는 부분을 말합니다. UI와 비즈니스 로직을 분리하려는 이유는 코드 수정 시 서로 간의 간섭을 떨어트리고 테스트를 용이하게 하기위해 사용. 데이터 관리 측면에서 좋다. 부모와 자식간의 데이터 흐름을 직관적이고 단순하게 만들어준다. 구조는 Redux와 비슷하다.(구조만... 실제 사용방법 및 용도는 다르다.) 내 개인적 이해로는 ViewModel로 이해하는게 가장 와닿았다.(BLoC==ViewModel) ViewModel를 다른 프레임워크(.. 2019. 1. 13.
2. 레이아웃 기초 Building layouts 위의 레이아웃을 분석해보자. 첫번째 행은 Title Section 가장 바깥은 Container 위젯 첫번째 자식은 Row 위젯이고 3개의 자식 위젯을 가지고 있다. 자식 위젯 중 첫번째는 컬럼 위젯 with 2 children (2개의 Text 위젯) 특징으로는 대부분의 공간을 차지하고 있고 이 속성은 Expanded 두번째는 아이콘 위젯 마지막은 텍스트 위젯 위의 글을 코드로 변환해보면 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { Widget titleSection = Container( padding: const EdgeInsets.all(32.0), child:.. 2019. 1. 3.
1. Flutter 위젯 소개 기본적인 구성과 위젯 사용방법 Hello World import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); } Basic Widgets import 'package:flutter/material.dart'; Material 라이브러리 추가 항상 main 함수가 존재 해야 한다. 말 그대로 메인 함수 runApp() 함수, 앱의 시작점, 루트 내부의 위젯들로 위젯트리 구성, flutter 프레임워크는 루트 위젯으로 화면 전체를 덮는다. Center 위젯과 자식 위젯으.. 2019. 1. 2.
정규식. 규식이형! 사용하기 정규식. 애타게 불러보는 그 이름 개발자에게 정규식은 아픈 손가락이다. 사용할 때 마다 찾아봐야 하는 번거로움이 있다.(머리속에 도저히 저장되지 아니한다.) 그래서 내가. 자주. 사용하는. 정규식을 정리하려고 한다. 단순 문자열 매칭 (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.