[react] reactJs 튜토리얼

React & Express 를 이용한 웹 어플리케이션 개발하기
https://channel9.msdn.com/Events/Channel9-Korea/dev-fundamental/Visual-Studio-Code-1
http://martian36.tistory.com/1412

강좌 소개

ES6: 2015년에 업데이트된 공식 JS 문법
Redux : 어플리케이션 상태 관리
Webpack: 로더 및 플러그인으로 빌드 도와줌
Express 프레임워크
MongoDB / mongoose

React.js 소개

Javascript 어플리케이션을 어떻게 구조화할까 ?

• reactjs : 프레임워크가 아닌 라이브러리

  프레임워크 : 필요 기능이 만들어져 있어서 틀이 있고, 그 안을 넣어 채우는것. 틀에서 벗어나기가 어려움
  라이브러리 : 필요한 곳에 갖다 쓰는 개념. 다른 라이브러리와 충돌하지 않음
  'A Javascript library for building user interfaces'
  Angular를 대체할 수 있을까? X
  둘은 오렌지와 사과 같은 것
  Angular는 프레임워크, React는 뷰를 담당 // 같이 사용 가능
  

• Virtual DOM

  // jQuery
  $('#content').html('whatever');
  // javascript
  document.getElementById('content').innerHTML = 'whatever';
  

React.js 장점과 단점

• 장점 ?

  1. virtual DOM 사용
  2. 배우기 간단
  3. 뛰어난 Garbage Collection, 메모리 관리, 성능
  4. 서버&클라이언트 렌더링 지원
  5. 서버 : 초기 구동 딜레이 & SEO (검색엔진최적화)
  6. 간편한 UI 수정 및 재사용
  7. 페이스북이 밀어준다
  8. instagram, airbnb: 모두 react로 구현
  9. 다른 프레임워크나 라이브러리와 혼용 가능 (개발 아ㅗㄴ료된 서비스에도 적용 가능)

• 단점 ?

  1. view only
  2. IE8이하 지원X (호환 폴리스 사용하면 가능)

Codepen 설정, ES6 클래스

JSX

• babel에서 jsx로더를 사요으 형태 코드를 변환.
• Container Element 안에 감싸줘야됨.
• Inline Style : camelCase
• 주석: {/ ... /} // container element 안에서 작성되어야 함.

  class Codelab extends React.Component{
   render(){
       let text = 'Codelab';
       let style= {
           color: 'red',
           backgroundColor: 'aqua'
       }
       return (
           <div style={style}/>{text}</div>
           )
   }
  }
  class App extends React.Component{
   render(){
       return (<Codelab />);
   }
  }
  ReactDOM.render(<App />, document.getElementById('root'));
  

  <div id='root'></div>
  

props

• 컴포넌트 내부의 immutable data
• jsx 내부에 {this.props.propsName}
• 사용할 때 propsName ='value'
• this.props.children은 기본적으로 가진 props
• default값 설정, class 선언 끝난 후
• type 검증

state

• 유동적인 데이터
• jsx 내부에 {this.state.stateName}
• 초기값 설정이 필수, 생성자에서 this.state={} 설정
• 값을 수정할 때는, this.setState({})
• 렌더링 다음엔 this.state = 절대 사용하지 말 것

컴포넌트 매핑

Javascript - Map
arr.map(callback, [thisArg])

callback : 3가지 인수

• currentValue : 현재 처리되고 있는 요소
  
• index : 현재 처리되고 있는 요소의 index값
  
• array : 메소드가 불려진 배열
  thisArg(선택항목) : callback함수 내부에서 사용할 this값으 설정

작업환경 설정하기

git, npm/node, mongodb, codeeditor(ATOM)- package(react, jshint)

React Project 만들기

Global Dependency 설치

npm install -g webpack webpack-dev-server

1. webpack : 브라우저 위에서 import(require)를 할 수 있게해주고 자바스크립트 파일들을 하나로 합쳐줌
2. webpack-dev-server : 별도의 서버를 구축하지 않고도 static 파일을 다루는 웹서버를 열 수 있으며 hot-loader를 통하여 코드가 수정 딜 때마다 자동으로 리로드 되게 할 수 있다.

프로젝트 생성

npm init

React 설치

npm install --save react react-dom

개발 의존 모듈 설치

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
npm install --save-dev react-hot-loader webpack webpack-dev-server

Hot Module Replacement | React Hot Loader

react-hot 실패

주소록(CONTACT) 만들기

Contact 검색기능 구현 | input, sort, filter

export default
javascript array sort | filter

Contact 선택기능 구현 | React.js 기초개념 응용

state 내부 배열 처리하기 | Immutability Helper / ES6 spread

1. concat

   this.setState({
     list: this.state.list.concat(newObj)
   })
   

2. Immutability Helper

   npm install --save react-addons-update
   import update from 'react-addons-update'

   • 원소 추가

     this.setState({
     list: update(
         this.state.list,
         {
             $push: [newObj, newObj2]
         }
     )
     });
     

   • 원소 제거

     this.setState({
     list: update(
         this.state.list,
         {
             $splice: [[index, 1]]
         }
     )
     });
     

   • 원소 수정 (객체도 가능) ```js this.setState({ list: update(

     this.state.list,
     {
     

         [index]: {
             field: {$set: "value"},
             field2: {$set: "value2"}
         }
     }
 )

});

3. ES6 spread
> npm install --save babel-preset-stage-0
```js
var changed = [ ...arr,slice(0,2), arr,slice(3,4) ]

Contact 추가/삭제/수정 기능 구현 | Immutability Helper 적용하기

Contact 데이터 추가기능 구현 | 컴포넌트 응용

Contact 데이터 삭제/수정 기능 구현 | 컴포넌트 응용

Contact 엑스트라 기능 구현 i | KeyPress, ref

outdated usage

 class Hello extends React.Component {
     render() {
         return (
             <div>
                 <input ref='myInput'/>
             </div>
         );
     }
     componentDidMount(){
         this.refs.myInput.value = 'Hi';
     }
 }
 export default Hello;

Current Use

 class Hello extends React.Component {
     render() {
         return (
             <div>
                 <input ref={(ref) => {this.input=ref}}/>
             </div>
         );
     }
     componentDidMount(){
         this.input.value = 'Hi';
     }
 }
 ReactDOM.render(
     <Hello/>,
     document.getElementById('app')
 )
 export default Hello;

Component LifeCycle API

참고
Component LifeCycle API

1. componentWillMount : DOM에 만들어지기 전
2. componentDidMount : 첫 렌더링 마치고 실행(ajax처리)
3. componentWillReceiveProps : props 을 받을 때 실행
4. shouldComponentUpdate : props/state변경시 리렌더링 할지말지 결정
5. componentWillUpdate : 컴포넌트 업데이트 전 실행 (setState X)
6. componentDidUpdate : 컴포넌트 리렌더링 마친 후 실행 (setState X)
7. componentWillUnmmount : 컴포넌트가 DOM에서 사라진 후 실행

Contact 데이터 새로고침해도 유지하기 | localStorage

html5의 localStorage

 let object = {text:'codelab'};
 localSstorage.state = object; //text형만 저장 가능
 localSstorage.state = JSON.stringify(object);
 JSON.parse(localSstorage.state);

Redux

Redux: 배경지식 | MVC, FLUX

flux architecture를 구현한 library
Flux?

일종의 아이디어. 추상적인 개념. 이것을 구현한게 Redux
Action > Dispatcher > Store > View
View > Action > Dispatcher

Flux 로의 카툰안내서

Redux: 특징과 흐름

3가지 원칙

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사용 불가. (Data.now(), Math.random() 등)

Redux로의 카툰 안내서

Redux: 프로젝트 준비하기 | create-react-app

create-react-app

npm install -g create-react-app
create-react-app redux-example
npm start
npm run build

Redux install

npm install --save redux react-redux

Redux: 프로젝트 구조 및 컴포넌트 생성

Redux: Action

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

1. 값을 증가시키기 / INCREASE
2. 값을 감소시키기 / DECREASE
3. 새로운 색상 설정 / SET_COLOR

이름을 만들때는 대문자와 _

 {type: "INCREMENT"}
 {type: "DECREMENT"}
 {
     type: "SET_COLOR",
     color: [200,200,200]
 }

Redux: Reducer

• 변화를 일으키는 함수, 순수해야함

  • 비동기작업 X
  • 인수 변경 X
  • 동일한 인수 = 동일한 결과

• 이전상태와 액션을 받아서 다음상태를 반환(새로운상태)

Redux: Store

어플리케이션의 현재상태를 지니고있음
create Store

• dispatch(action)
• getState()
• subscribe(listner)
• replaceReducer(nextReducer)

Redux: react-redux | 컴포넌트에서 사용하기

Provider : 하나의 컴포넌트

 <Provider store = {store}>
     <App/>
 </Provider>

connect([...options]) : 컴포넌트를 reddux에 연결하는 함수를 반환
connect()(Counter)

• store에 연결 된 새로운 컴포넌트 클래스가 반환됨.
• 옵션이 없으면 this.props.store로 접근

connect(
    [mapStateToProps],
    [mapDispatchToProps],
    [mergeProps].
    [options]
)

BACKEND

소개

Web Server
Nodejs express / MongoDB

Node.js / Express.js 맛보기 | 라우팅, 모듈화

• nodejs : 그냥 javascript 런타임

• Express : 웹 프레임워크

  mkdir express-tutorial
  cd express-tutorial
  npm init
  npm install --save express
  npm install -g npm
  

기본 라우팅 app.METHOD(PATH, HANDLER)

• method : http 요청 메소드 - get, post, delete, put...
• path : 라우트 경로
• handler : 실행 될 콜백 함수

API 테스팅 도구 : POST MAN

Express | 미들웨어(middleware)

미들웨어?

요청 오브젝트, 응답 오브젝트, 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수

 var myLogger = function(req,res,next){
     console.log(req.url);
     next();
 }
 app.use(myLogger);

NPM으로 미들웨어 설치

npm install --save morgan body-parser

• morgan: 로깅 미들웨어
• body-parser: json형태 데이터 파싱 npm repo morgan
  npm install -g nodemon
  nodemon main.js
  

정적 파일제공

app.user('/',express.static('public'))

MongoDB 소개

• NoSQL
• json 형태로 data 저장
• 문서 지향적 database

설치 MongoDB 소개, 설치 및 데이터 모델링

1. MongoDB 공식 홈페이지의 다운로드 페이지에서 MSI 파일로 설치하면 C:\Program Files\MongoDB\Server\3.2\bin\ 에 설치됩니다.
2. CMD 창을 열어서 디렉토리로 들어가 mongod 를 실행하면 서버가 실행됩니다.
3. 기본 데이터베이스 디렉토리가 C:\data\db 이므로 실행 전에 폴더를 수동으로 만들어주셔야합니다.
4. 매번 MongoDB 설치 경로로 이동하는게 귀찮다면, 해당 디렉토리를 환경변수의 PATH 에 추가하세요. (윈도우 10 이하 버전에서는 기존 값 ; C:\Program Files\MongoDB\Server\3.2\bin 이런식으로 수정해야합니다.)

MongoDB 기본 명령어 (i) | 생성 및 제거

데이터베이스 제거

db.dropDatabase()

컬렉션 생성

db.createCollection(name, [options])

컬렉션 제거

db.collection_name.drop()

document 삽입

db.collection_name.insert(document)

document 제거

db.collection_name.remove(criteria, [justOne])

MongoDB 기본 명령어 (ii) | find()

https://velopert.com/479
document 조회

db.collection_name.find([query], [projection]).pretty()
db.collection_name.find({"value": { $gt: 100 }})

쿼리 연산자

operator 설명
$eq (equals) 주어진 값과 일치하는 값
$gt (greater than) 주어진 값보다 큰 값
$gte (greather than or equals) 주어진 값보다 크거나 같은 값
$lt (less than) 주어진 값보다 작은 값
$lte (less than or equals) 주어진 값보다 작거나 같은 값
$ne (not equal) 주어진 값과 일치하지 않는 값
$in 주어진 배열 안에 속하는 값
$nin 주어빈 배열 안에 속하지 않는 값

논리 연산자

operator 설명
$or 주어진 조건중 하나라도 true 일 때 true
$and 주어진 모든 조건이 true 일 때 true
$not 주어진 조건이 false 일 때 true
$nor 주어진 모든 조건이 false 일때 true

$regex 연산자

option 설명
i 대소문자 무시
m 정규식에서 anchor(^) 를 사용 할 때 값에 \n 이 있다면 무력화
x 정규식 안에있는 whitespace를 모두 무시
s dot (.) 사용 할 떄 \n 을 포함해서 매치

$where 연산자

db.articles.find( { $where: “this.comments.length == 0” } )

$elemMatch 연산자

db.articles.find( { “comments”: { $elemMatch: { “name”: “Charlie” } } } )

document 조회 projection

db.collection_name.find([query], [projection])

$slice 연산자

db.articles.find( { “title”: “article03” }, { comments: { $slice: 1 } } )

MongoDB 기본 명령어 (iii) | sort, limit, skip, update

sort() : 정렬 할 때 사용

db.numbers.find().sort({'value':1}) //-1

limit() : 보여지는 document 갯수 제한

db.numbers.find().limit(3)

skip() : 몇개를 생략할 때

db.numbers.find().skip(2)

페이징 적용

    var showPage = function(page){
        return db.numbers.find().sort({'value':1}).skip((page-1)   *2).limit(2);
    }
    showPage(1)

update

db.people.update({name:'abet'}, { $set: {age:20} })
db.people.update({name:'abet'}, {age:20}) // 새로운 document로 교체

특정 field 제거

db.people.update({name:'abet'}, { $unset: {score:1} })
db.people.update({name:'abet'}, {age:20}, {upsert:true}) // 없으면 새로 추가
db.people.update({name:'abet'}, { $push: {age:20} }) // 원소 새로 추가
db.people.update({name:'abet'}, { $push: { $each: ['C','java'], $sort: 1 } }) // 원소 새로 추가
db.people.update({name:'abet'}, { $pull: {age:20} }) // 원소 제거
db.people.update({name:'abet'}, { $pull: {age:{ $in: ['c','java'] }} }) // 원소 여러개 제거