React.js Immutability Helper
React.js Immutability Helper – State 내부 Array 에 원소 삽입/제거/수정컴포넌트에서 사용할 데이터 배열을 매핑하여 효율적으로 렌더링하는 방법에 이어 이번엔 데이터 배열에 변화를 주는 방법을 알아보도록 하겠다. 이 과정은 생각보다 쉽지만은 않다. 1. state 안의 array 에 원소 삽입/제거&
카테고리: SPA
React.js Component Map
React.js Component Iteration (반복) – MapReact.js 에서 다른 데이터를 지니고있는 같은 종류의 여러 컴포넌트를 효율적으로 렌더링 하는 방법에 대하여 알아보도록 하겠다. 1. JavaScript – Array.prototype.map우선, JavaScript 의 Array 객체 내장함수인 map 함수에 대하여 알아보자. 정의
React.js Component State Props
React.js Component의 State 와 Props 사용하기React.js 의 Component 에서 사용 할 데이터를 다루는 State 와 Props 에 대하여 알아보도록 하겠다. 1. 시작하기Component 생성 및 모듈화 에서 사용하던 프로젝트를 계속해서 이어서 작성한다. index.html 1234567891011<!DOCTYPE h
React.js Component Module
React.js Component 생성 및 모듈화React.js 에서 사용되는 Component 를 생성하고, 이를 모듈화 하는 방법을 알아보도록 하겠다. Component 생성 및 모듈화다음 index.js 파일은, 이전 포스트에서 만든걸 이어서 진행한다. src/index.js 123456import React from 'react&#
React.js JSX Syntax
React.js JSX 문법React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 한다. JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점이 있다. JSX는 컴파일링 되면서 최적화 되므로, 빠르다 Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는것, 즉 예측 불가능한 결과를 나
React.js Setting
React.js 작업환경 설정하기React 작업환경을 설정에 대해 알아보자. NodeJS 환경에서 React를 사용 할 것이므로 NodeJS 및 npm이 설치되있어야 한다. NodeJS 환경에서 React를 사용하는 방법은 대표적으로 webpack을 이용하는 방법이 있고, browserify를 이용하는 방법이 있는데, 이 포스트에서는 webpack을 이용하
React.js
React.js란React는 페이스북에서 개발한 유저인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있게 해준다. 이 라이브러리는 현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은 큰 서비스에서 사용되고 있다. 이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더
Angular.js v1.0 Storage
Angular.js v1 HTML5 Storage 사용하기Angular.js에서 HTML5의 localStorage, sessionStorage의 기능을 사용할때 Factory에 등록하고 사용하면 유용하다.아래 예제 코드에서 JSON.parse()를 사용한 이유는 storage 키값에 저장된 값은 문자열인 string으로 저장 되기에 원시데이터로 다시 변환
Angular.js v1.0 Tip
Angular.js v1.0 TipngBind를 고려해 보자 앵귤러를 사용하다 보면 인터폴레이션 문자열이 순간적으로 나오는데 왜 그러는지 또 어떻게 해결해야 하는지 의문이 든다. 인터폴레이션 문법을 사용했던 손쉽게 타이핑할 수 있기 때문인데 사실은 인터폴레이션을 사용한 곳의 모든 코드를 ngBind 디렉티브로 변경해서 사용한다. 그러면 스콥 변수에 데이터가
Backbone.js Sync
Backbone SyncBackbone.js의 Sync기능은 기본적으로 Restful한 서버에서 동작 하며, Ajax 데이터 전송을 당담한다.CRUD method를 지원(‘create’, ‘read’, ‘update’, ‘delete’) Backbone.sync is sync(method, model, [options]); create -> POST