프로그래밍/웹
-
[AngularDart] 프로퍼티 바인딩 ( [property] )프로그래밍/웹 2019. 2. 1. 00:30
Property Binding ( [property] )뷰 엘리먼트의 프로퍼티를 설정하기 위해서는 템플릿의 property binding을 사용하면 된다. 바인딩을 사용할 경우 지정된 프로퍼티의 값을 template expression의 값으로 설정한다. 가장 만힝 사용되는 바인딩은 앵귤러다트 컴포넌트의 프로퍼티 값을 뷰 엘리먼트의 프로퍼티 값에 세팅하는 방식이다. 아래의 예제는 img DOM의 src 프로퍼티를 컴포넌트의 heroImageUrl 프로퍼티 값으로 설정하는 코드이다.xxxxxxxxxx11아래의 예제는 컴포넌트의 isUnchanged 프로퍼티가 true인 경우 button DOM을 비활성화 시키는 코드이다.xxxxxxxxxx11Cancel is disabled아래의 예제는 앵귤러 지시자(di..
-
[AngularDart] HTML과 앵귤러 템플릿 html프로그래밍/웹 2019. 1. 31. 09:34
일반 HTMLMental ModelSave앵귤러 구문Mental ModelSave위의 앵귤러 구문 예제에서 [disabled]="isUnchanged"는 disabled 속성에 isUnchanged 값을 직접 대입하는 것이 아니라, Button의 DOM property에 disabled 프로퍼티를 세팅 하는 용도이다. (기존 HTML 구문이랑 개념이 헷갈려서는 안됨)HTML attribute vs. DOM propertyhttps://www.youtube.com/watch?v=Ut-ATm23_Pg둘 차이를 이해하는 것이 앵귤러의 바인딩을 사용하는데 매우 중요함. 요약하면 HTML attribute는 DOM property를 초기화하는데만 사용되는 unchangable 값이고, 실제 화면에 뿌려주는 역할은..
-
[TypeScript] TypeScript로 ReactJS 작성하기프로그래밍/웹 2018. 7. 4. 16:11
ReactJS와 TypeScript 같이 사용하기TypeScript 홈페이지 참조ts, typescript, 타입스크립트, Typescript: TypeScript를 칭함React, react, 리액트: ReactJS를 칭함본 문서에서 간단하게 TypeScript를 사용하는 React 프로젝를 설정하고 기본적인 테스트를 완료하는 방법을 제시한다. 본 문서를 통한 설정에는 아래의 항목들을 포함한다.리액트와 타입스크립트를 사용하는 프로젝트 생성TSLint를 사용하는 코드 린팅Jest와 Enzyme을 활용한 테스팅Redux를 이용한 리액트 스테이트(state) 관리빠른 프로젝트 생성을 위해서 create-react-app 툴을 사용한다. 리액트 기본과 Node.js 및 npm 을 이미 알고 있다는 전제로 설명..
-
React에서 Bootstrap v4 사용하기프로그래밍/웹 2018. 5. 3. 05:46
원문: React 앱에서 bootstrap.js 사용하기본 문서는 원문을 해석한 내용입니다.Bootstrap v4를 React 앱에서 사용하기Node.js + creat-reat-app을 통해 만들어진 앱에서, Bootstrap을 사용하는 방식에 대해서는 수많은 논의들이 있다. 이 문서에서는 간단하고 손쉬운 방법을 통해 Bootstrap/jQuery를 이식 하는 방법을 소개한다. 이 방식을 사용할 경우 webpack 설정이나 node modules 설정을 변경할 필요가 없으며, 전체 프로젝트를 다시 구성할 필요도 없다.실제로 이 방식을 찾아내기 위해서는 수많은 시도를 해보았으며, 많은 사람들이 이 문서를 통해 도움을 받기를 바란다.Note: 이 문서는 Bootstrap 스크립트를 import하기 위한 방..
-
[React Advanced] Typechecking With PropTypes프로그래밍/웹 2018. 4. 6. 21:48
Typechecking With PropTypes리액트 버전 v15.5부터 React.Proptypes가 prop-types 라이브러리로 이동 되었습니다.하위 버전에서는 codemod script를 사용해서 변환하세요.프로젝트의 크기가 커지면 커질 수록 타입 체크와 관련된 수많은 버그들이 쏟아져 나올 것이다. Flow나 TypeScript를 이용해서 타입 체크를 수행할 수도 있겠지만, 리액트에서는 빌트인 타입체크 툴을 제공한다. 컴포넌트 내에서 사용하는 props에 대해서 타입체크를 수행하기 위해서는 propTypes라는 특수한 속성을 사용하면 된다. ximport PropTypes from 'prop-types';class Greeting extends React.Component { render(..
-
[React Advanced] JSX In Depth프로그래밍/웹 2018. 4. 5. 22:17
React Advanced Guides 홈페이지 원문JSX In DepthJSX의 고급 용법에 대해서 알아보자.JSX는 컴포넌트와 해당 컴포넌트에 전달 될 props 및 하위 요소를 전달하기 쉽도록 도와주는 일종의 syntactic sugar의 역할을 하는게 기초적인 내용이다. x// JSX 예제 Click Me// javascript 로만 구성된 예제.React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me'); 위의 예제에서 볼 수 있는 JSX와 자바스크립트 코드는 의미가 동일하다. self-closing 태그도 동일하다. xxxxxxxxxx// self closing tag // JSX 예제// 같은 엘리먼트를 자바스크립..
-
[ReactJS] Thinking in React프로그래밍/웹 2018. 4. 5. 00:48
React Thinking in React 홈페이지 원문Thinking in React자바스크립트를 사용하여 크고 빠른 앱을 만드는데에는 리액트가 최고의 툴이라고 생각한다. 페이스북과 인스타그램을 만드는데 사용하면서, 리액트의 확장성에 대한 증명은 완벽하게 되었다.리액트를 사용하는데 있어서 가장 훌륭한 부분중 하나는, 제작하려는 앱에대해서 고심하게 만든다는 것이다. 본 문서에서는 리액트를 사용하여 검색 가능한 상품 데이터 표를 만들면서, 어떠한 사고 흐름을 통해 구성되는지 알아 본다.Start With A Mock이미 JSON API와 디자이너로부터 전달받은 모조품이 있다고 가정하자. 모조품은 아래의 이미지와 같이 구성되어있다. JSON API를 통해 얻어오는 데이터는 아래와 같다. [ {category..
-
[ReactJS] Composition vs Inheritance프로그래밍/웹 2018. 4. 3. 22:33
React 홈페이지 원문Composition vs Inheritance리액트는 훌륭한 컴포지션 모델을 가지고 있고, 상속을 사용하기 보다는 컴포지션 형태를 사용하여 컴포넌트 재사용을 하길 권장한다.본 문서에서는 리액트를 처음 접하는 개발자들이 상속을 사용할 때 마주치는 몇가지 문제점에 대해서 다루고, 컴포지션을 통해 해당 문제들을 해결하는 방법을 알아본다. Containment사실 문제가 발생하기 전에 미리 방지하는 것이 최고다. 일부 컴포넌트에서 엘리먼트의 하위요소를 렌더링 할때, 직접적으로 하위 요소 내용을 알지는 못하는 경우들이 있다. 대게 Sidebar 와 Dialog와 같은 블록/박스형 컴포넌트들에서 많이 볼 수 있다. 태그와 같이 블록 태그의 내부에 다른 컴포넌트에서 전달되는 하위 엘리먼트를 ..