행사 사진 : https://goo.gl/LB6eEp

1. REACT와 함께하는
SERVERLESS SOCIAL MEDIA 개발기

2. REACT와 함께하는
SERVERLESS SOCIAL MEDIA 개발기
삽질기

4. 개발에 최적화된 조직 및 환경
’15. 11. 10
PM / DEV / Designer Whole team 구성
프로세스 개선 을 위한 전사 T/f

5. user centric Short Dev. Cycle pair work whole team
ACT가 일하는 법

6. user centric Short Dev. Cycle pair work whole team
불필요한 기능개발 X 테스트커버리지 80% 이상 개발역량 상향평준화 개발리드타임 최소화
ACT가 일하는 법

7. Act의 오픈소스
A N G E L?

8. Stand up

9. Stand up

10. “해결책이 시급하다”

11. 대화의 공간 정보공유의 공간
해결책

12. 팀원들이 자유롭게
정보를 공유 할 수 있는
공간을 만들자

13. 일단, Agile 하게 해보자
최고의 플레이
조재성
ux designer
Target User
팀 구성원 누구나
simple design
공유할 것, 공유된 것
Usability
일반 웹 브라우저에서
쉽게 공유가능
collaboration

14. 자괴감

15. 자괴감

17. 결과는…
15 2설치한 사람

18. 결과는…
15 2설치한 사람 삭제한 사람

19. “패인을 분석하여 보고하라”

23. 제약사항 1.
사내에서 스탠드 업때 사용할 앱이 필요 하지만
외부 네트워크에 있어야 카톡같은 메신저로 공유 가능
호스팅도 되어야 함!

24. 제약사항 2.
돈도 들지 않아야 함
(당분간은….흠….쭈욱?)

25. 제약사항 3.
개발하고 커밋하면
테스트코드가 바로 돌아가는
Devops 환경도 필요하지!

26. 제약사항 4.
테스트코드로 작성이 되어 있어야 해!

27. 제약사항 5.
멀티플랫폼은?

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

31. create - React - app의 Github page
Create React App 의 package.json파
일의 homepage를 깃헙의 호스팅 도메
인을 설정해 주고,
npm 모듈인 gh-pages를 설치하면 npm
명령어로 깃헙 페이지에 빌드 가능
$npm test
$npm build
$ npm deploy
▸ 테스트 코드 실행
▸ 빌드
▸ 배포
Package.json
{
"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"
}
}
$NPM INSTALL GH-PAGES
master
gh-pages(호스팅 되는 브랜치)
day1… day7
HOSTING URL

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 주제의 대표 이미지와 제목, 간단 요약등이 들어 있는 카드의 리스트 형태로 나
열이 되어야 한다.

36. 공유하자!
3 VS 30

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?)

38. https://github.com/ehrudxo/standup
도경태 를 영타로
7 days of practice

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
김개발이 사이트를 방문해서 자신이 어제 유심하게 읽은 글
을 올릴 수 있다. 이렇게 하면 다른 사람들이 볼 수 있다.
* 에디터 창은 하나만 있고 거기서 글을 작성하고 업로드
하면 글이 외부 클라우드 공간에 저장이 된다.”

43. Day 4. user story 2 - firebase dao

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 모듈이 없다능!!

51. Day 7. user story 4 - group

52. wrap up and devops

53. 그런데 말입니다

54. 다시 agile하게 해봅시다

55. react-native 겉핥기
Javascript
요즘 핫한 Functional Programming
Centralised routing
Test Driven Development

56. get started…

57. get started…
뭐지…

58. get started…
나의 자바스크립트는 이렇지 않아!!!

59. mobile web의 고통
VIEW 3VIEW 3VIEW 3VIEW 6…
VIEW 3
VIEW 4
VIEW 2
VIEW 1
1초
1초
VIEW 5
1초
1초
1초

60. redux
VIEW 3
VIEW 2
VIEW 1
Action
현재 State
바뀐 State
Subscribe
Subscribe
Test scope

61. 한층 업옆그레이드 된 느낌
1. 좋은 패턴을 알았다
2. 한 눈에 보이는 Routing (React-native-router-flux)

62. #그런데 state는?
#팩트폭격

63. summary

64. q & A
thanks for your attention