29. create - React - app
Facebook Incubator 라는 깃헙
저장소에서 만들어 졌고,
React 개발 환경을 셋팅하는데
어려움을 겪는 유저들을 위해
나온 개발 환경 툴
$npm test
$npm build
$ npm deploy
▸ 테스트 코드 실행
▸ 빌드
▸ 배포
React Script
Create React App
npm install -g 명령어로 글로발 옵션으로 설치. 실행하면
React Script를 포함한 기본 프로젝트를 만들어 줌.
Webpack, Jest, Babel 등의 React를 개발 하기 위한 기본이
되는 프로젝트들을 포함하고 있으며, 간단한 명령어들을 통해
개발 부터 배포할 수 있도록 도와줌
Webpack
Gulp, Grunt 등의 빌드 스크립트가 난립하
는 세기말을 평정한 빌드 대장군
Jest
React 용 Test 프레임워크
Babel
ES5, ES2015, ES2016등의 JavaScript 표준이 난
무하는 환경을 극복하게 해주는 마법사
30. create - React - app의 TEST & Build
React의 Test Framework인
Jest를 사용하면 TDD가 가능해 짐.
React-Script 가 가지고 있는
Webpack과 hot-loader는
개발 생산성을 크게 향상시킴
$npm test
$npm build
$ npm deploy
▸ 테스트 코드 실행
▸ 빌드
▸ 배포
tests 폴더 아래에 있는 .js파일
.test.js 을 접미사로 가진 파일
.spec.js 를 접미사로 가진 파일
- $npm test
ES2016,ES2017->ES5 (Babel)
minify JS, CSS, img
watchfy and build 속도의 경이로움
Jest
- $npm buildWebpack
32. create - React - app의 Github page
소스 저장소인 Github에 push
(commit) 하면 동시에
클라우드 공간에 소스를 내려받아
가상머신을 스냅샷 후 빌드 및 테스트
를 해서 Continuous Integration을 할
수 있게 도와주는 툴
$npm test
$npm build
$ npm deploy
▸ 테스트 코드 실행
▸ 빌드
▸ 배포
travis.yml
language: node_js
node_js:
- 4
- 6
cache:
directories:
- node_modules
script:
- npm test
소스 push pull
build / testnotify
33. Martin 옹
여기서 잠깐!
serverless architecture
Serverless architectures refer to applications that significantly depend on
third-party services (knows as Backend as a Service or "BaaS") or on custom
code that's run in ephemeral containers (Function as a Service or "FaaS"), the
best known vendor host of which currently is AWS Lambda. By using these
ideas, and by moving much behavior to the front end, such architectures
remove the need for the traditional 'always on' server system sitting behind
an application. Depending on the circumstances, such systems can
significantly reduce operational cost and complexity at a cost of vendor
dependencies and (at the moment) immaturity of supporting services.
34. user persona
애자일 개발자 김개발 씨는 IT 트렌드에 무척이나 민감하다.
아침 스탠드 업 시간에 일간 보고만 하는 것이 매우 못마땅한데
기술적인 이야기를 같이 하면 좋겠다.
35. user story
1. 김개발은 아침 스탠드업 시간에 같이 이야기를 나눌 수 있는 주제를 위해 스탠드업이라는 웹 앱을
찾아간다. 이렇게 함으로써 사람들과 IT에 대한 주제로 커뮤니케이션을 할 수 있다.
2. 김개발이 사이트를 방문해서 자신이 어제 유심하게 읽은 글을 올릴 수 있다. 이렇게 하면 다른 사람
들이 볼 수 있다.
* 에디터 창은 하나만 있고 거기서 글을 작성하고 업로드 하면 글이 외부 클라우드 공간에 저장이
된다.
3. 김개발이 작성한 글이 목록으로 보여진다. 이렇게 함으로써 다른 사람들이 목록을 확인할 수 있다.
* 목록글은 해당IT 주제의 대표 이미지와 제목, 간단 요약등이 들어 있는 카드의 리스트 형태로 나
열이 되어야 한다.
37. Application at a glance
Create React App 과 Jest등의 개발 환경 혹은 툴들을 이용해
DBAAS 혹은 FAAS를 활용한 소셜미디어 플랫폼을 만들어 보자
Dev Tools DBAAS/FAAS
Embed.ly
Firebase
▸ oEmbed 스펙을 기본으로 하여
링크들의 기본 정보들을 얻어 오
는 역할을 하는 FAAS (Function
As A Service)
▸ Realtime Database를 기본으로
Authentication 및 Analysis 등
을 강점으로 내세우는 구글의
차세대 클라우드 플랫폼
▸ 요금제가 엄청나게 매력적
▸ 모바일 서비스에 완전 최적화
(lambda?)
39. Day 1. Git 설정 & README 작성
1. 김개발은 아침 스탠드업 시간에 같이 이야기를 나눌 수 있는 주제를 위해 스탠드업이라는
웹 앱을 찾아간다. 이렇게 함으로써 사람들과 IT에 대한 주제로 커뮤니케이션을 할 수 있다.
2. 김개발이 사이트를 방문해서 자신이 어제 유심하게 읽은 글을 올릴 수 있다. 이렇게 하면 다
른 사람들이 볼 수 있다.
* 에디터 창은 하나만 있고 거기서 글을 작성하고 업로드 하면 글이 외부 클라우드 공간에
저장이 된다.
3. 김개발이 작성한 글이 목록으로 보여진다. 이렇게 함으로써 다른 사람들이 목록을 확인할
수 있다.
* 목록글은 해당IT 주제의 대표 이미지와 제목, 간단 요약등이 들어 있는 카드의 리스트 형
태로 나열이 되어야 한다.
40. Day 2. user story 1 - create-react-app
$cd standup && create-react-app . //.주의
$npm install create-react-app -g //글로발 옵션
$git branch day1 && git checkout day1 && ls -al
{
"name": "standup",
"version": "0.1.0",
"private": true,
"homepage": "https://ehrudxo.github.io/standup",
"devDependencies": {
"react-scripts": "0.7.0"
},
"dependencies": {
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build"
}
}
“김개발은 아침 스탠드업 시간에 같이
이야기를 나눌 수 있는 주제를 위해
스탠드업이라는 웹 앱을 찾아간다.”
41. Day 2. user story 2 - logo, favicon, editor
김개발이 사이트를 방문해서 자신이 어제 유심하게 읽은 글
을 올릴 수 있다. 이렇게 하면 다른 사람들이 볼 수 있다.
* 에디터 창은 하나만 있고 거기서 글을 작성하고 업로드
하면 글이 외부 클라우드 공간에 저장이 된다.” 작성자 (writer)
작성일 (createdAt)
내용 (contents)
링크
- 링크 이미지
- 링크 제목
- 링크 설명
- 링크 주소
42. Day 3. user story 2 - firebase, jest setting
김개발이 사이트를 방문해서 자신이 어제 유심하게 읽은 글
을 올릴 수 있다. 이렇게 하면 다른 사람들이 볼 수 있다.
* 에디터 창은 하나만 있고 거기서 글을 작성하고 업로드
하면 글이 외부 클라우드 공간에 저장이 된다.”
44. Day 4. user story 2 - firebase dao
Jest 와 Firebase 의 궁합은?
45. Day 5. user story 3 - card, list, embed.ly, axios
“김개발이 작성한 글이 목록으로 보여진다.
이렇게 함으로써 다른 사람들이 목록을 확인
할 수 있다.”
46. Day 5. user story 3 - card, list, embed.ly, axios
“김개발이 작성한 글이 목록으로 보여진다.
이렇게 함으로써 다른 사람들이 목록을 확인
할 수 있다.”
Promise 패턴!!! Jest와도!!!
안녕 lambda
47. Day 5. user story 3 - card, list, embed.ly, axios
“김개발이 작성한 글이 목록으로 보여진다.
이렇게 함으로써 다른 사람들이 목록을 확인
할 수 있다.”
48. Day 6. user story 4 - authentication, redux & router
“김개발은 google ID를 가지고 로그인을 할 수 있다.
이렇게 함으로써 내가 쓴 글만 따로 모아서 볼 수 있
다.” <Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={CardList}/>
<Route path="/login" component={Login}/>
<Route path="*" component={NotFound}/>
</Route>
</Router>
</Provider>,
49. Day 6. user story 4 - authentication, redux & router
STORE
REDUCER
ACTION
글을 가지고 와서
내 것만
보여 주세요
50. Day 6. user story 4 - authentication, redux & router
STORE
REDUCER
ACTION
글을 가지고 와서
내 것만
보여 주세요
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/
favicon.ico">
<script src="https://www.gstatic.com/firebasejs/3.6.1/
firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/
live/1.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://
www.gstatic.com/firebasejs/ui/live/1.0/firebase-ui-
auth.css" />
<title>Stand Up!!</title>
</head>
<body>
<div id="root"></div>
</body>
</html><firebaseui>
npm 모듈이 없다능!!