2017년 3월 20일 월요일

CSS : header, nav, aside, section, article, footer 구조태그

구조태그

 - header
   헤더의 전체적인 구조를 나타내며 헤더는 header로 시작해 header로 끝남.

 - hgroup
   헤더에서 사이트의 제목이나 슬로건이 담겨지는 부분

 - nav
   사이트의 메뉴를 이루는 부분.  메뉴는 사이트의 전체메뉴이거나 특정한 상황에서만 보여지는
   메뉴일 수 있으며 필요하다면 header안에서 2개 이상의 nav요소가 사용될 수 있음.

 - section
   이 태그안에는 화면에 보여일 웹페이지의 주요 컨텐츠를 담아두며 일종의 본문에 해당

 - article
   section 안에서 주제별로 구분되는 본문을 배치

 - aside
   화면의 좌, 우측에 보여지는 컨텐츠를 포함하는 영역

 - footer
   사이트의 하단부분을 구성하는 영역




위에 태그는 사이트의 구조에서 각각의 부분이 어떤 역활을 하고 있는지 명확하게 구분하기 위한 목적이
강하며 소스상에서 구분(정확히는 검색엔진등에서)되는 용도이므로 태그가 실제 웹 브라우저에서 표시될
때 어떤 특별한 처리가 이루어 지지는 않음

그냥 각 태그에 의미를 부여 해놓은 형태인데 이것은 '시멘틱 웹'이라 표현. 실제로 header나 hgroup, nav
태그를 제거해도 브라우저에 표시되는 모양새는 태그를 사용한 경우와 별반 다르지 않음.

따라서 필요하다면 개발자나 디자이너가 직접 CSS를 정의하여 목적에 맞게 디자인을 입혀야 함.

출처: http://lab.cliel.com/entry/HTML5-헤더구조 [CLIEL LAB]


참조 :
http://aboooks.tistory.com/347

CSS : media queries

Media query는 CSS3에 포함되어 있으며, 콘텐트의 변경 없이도 특정한 범위에 속하는 출력기기들에 
맞춤형으로 콘텐트의 프리젠테이션을 변경해 줌.

문법 (css 파일)


논리 연산자, 쉼표, not키워드 등 미디어쿼리를 사용하는데 여러가지 방법으로 구성할 수 있음
자세한 내용은 공식문서 참조.

참조:
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

CSS : article, section 요소

<article>요소
내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담음. 주로 블로그 글, 포럼 글, 뉴스 기사 등

 - 브라우저 지원
   

<section>요소
서로 관계 있는 문서를 분리하는 역할, 주로 문서를 다른 주제에 구분짓기 위해 사용

 - 브라우저 지원
   

내용이 독립적이고 스스로 설 수 있는 내용은 <article>요소
내용이 서로 관계가 있다면 <section>요소
의미적으로 관계가 없다면 <div>요소 (div는 오직 내용을 묶는 역할)

여러개의 section을 article로 묶거나 여러개의 article을 section으로 묶을 수 있음

참조 :
http://aboooks.tistory.com/346
https://developer.mozilla.org/ko/docs/Web/HTML/Element/article

CSS : Flexbox

요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아보자.

flex box 레이아웃에서 가장 중요한 컴포넌트 두 개는 container 와 items !!

수평 레이아웃
container { display: flex; }

items 는 알아서 수평축으로 정렬

수직 레이아웃 
.container { display: flex; flex-direction: column; }

중심축은 수평축이고 교차축은 수직축, flex-direction: column 을 추가하면 이 두 개의 축을 전환

Justify content and Align items (items 들을 중심축의 중앙에 정렬)
.container { display: flex; flex-direction: row; justify-content: center; }

items 을 다시 수평으로 만들려면, flex-direction 을 column 에서 row 로 변경
justify-content 나 align-items 와 같은 속성들은, 중심축과 교차축에 기준하여 items 을 정렬

align-items 를 이용하여 교차축의 중앙에 정렬
.container { display: flex; flex-direction: row; justify-content: center; align-items: center; }

Items (align-self 속성을 이용하여 첫 번째 item 의 위치를 조정)
.item1 { align-self: flex-end; }

각각의 아이템에 CSS 효과 적용 


참고 :
https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

2017년 3월 14일 화요일

React 개발하기 전에 알아야 할 기술 : redux-thunk

redux-thunk
비동기 처리 시 사용되는 미들웨어로 Dispatcher가 action creator가 만든
action 객체 외 다른 함수도 처리

참고로 dispatch() 함수 내부에 들어가는건 action 객체, 혹은 action creator 함수로
객체만 반환 할 뿐 HTTP 요청을 하거나 할 수 없음.
1. redux-thunk 설치(로컬)
   npm install --save redux-thunk

2. 예제코드
 - 스토어 객체가 생성된 파일에 'redux-thunk' 로드 및 적용
   
   
 - Action Type
   
 - action creators
   

여기서 생성된 'shopListRequest' 함수는 dispatch를 파라미터로 갖는 thunk를 리턴.
컴포넌트에서 dispatch (shopListRequest(isInital, listType)) 요청하면 미들웨어를 통해 thunk 처리

생성된 함수 내부에서 'axios'모듈을 활용하여 AJAX 요청 함. 그리고 그 결과 값에 따라 다른 
action creators 을 dispatch 함

axios는 ES6의 Promise를 사용하기때문에 .then()이 사용가능

thunk ? 
특정 작업의 처리를 미루기위해서 함수로 wrapping 하는것을 의미


참조 :

React 개발하기 전에 알아야 할 기술 : react-timeago

'react-timeago' 모듈은 시간을 계산하여 몇 분전인지 나타내주는 컴포넌트로
쉽게 말하면 페이스북이나 인스타그램에 게시글을 남겼을때 몇 시간전에 남겼는지 나타내주는 모듈

1 . 설치 (로컬) : 
npm install --save react-timeago

2. 모듈 불러오기
  var TimeAgo = require('react-timeago')
  (ES6 : import TimeAgo from 'react-timeago' )

3. 예제코드
 - 모듈 불러오기
   
 - Date 객체 생성
   
 - 컴포넌트 생성
   
 
모듈 하나로 간단하게 기능을 구현할 수 있음. 예제 코드에서 Date 객체에 특정시간으로
생성하면 몇달전, 몇일전으로 나타나는걸 확인할 수 있음.
   

4. 테스트 코드
   


이 외에도 TimeAgo 컴포넌트에 'formatter'를 활용하면 원하는 시간단위를 설정할 수 있음. 
자세한것 여기를 참조

참조 :
https://www.w3schools.com/jsref/jsref_obj_date.asp

2017년 3월 5일 일요일

Node.JS : Path 모듈

Path 모듈이란?
디렉토리 주소 구분자가 /인지 \인지 상관없이 환경에 맞게 주소를 완성

Path 모듈 사용


npm에 설치되어 있으므로 별도 설치가 필요없이 import하여 사용



 -  app.use : 미들웨어를 쓰는 부분이고, express.static은 정적 파일들이 있는 위치를 지정하는 부분

정적 파일이란 템플릿이 아닌 그냥 파일 (이미지, 동영상, HTML, CSS, JS 파일, 폰트 등)

 -  __dirname : 은 바로 현재 위치를 가리키는 Node.js의 전역 변수입니다.

비슷한 것으로 현재 파일 이름을 가리키는 __filename 변수가 있음

 - ' .. ' : 상위 폴더로 이동

정적 파일의 위치를 public 폴더로 설정하면 클라이언트에서 접근할 때 public/[파일 이름] 으로 접근하는
게 아니라, 그냥 [파일 이름]으로 접근

예를 들면 사용자가 public 폴더 안의 index.js 파일을 보고 싶으면 주소창에 ...
localhost:0000/public/index.js 가 아닌 localhost:0000/index.js 로 입력

사용자에게 보여주고 싶은 파일들만 public 폴더에 넣고, 나머지는 폴더 밖에 놓으면 public과 private을 
구분할 수 있어 서버 코드같은 민감한 것들은 감출 수 있음.


참조 :
https://www.zerocho.com/category/NodeJS/post/5789e8d91c9e1ff02bdedad3

React 개발하기 전에 알아야 할 기술 : 컴포넌트 선언

컴포넌트 생성시 class를 활용하지 않고 const를 사용하여 컴포넌트를 생성해보자.



여기서 함수의 파라미터로 "children"을 받는걸 볼 수 있다. 이 값은 클래스형태로 할 때
"this.props.children"과 동일하며 컴포넌트 사용 시 아래 코드처럼 사용됨.




참조 :
https://velopert.com/2597

2017년 3월 4일 토요일

React 개발하기 전에 알아야 할 기술 : React 에서의 Ajax 요청 (axios)

React 프로젝트에서 Ajax 와 같은 비동기 작업을 효율적으로 처리하는 방법을 알아보자.

HTTP Client 를 받을 필요 없이 jQuery 를 사용해도 되지만 HTTP Client 만을 위해서 jQuery 기능을 
사용하는건 낭비일 수 있어 오직 AJAX 기능만을 위해 만들어진 라이브러리 axios를 사용해보자.

1. axios 특징
 - Promise 기반 ( then 메서드 사용 )
 - 클라이언트 / 서버에서 동일하게 작동
 - 다양한 브라우저 지원 

2. axios 설치
$ npm install --save axios

3. axios 사용
 - GET 요청
   

 - POST 요청
   

axios. 뒤에 get 과 post 외에도, delete, head, post, put, patch 메소드를 뒤에 붙여서 사용 

 - 요청에 옵션을 설정 할 때
   

 - 메소드타입을 옵션으로 지정
   

 - Response 스키마 형식
   

API 함수 모듈화하여 컴포넌트에서 사용하는 과정은 여기를 통해 자세히 알아보자.

4. 구형 브라우저에서 Promise 기능 호환
Promise는 신형 브라우저에만 내장되어 있어 Promise 기능을 갖고있지 않은 브라우저 자바스크립트
엔진들을 호환시켜주기 위하여, polyfill 을 적용해보자.

 - 설치 : npm install --save promise-polyfill
 - 사용 : "src / index.js" 파일에 작성
   


참조:

React 개발하기 전에 알아야 할 기술 : React-router

React-router 란?
라우터는 사용자가 요청한 URL에 따라서 다른 결과물을 렌더링 처리
React는 View만 담당하는 라이브러리이므로 라우팅을 담당하는 "react-router"를 따로 설치해야함.

하나의 페이지만으로 동작하는 싱글 페이지는 특정페이지에 주소가 없으므로 접속하기 힘들고 북마크가
안되는 단점이 있지만 "react-router"를 사용하면 싱글 페이지와 같이 페이지 새로고침이 없으면서도 
주소를 가질 수 있게 됨.

조금 더 설명하자면 기존에 불러왔었던 자바스크립트 파일을 이용하여 페이지에서 기존 컴포넌트를 
언마운트 시키고 다른 컴포넌트를 마운트 함.
예를들어서, 웹의 헤더 컴포넌트와 같이 모든 페이지에서 존재하는 컴포넌트의 경우 페이지가 바뀌어도
처음부터 렌더링 할 필요 없이 그대로 유지된다는 것!

React-router 설치
$ npm install --save react-router

React-router 예제코드


React-router 객체
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

Router: react-router 의 주요 컴포넌트로서, 라우터의 속성을 정의하고 내부에서 라우트 설정
Route: 우리가 설정한 경로에서 어떤 컴포넌트를 렌더링 할 지 정하는 컴포넌트

이 라우트 컴포넌트의 자식에 또 다른 Route 컴포넌트를 넣으면 해당 자식 컴포넌트는 부모 라우트의 
서브 라우트가 됨.

IndexRoute: 라우트에서 서브라우트가 주어지지 않았을 때, 즉 특정 라우트의 / 경로로 들어 왔을 때,
                    이 라우트에서 지정한 컴포넌트를 보여줍니다.
browserHistory: HTML5 의 History API 를 사용하여 브라우저의 URL 변화를 주시하고, 조작

"history" 는 브라우저의 주소창이 어떻게 바뀌는지 주시하고 주소를 라우터에서 인식할 수 있도록 
location 객체로 파싱

Route 컴포넌트의 path 를 “/” 로 설정한것은 / 경로로 들어왔을땐 App 컴포넌트가 보이도록 설정
그 내부에는 여러개의 Route 들이 자식으로 있는데, 이 자식들은 URL 이 매칭 하는 경우, App 컴포넌트의
자식으로 처리

예를들어서, / 경로의 경우엔 IndexRoute 를 사용하여 Home 컴포넌트를 /about 경로의 경우엔 About
컴포넌트를 렌더링


참조:
https://velopert.com/2937

2017년 3월 3일 금요일

ES6 : Template Literal

Template Literal 이란?


위 코드로 충분히 이해 됐으리라 생각한다. 여기서 중요한것은 Template Literal을 쓸때는 
숫자키 1 옆에 있는 ` 이거다!!!


참조 :
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

React 개발하기 전에 알아야 할 기술 : Redux - react-redux 이해

react - redux
뷰 레이어 바인딩 도구로 컴포넌트에서  Redux를 사용할때 쉽게 처리

react - redux 특징
 - Provider : 컴포넌트에서 redux를 사용할 수 있도록 서비스 제공 (하나의 컴포넌트임)
   

자식 컴포넌트에 접근하기 위해서 connect 함수를 사용

 - connect([...options]) : 컴포넌트를 redux 에 연결하는 또 다른 함수를 반환
 - connect(option)(component)

component를 인수로 전달하면 component가 Redux에 연결되어 함수의 반환값으로 새로운 컴포넌트가
반환됨 (기본 컴포넌트는 변경되지 않고 새로운 컴포넌트가 반환)
옵션이 없을경우 this.props.store 접근 가능
(렌더링 시 store 사용하여 getstate로 특정값을 가져오거나 변화를 일으킬때 dispatch 처리)
단, 옵션이 있으면 편하게 처리할 수 있음

connect option
 - mapStateToProps (함수형태) - State를 파라미터로 가진 함수. State를 해당컴포넌트의 props로 연결
 - mapDispatchToProps (함수형태)- Dispatch를 파라미터로 가진 함수. Dispatch 함수를 props로 연결
 - mergeProps (함수형태)- State, Dispatch를 파라미터로 가진 함수. 컴포넌트에 연결할 props가
                                          State, Dispatch를 둘다 연결할때 사용 (별루 사용안함)
 - options (객체형태)- pure(true), withRef(false)로 되어있음 (보통 사용하지 않음)

영리한 컴포넌트를 redux 에 연결하기
 - connect 불러오기
   
 - 컴포넌트를 export default 하기 전에 connect 옵션 작성
   

여기서 mapStateToProps 상수의 state는 컴포넌트가 아닌 Store의 state를 가르키며 반환되는 값은
컴포넌트의 props 에 연결 됨

   
   

다음 mapDispatchToProps 상수는 dispatch를 파라미터로 받으며 액션을 보내줄 함수를 props로 연결
하기위해 우선 액션생성자들을 불러옴

액션생성자의 함수를 담당할 props를 함수로 생성하고 해당 액션생성자 함수를 dispatch로 설정
그러면, props로 지정된 함수가 실행되면 Store로  해당 액션생성자 함수가 전달됨(dispatch)

이부분을 쉽게 작성하기 위해 bindActionCreators를 사용한다. 첫번째 인수는 액션생성자가 들어있는
actions를 두번째 인수는 dispatch를 넣어준다. 액션생성자에 파라미터가 있어도 자동으로 설정 해줌

   

다음과 같이 connect 를 사용하여 컴포넌트를 Store에 연결하자. 작성해둔 옵션들을 파라미터로 넣는다.
렌더링 부분에 적용해보면..

   

그림으로는 이해하기 힘드므로 직접 해보자!

참조 :
https://www.youtube.com/watch?v=bp_eliWWWRA&list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC&index=28





2017년 3월 2일 목요일

React 개발하기 전에 알아야 할 기술 : Redux - Store 이해

Store
어플리케이션의 현재 상태(state)를 지니고 있으며 Redux의 "createStroe"를 불러와 Reducer를
인수로 전달하여 해당 함수를 실행함.

Store 특징
 - 애플리케이션의 현재상태를 지니고 있음
 - redux의 경우 하나의 store만 가짐 (flux는 여러개의 store 가짐)
 - dispatch(action) : 액션을 Reducer로 보냄
 - getState : 현재상태를 반환
 - subscribe(listener) :  상태가 바뀔때마다 실행될 함수를 설정. listener가 실행될 콜백함수

Store 생성
 - src / index.js 파일을 열어 다음과 같이 작성
   
 - 테스트 코드
   

Store와 컴포넌트에 연결하려면 App 컴포넌트를 Props로 받아 처리해야 하는데 그과정이 복잡하다.
이를 쉽고 편하게 처리해주는 것이 'react-redux' 라는 뷰레이어바인딩 도구이다.


참조 : 
https://www.youtube.com/watch?v=dmxA42uXo0I&index=27&list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC

React 개발하기 전에 알아야 할 기술 : Redux - Reducer 이해

Reducer
변화를 일으키는 함수

Reducer 특징
 - 비동기 작업, 인수변경 x
 - 동일한 인수 = 동일한 결과
 - 이전 상태와 액션을 받아서 다음 상태를 반환
   (이전 상태를 변경하는게 아니라 이전 상태를 복사하여 변화를 준다음에 반환)

Reducer 작성하기
 - reducers / list.js 파일 생성하여 "AtionTypes"를 불러온다.
   
 - reducers 초기값 설정
   (이전상태와 액션을 전달 받을때 처음에 이전 상태값이 없으므로 초기값을 설정해야함)
   
 - reducers 함수 생성
   

파라미터는 이전상태(state)과 액션(action)을 받으며 여기서 받은 액션은(action) 나중에 dispatch를 
통해 액션생성자 함수가 전달되며 타입(type.CREATE)에 따라 어떤작업을 처리할지 작성하면 됨.

 - 이전상태값 변경
   

리턴되는 값을 객체로 작성하게 되면 위 그림처럼 값이 하나일때는 문제가 되지 않지만 2개 이상의
값을 가지고 있을 경우 이전 상태값을 복사하였더라도 하나의 객체로 변환하여 반환하게 됨

따라서, ES6 스프레드 함수를 통해 이전 상태값을 복사하여 수정

루트 reducers 작성하기
 - reducers / index.js 파일 생성하여  Redux에서 제공하는 combineReducers 를 사용하여 합친다.
   

create라는 reducers를 하나 더 작성했다 가정하고 루트 reducers를 작성하면 그림과 같이 된다.


참조 :
https://www.youtube.com/watch?v=YdlbmiAtD_4&list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC&index=26


React 개발하기 전에 알아야 할 기술 : Redux - Action 이해

Action
작업에 대한 정보를 지니고 있는 객체

Action 이름 생성하기
 - 대문자와 _ 로  이름 작성 (CREATE)
 - acitons / ActionsTypes.js 파일을 생성하여 액션 작성(export로만 작성)
   

액션생성자 함수 생성하기 
Action을 객체로 생성을 위한 함수로 다음과 같은 형식으로 작성


액션객체의 필수값은 그림과 같이  "type"으로 어떤 종류의 액션인지를 넣어준다.
모든 액션을 하나하나 객체로 생성하기 힘드므로 액션생성자라는 함수를 만들어준다.

 - acitons / index.js 파일 생성하여 액션생성자 함수 작성
   (index로 정하는 이유는 불러올때 actions 디렉토리로 지정했을시 index파일이 로드되기 위함)
 - acitons / ActionsTypes.js 를 불러올때 export로만 작성되어 있으므로 다음과 같이 작성
   
 - 액션생성자 작성 (함수)
   


참조:
https://www.youtube.com/watch?v=_RwMVm1gVuM&list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC&index=25

React 개발하기 전에 알아야 할 기술 : 영민한(Smart) 컴포넌트와 우직한(Dumb) 컴포넌트

영민한 컴포넌트
 - 액션 처리를 책임진다.
 - 영민한 컴포넌트 밑의 우직한 컴포넌트가 액션을 보낼 필요가 있을 때, 영민한 컴포넌트는 props를
    통해서 우직한 컴포넌트에 함수를 보낸다.
 - 자기 자신의 CSS style을 가지고 있지 않다.
 - 자기 자신의 DOM을 거의 가지고 있지 않다. 대신, DOM 요소들을 관리하는 우직한 컴포넌트들을
    관리한다.

우직한 컴포넌트
 - 받은 함수를 콜백으로써 단순히 호출만 한다.
 - 액션에 직접 의존성을 가지지는 않는다. 이는 모든 액션을 props를 통해서 넘겨받기 때문이다.
   이말인 즉슨, 우직한 컴포넌트는 다른 로직을 가진 다른 애플리케이션에서 재사용될 수 있다는 뜻이다.
 - 어느정도 보기좋게 할만큼의 CSS style도 포함하고 있다
   (따로 style props를 받아 기본 style에 병합시켜서 style을 바꿀수도 있다).

영민한(Smart) 컴포넌트와 우직한(Dumb) 컴포넌트 비교



참조:
http://dobbit.github.io/redux/basics/UsageWithReact.html
http://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/

React 개발하기 전에 알아야 할 기술 : Snippets 사용하기 (Atom)

React에서 코드 작성시 손쉽게 작성하게 해주는 Snippets을 알아보자.

1. Atom에서 "react pakage" 설치
 - [Preferences] - [Settings] - [Pakages]에서 "react pakage" 설치
 - "react pakage" Settings 에서 Enabled For All Javascript Files 체크 (안할시 JSX 파일만 적용됨)
 - Settings 하단에 Snippets 명령어가 작성되어 있으니 참고할 것
 

2. Snippets 사용하기
"rcc6" 이라고 작성하면 컴포넌트 생성이 됨 (단, class가 아닌 createClass 문법을 사용)
이전 문법 (class)으로 작성하고 싶으면 Snippets을 직접 만들면 된다.

3. Snippets 직접만들기(class 문법)
 - 상단메뉴에서 Snippets 열어 하단에 코드를 붙여넣으면 됨
   (https://gist.github.com/velopert/8f22cf0830e65f6de8ae99808c5b92f5 velopert님 Snippets)
 - "rc" 입력하면 자동으로 컴포넌트 생성됨
 
 - 작성된 컴포넌트에서 첫줄에 "PropTypes"와 "defaultProps"가 미리 객체로 만들어 나중에
   설정하는지는 "JSX 작성가이드"를 참조하면 될 듯


참조:
https://www.youtube.com/watch?v=xX0eQLQ3IJw&list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC&index=24


React 개발하기 전에 알아야 할 기술 : Redux 이해

Redux 란?
Flux 아키텍쳐를 구현할 라이브러리로 컴포넌트간의 데이터교류 및 State 관리를 쉽고 간단하게 처리

Redux 특징
1. Single Source of Truth
애플리케이션의 state를 위해 단 한개의 store를 사용 (Flux에서는 여러개의 store 사용)

2. State is Read-only
애플리케이션의 store의 state를 직접 변경할 수 없음. state를 변경하기 위해서 무조건 action이
dispatch되어야 함

3.Changes are made with pure Function
action 객체를 처리하는 함수를 reducer라고 부르며 reducer는 정보를 받아서 사태를 어떻게 업데이트
할지 정의함.

!Reducer 특징
 - 순수함수로 작성 (비동기 처리 X), 즉 네트워크 및 데이터베이스 접근이나 인수변경 X
 - 같은 인수로 실행된 함수는 언제나 같은 결과를 반환
 - '순수하지 않은' API 사용불가 ( "Date.now()"," Math.random()" 등 )


Redux 설치(create-react-app 프로젝트)

명령어 : npm install --save redux react-redux

여기서 react-redux는 뷰레이어바인딩으로 없어도 redux 사용이 가능하나 react-redux 사용하며
컴포넌트에서 redux를 쉽게 연결할 수 있음


참조:
https://www.youtube.com/watch?v=59XSBf00GpY&index=21&list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC#t=1.291587
http://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/


React 개발하기 전에 알아야 할 기술 : Flux 이해

Flux 란?
라이브러리나 프레임워크가 아닌 추상적인 개념으로 애플리케이션에서 데이터를 취급하기 위한 패턴

Flux 와 MVC 비교
 MVC 
 
 
 - 작은 애플리케이션 문제없이 동작하지만 규모가 커지면 Model과 View 객체가 늘어나 복잡한
   상태가 되며 여기서 무한루프나 다른 이슈가 발생할 수 있음 (그 문제를 해결하는데도 힘듬)

 Flux
 
 - 시스템에서 어떤 Action을 받아 Dispatcher가 Action을 통제하여  Store에 있는 데이터를 업데이트
   변동된 데이터가 있으면 View에서 렌더링처리
 - View에서 Action이 발생하면 Store가 아닌 Dispatcher 전달하여 작업이 중첩되지 않도록 처리함

 Redux와 Flux에 대해 간단히 개념만 이해하고 자세한 내용은 참조된 카툰안내서를 통해 더 알아보자.


참조 :
http://bestalign.github.io/2015/10/06/cartoon-guide-to-flux/
http://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/
https://www.youtube.com/watch?v=LRUQfJLuPA8&index=21&list=PL9FpF_z-xR_GMujql3S_XGV2SpdfDBkeC

2017년 3월 1일 수요일

React 개발하기 전에 알아야 할 기술 : localStorage 활용하기

localStorage
HTML5부터 지원이 되는 저장공간으로 쿠키보다 더 많은 용량을 저장할 수 있음.

예제코드


localStorage 삭제는 "localStorage.clear()" 메서드 사용하면 됨

참조:
http://www.w3schools.com/html/html5_webstorage.asp