REACT와 함께하는

SERVERLESS SOCIAL MEDIA 개발기

REACT와 함께하는

SERVERLESS SOCIAL MEDIA 개발기삽질기

개발에 최적화된 조직 및 환경

’15. 11. 10

PM / DEV / Designer Whole team 구성

프로세스 개선 을 위한 전사 T/f

user centric Short Dev. Cycle pair work whole team

ACT가 일하는 법

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

ACT가 일하는 법

Act의 오픈소스

A N G E L?

Stand up

Stand up

“해결책이 시급하다”

대화의 공간 정보공유의 공간

해결책

팀원들이 자유롭게 정보를 공유 할 수 있는

공간을 만들자

일단, Agile 하게 해보자

최고의 플레이

조재성ux designer

Target User

팀 구성원 누구나simple design

공유할 것, 공유된 것

Usability

일반 웹 브라우저에서 쉽게 공유가능

collaboration

자괴감

자괴감

결과는…

15 2설치한 사람

결과는…

15 2설치한 사람 삭제한 사람

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

제약사항 1.

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

제약사항 2.

돈도 들지 않아야 함 (당분간은….흠….쭈욱?)

제약사항 3.

개발하고 커밋하면 테스트코드가 바로 돌아가는 Devops 환경도 필요하지!

제약사항 4.

테스트코드로 작성이 되어 있어야 해!

제약사항 5.

멀티플랫폼은?

create - React - app

Facebook Incubator 라는 깃헙 저장소에서 만들어 졌고, React 개발 환경을 셋팅하는데 어려움을 겪는 유저들을 위해 나온 개발 환경 툴

$npm test

$npm build

$ npm deploy

▸ 테스트 코드 실행

▸ 빌드

▸ 배포

React Script

Create React Appnpm install -g 명령어로 글로발 옵션으로 설치. 실행하면 React Script를 포함한 기본 프로젝트를 만들어 줌.

Webpack, Jest, Babel 등의 React를 개발 하기 위한 기본이 되는 프로젝트들을 포함하고 있으며, 간단한 명령어들을 통해 개발 부터 배포할 수 있도록 도와줌

WebpackGulp, Grunt 등의 빌드 스크립트가 난립하는 세기말을 평정한 빌드 대장군

JestReact 용 Test 프레임워크

BabelES5, ES2015, ES2016등의 JavaScript 표준이 난무하는 환경을 극복하게 해주는 마법사

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

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

create - React - app의 Github page

소스 저장소인 Github에 push (commit) 하면 동시에 클라우드 공간에 소스를 내려받아 가상머신을 스냅샷 후 빌드 및 테스트를 해서 Continuous Integration을 할 수 있게 도와주는 툴

$npm test

$npm build

$ npm deploy

▸ 테스트 코드 실행

▸ 빌드

▸ 배포

travis.ymllanguage: node_js node_js: - 4 - 6 cache: directories: - node_modules script: - npm test

소스 push pull

build / testnotify

Martin 옹

여기서 잠깐!

serverless architectureServerless 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.

user persona

애자일 개발자 김개발 씨는 IT 트렌드에 무척이나 민감하다. 아침 스탠드 업 시간에 일간 보고만 하는 것이 매우 못마땅한데 기술적인 이야기를 같이 하면 좋겠다.

user story

1. 김개발은 아침 스탠드업 시간에 같이 이야기를 나눌 수 있는 주제를 위해 스탠드업이라는 웹 앱을 찾아간다. 이렇게 함으로써 사람들과 IT에 대한 주제로 커뮤니케이션을 할 수 있다.

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

3. 김개발이 작성한 글이 목록으로 보여진다. 이렇게 함으로써 다른 사람들이 목록을 확인할 수 있다. * 목록글은 해당IT 주제의 대표 이미지와 제목, 간단 요약등이 들어 있는 카드의 리스트 형태로 나열이 되어야 한다.

공유하자!

3 VS 30

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

https://github.com/ehrudxo/standup도경태 를 영타로

7 days of practice

Day 1. Git 설정 & README 작성

1. 김개발은 아침 스탠드업 시간에 같이 이야기를 나눌 수 있는 주제를 위해 스탠드업이라는 웹 앱을 찾아간다. 이렇게 함으로써 사람들과 IT에 대한 주제로 커뮤니케이션을 할 수 있다.

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

3. 김개발이 작성한 글이 목록으로 보여진다. 이렇게 함으로써 다른 사람들이 목록을 확인할 수 있다.* 목록글은 해당IT 주제의 대표 이미지와 제목, 간단 요약등이 들어 있는 카드의 리스트 형태로 나열이 되어야 한다.

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" } }

“김개발은 아침 스탠드업 시간에 같이 이야기를 나눌 수 있는 주제를 위해 스탠드업이라는 웹 앱을 찾아간다.”

Day 2. user story 2 - logo, favicon, editor

김개발이 사이트를 방문해서 자신이 어제 유심하게 읽은 글을 올릴 수 있다. 이렇게 하면 다른 사람들이 볼 수 있다.

* 에디터 창은 하나만 있고 거기서 글을 작성하고 업로드 하면 글이 외부 클라우드 공간에 저장이 된다.” 작성자 (writer)

작성일 (createdAt)

내용 (contents)

링크

- 링크 이미지

- 링크 제목

- 링크 설명

- 링크 주소

Day 3. user story 2 - firebase, jest setting

김개발이 사이트를 방문해서 자신이 어제 유심하게 읽은 글을 올릴 수 있다. 이렇게 하면 다른 사람들이 볼 수 있다.

* 에디터 창은 하나만 있고 거기서 글을 작성하고 업로드 하면 글이 외부 클라우드 공간에 저장이 된다.”

Day 4. user story 2 - firebase dao

Day 4. user story 2 - firebase dao

Jest 와 Firebase 의 궁합은?

Day 5. user story 3 - card, list, embed.ly, axios

“김개발이 작성한 글이 목록으로 보여진다. 이렇게 함으로써 다른 사람들이 목록을 확인할 수 있다.”

Day 5. user story 3 - card, list, embed.ly, axios

“김개발이 작성한 글이 목록으로 보여진다. 이렇게 함으로써 다른 사람들이 목록을 확인할 수 있다.”

Promise 패턴!!! Jest와도!!!

안녕 lambda

Day 5. user story 3 - card, list, embed.ly, axios

“김개발이 작성한 글이 목록으로 보여진다. 이렇게 함으로써 다른 사람들이 목록을 확인할 수 있다.”

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>,

Day 6. user story 4 - authentication, redux & router

STORE

REDUCER

ACTION

글을 가지고 와서

내 것만

보여 주세요

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

Day 7. user story 4 - group

wrap up and devops

그런데 말입니다

다시 agile하게 해봅시다

react-native 겉핥기

Javascript

요즘 핫한 Functional Programming

Centralised routing

Test Driven Development

get started…

get started…

뭐지…

get started…

나의 자바스크립트는 이렇지 않아!!!

mobile web의 고통

VIEW 3 VIEW 3 VIEW 3 VIEW 6…

VIEW 3

VIEW 4

VIEW 2

VIEW 1

1초

1초

VIEW 5

1초

1초

1초

redux

VIEW 3

VIEW 2

VIEW 1

Action

현재 State

바뀐 StateSubscribe

Subscribe

Test scope

한층 업옆그레이드 된 느낌

1. 좋은 패턴을 알았다

2. 한 눈에 보이는 Routing (React-native-router-flux)

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

summary

q & A thanks for your attention