2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 소개 부분 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 소개 부분 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
마이크로서비스는 큰 애플리케이션을 독립된 API와 데이터스토어를 가진 작은 단위의 서비스로 느슨하게 결합하여, 서비스를 책임지는 자율성 높은 팀의 자동화된 배포 및 운영 관리를 통해 민첩하게 비지니스 요구를 반영하는 아키텍처 구성 방식입니다. AWS 콘테이너(Container) 서비스 및 서버리스(Serverless) 아키텍처를 이용하여 마이크로 서비스를 구현하는 방법과 이를 위한 모범 사례를 소개합니다. 1) 개별 서비스 확장, 2) API 운영 및
Detailed Information: AWS 콘테이너(Container) 서비스 및 서버리스(Serverless) 아키텍처를 이용하여 마이크로 서비스를 구현하는 방법과 이를 위한 모범 사례를 소개합니다. 1) 개별 서비스 확장, 2) API 운영 및 관리, 3) 일관된 트랙잭션 유지, 4) 서비스 자동 배포, 5) 서비스 모니터링, 6) 서비스 보안 및 인증 그리고 7) 서비스 생태계 구성 등의 다양한 이슈에 AWS를 통한 해결 방법을 알아봅니다. 특히, AWS re:Invent에서 새로 출시한 AWS Step Functions, ECS 관리를 위한 Blox, Lambda@Edge 등의 서비스와 기능을 통해 마이크로서비스를 운영 관리하는 방법을 안내해 드립니다.
클라우드 컴퓨팅 기반 기술과 오픈스택(Kvm) 기반 Provisioning Ji-Woong Choi
TTA에 KVM 기반 프로비저닝 기술에 대한 데모 세션을 포함하는 세미나 관련 자료입니다. 클라우드환경으로 가고자 해서 Paas를 어떤 플랫폼위에 올린다면 그리고 가상화 환경이나 클라우드 환경으로 올린다면 어떤 환경으로 올릴것인가를 고민하여야 합니다.
그리고 이 hypervisor중에 cloud 환경에서 가장 주목받는 kvm을 기반으로 하는 두가지 가상화 클라우드 솔루션인 rhev와 openstack을 잠시 살펴볼 것입니다.
그리고 이러한 가상화 클라우드 환경에서 자동화 하는 솔류션을 어떻게 고려해야 하는가를 살펴보고, 그런 솔류션중에 하나인 아테나 피콕에 대해 살펴보겠습니다.
그리고 오픈스택환경하에서 구축해서 사용했던 사용기와 이를 자동화하기위해 개발자들이 사용했던 간단한 ansible provisioning 모습을 시연합니다.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
[IoT] MAKE with Open H/W + Node.JS - 3rdPark Jonggun
IoT 시대에 Opensource H/W 와 NodeJS 를 이용하여 누구나 나만의 H/W + S/W + Service 를 만들기 위한 교육 과정을 만들어 보았습니다.
상상했던 아이디어를 Raspberry Pi 기반으로 나만의 IoT 제품을 현실로 만들어 보세요.
Lesson 1 - Introduction : IoT개요, Opensource H/W, 라즈베리파이 기초
Lesson 2 - Linux : Raspberry Pi 에서 리눅스 활용하기
Lesson 3 - Node.JS : Raspberry Pi 에서 Node.JS 로 프로그래밍 하기
Lesson 4 - Sensor : GPIO 를 Node.JS 로 동작시켜 센서 제어하기
Lesson 5 - Project : Raspberry Pi 로 스마트폰 + 무선 IoT 오디오 제작
챕터가 완성되는대로 추가적으로 공유하겠습니다.
Circulus Site - http://www.circul.us
Circulus Group - http://group.circul.us
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트Dae Kim
CloudBread
클라우드 기반 무료 오픈소스 프로젝트로, 모바일 게임과 모바일 앱에 최적화된 게임 서버 엔진입니다. 모든 서비스는 마이크로소프트의 클라우드 서비스인 Azure에 최적화되어 동작하며, 안정성과 확장성을 목표로 개발 중입니다.
기능
•PaaS / DaaS 서버 엔진•PaaS, DaaS 로 손쉬운 개발 및 서비스 즉시 배포
•Real Auto Scale - PaaS
•개발/테스트/배포 = 통합 환경
•서비스 규모에 따른 앱 변경 없음
글로벌 론칭 아키텍처
•글로벌 론칭+데이터 동기화
•설계 부터 클라우드에 최적화된 아키텍처 및 프레임워크로 개발
•오픈소스 프레임워크 활용 개발
보안, 관리, 기술교육
•저장/통신에 표준 암호화 기술 적용
•기본 관리자 서비스 및 커스터마이징
•분석/관리 배치 작업 추가 제작 가능
개발자 그룹
•페이스북 사용자 그룹 : https://www.facebook.com/groups/cloudBreadProject/
지원되는 모바일 & 클라이언트환경
•iOS, Android, Windows Phone, Windows 스토어앱, Xamarin, PhoneGap, Sencha 등
•Microsoft Azure Mobile Service가 지원하는 모바일 및 다양한 클라이언트 플랫폼 지원 : http://azure.microsoft.com/ko-kr/documentation/services/mobile-services/
설치
•Wiki의 튜토리얼 설치 참조
프로젝트 설명
•모바일게임과 모바일 앱에서 사용되는 사용자의 패턴과 액션을 기록해 기능들을 제공
•클라이언트 모바일 디바이스는 게임서버로 JSON 방식의 데이터를 요청하고 서버가 해당 데이터를 처리 후 응답
•약 100여개의 비즈니스 로직이 기본제공(Wiki 참조)
•클라이언트는 마이크로소프트가 오픈소스로 직접 만들어 제공하는 라이브러리를 통해 서버로 API를 호출
실행 예제와 API 리스트는 Wiki 참조
Contribute/질문/토론
•페이스북 사용자 그룹 : https://www.facebook.com/groups/cloudBreadProject/
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 15 생성적 적대 신경망 : 회화 및 숫자 이미지 생성 신경망
15.1 생성적 적대 신경망의 구조
15.2 생성적 적대 신경망과 데이터 생성
15.3 생성적 적대 신경망의 순전파와 역전파 처리
15.4 구현하기 : 생성적 적대 신경망 모델 클래스
15.5 구현하기 : 생성적 적대 신경망을 위한 데이터셋
15.6 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 14 인코더-디코더 : 엠니스트 이미지 숫자 읽기 신경망
14.1 인코더-디코더의 구조
14.2 인코더-디코더와 언어 처리
14.3 필기체 숫자 이미지를 영어로 읽기
14.4 필기체 숫자 이미지열을 한글로 읽기
14.5 인코더-디코더의 분리 학습 문제
14.6 구현하기 : 인코더-디코더 모델 클래스
14.7 구현하기 : 인코더-디코더를 위한 엠니스트 데이터셋
14.8 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 13 오토인코더 : 엠니스트 이미지 재현 및 분류 신경망
13.1 오토인코더의 구조
13.2 지도학습과 비지도학습
13.3 잡음 제거용 오토인코더
13.4 유사 이진 코드 생성과 시맨틱 해싱
13.5 지도학습이 추가된 확장 오토인코더 모델
13.6 확장 인코더 모델을 위한 엠니스트 데이터셋
13.7 구현하기 : 확장 오토인코더 모델 클래스
13.8 구현하기 : 오토인코더를 위한 엠니스트 데이터셋
13.9 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 12 CNN과 RNN의 결합 : 장면 전환 판별 신경망
12.1 비순환 계층에서의 시계열 데이터 처리
12.2 동영상 처리를 위한 합성곱 신경망과 순환 신경망의 결합
12.3 출력 계층과 후처리 단계에서의 시계열 데이터 처리
12.4 장면 전환 데이터셋
12.5 실행 부담을 줄이는 방법들
12.6 구현하기 : 확장된 순환 신경망 클래스
12.7 구현하기 : 장면 전환 데이터셋
12.8 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 10 기본 셀 순환 신경망 : 오토마타 문장 판별 신경망
10.1 시계열 데이터
10.2 순환 계층과 순환 벡터의 활용
10.3 순환 계층의 입출력 형태
10.4 순환 계층을 위한 시계열 데이터의 표현
10.5 순환 계층의 순전파와 역전파 처리
10.6 오토마타를 이용한 수식 표현의 생성과 검사
10.7 구현하기 : 간단한 순환 신경망 클래스
10.8 구현하기 : 오토마타 데이터셋
10.9 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 9 인셉션 모델과 레스넷 모델 : 꽃 이미지 분류 신경망
9.1 인셉션 모델
9.2 레스넷 모델
9.3 인셉션 모델과 레스넷 모델 구현을 위해 필요한 확장들
9.4 구현하기 : 확장된 합성곱 신경망 모델 클래스
9.5 구현하기 : 더미 데이터셋 클래스
9.6 실행하기 : 인셉션 모델
9.7 실행하기 : 레스넷 모델
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 5 다층 퍼셉트론 모델 구조 : 꽃 이미지 분류 신경망
5.1 다층 퍼셉트론을 위한 클래스 설계
5.2 데이터 분할 : 학습, 검증, 평가
5.3 시각화
5.4 이미지 분류 문제와 꽃 이미지 분류 데이터셋
5.5 구현하기 : 모델 클래스
5.6 구현하기 : 데이터셋 클래스
5.7 구현하기 : 네 가지 데이터셋 파생 클래스
5.8 구현하기 : 꽃 이미지 분류 데이터셋 클래스
5.9 구현하기 : 수학 연산과 각종 부수적 기능
5.10 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 11 LSTM 순환 신경망 : 도시 소음 분류 신경망
11.1 순환 벡터와 기울기 정보의 소멸 및 폭주
11.2 LSTM의 구조와 동작 방식
11.3 쌍곡탄젠트 함수
11.4 LSTM 계층의 순전파와 역전파 처리
11.5 주파수 스펙트럼 분석을 이용한 음원 처리
11.6 음원 분류 데이터셋
11.7 구현하기 : LSTM 신경망 클래스
11.8 구현하기 : 음원 분류 데이터셋
11.9 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
다섯 가지 정규화 확장 : 꽃 이미지 분류 신경망
8.1 부적합과 과적합
8.2 L2 손실
8.3 L1 손실
8.4 드롭아웃
8.5 잡음 주입
8.6 배치 정규화
8.7 정규화 기법 도입을 위한 계층의 추가
8.8 구현하기 : 정규화 확장 클래스
8.9 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 7 간단한 합성곱 모델 : 꽃 이미지 분류 신경망
7.1 다층 퍼셉트론의 문제점과 새로운 구조의 필요성
7.2 합성곱 계층
7.3 합성곱 연산의 패딩과 건너뛰기
7.4 풀링 계층
7.5 채널의 도입과 커널의 확장
7.6 합성곱과 풀링의 역전파 처리
7.7 합성곱 신경망의 일반적인 구성
7.8 세 가지 합성곱 연산 방법
7.9 다양한 계층의 처리를 위한 모델 확장
7.10 구현하기 : 간단한 합성곱 신경망 클래스
7.11 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 6 복합 출력의 처리 방법 : 오피스31 다차원 분류 신경망
6.1 오피스31 데이터셋과 다차원 분류
6.2 딥러닝에서의 복합 출력의 학습법
6.3 복합 출력을 위한 MlpModel 클래스와 Dataset 클래스의 역할
6.4 아담 알고리즘
6.5 구현하기 : 아담 모델 클래스
6.6 구현하기 : 오피스31 데이터셋 클래스
6.7 실행하기
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 4 다층 퍼셉트론 기본 구조 : 세 가지 신경망의 재구성
4.1 다층 퍼셉트론 신경망 구조
4.2 은닉 계층의 수와 폭
4.3 비선형 활성화 함수
4.4 ReLU 함수
4.5 민스키의 XOR 문제와 비선형 활성화 함수
4.6 구현하기 : 다층 퍼셉트론 신경망 지원 함수
4.7 실행하기
4.8 마치며
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://bit.ly/2LcyM9o
CHAPTER 3 선택 분류 : 철판 불량 상태 분류 신경망
3.1 불량 철판 판별 문제
3.2 선택 분류 문제의 신경망 처리
3.3 소프트맥스 함수
3.4 소프트맥스 함수의 편미분
3.5 소프트맥스 교차 엔트로피
3.6 소프트맥스 교차 엔트로피의 편미분
3.7 시그모이드 함수와 소프트맥스 함수의 관계
3.8 구현하기 : 불량 철판 판별 신경망
3.9 실행하기
3.10 마치며
파이썬 날코딩으로 알고 짜는 딥러닝: 프레임워크 없이 단층 퍼셉트론에서 GAN까지
> 관련도서: http://www.hanbit.co.kr/store/books/look.php?p_code=B8585180187
CHAPTER 2 이진 판단 : 천체의 펄서 여부 판정 신경망
2.1 펄서 판정 문제
2.2 이진 판단 문제의 신경망 처리
2.3 시그모이드 함수
2.4 확률 분포와 정보 엔트로피
2.5 확률 분포의 추정과 교차 엔트로피
2.6 딥러닝 학습에서의 교차 엔트로피
2.7 시그모이드 교차 엔트로피와 편미분
2.8 계산값 폭주 문제와 시그모이드 관련 함수의 안전한 계산법
2.9 구현하기 : 펄서 여부 판정 신경망
2.10 실행하기
2.11 확장하기 : 균형 잡힌 데이터셋과 착시 없는 평가 방법
2.12 실행하기 : 확장된 펄서 여부 판정 신경망
파이썬 날코딩으로 알고짜는 딥러닝_1장_회귀분석
- 관련도서: http://www.hanbit.co.kr/store/books/look.php?p_code=B8585180187
CHAPTER 1 회귀 분석 : 전복의 고리 수 추정 신경망
1.1 단층 퍼셉트론 신경망 구조
1.2 텐서 연산과 미니배치의 활용
1.3 신경망의 세 가지 기본 출력 유형과 회귀 분석
1.4 전복의 고리 수 추정 문제
1.5 회귀 분석과 평균제곱오차(MSE) 손실 함수
1.6 경사하강법과 역전파
1.7 편미분과 손실 기울기의 계산
1.8 하이퍼파라미터
1.9 비선형 정보와 원-핫 벡터 표현
1.10 구현하기 : 전복 고리 수 추정 신경망
1.11 실행하기
RealTime Talk #3 스케치 빠르게 배워 똑똑하게 쓰기
<관련도서: http://www.hanbit.co.kr/store/books/look.php?p_code=B5339242833>
- 대표 UX/UX 프로토타입 툴인 ‘스케치’의 기초부터 활용까지
- 저자의 노하우! 그것이 알고 싶다! "UX/UI 디자이너를 위한 스케치 완전정복"편에서는 스케치의 강점을 제대로 활용하기 위한 효과적인 접근 방식과 스케치 및 주요 연동 프로그램들 (Zeplin, InVision 등)을 사용한 전체 작업 프로세스 노하우를 공유합니다.
다루는 내용
- 스케치 프로그램의 특성 및 다른 그래픽 툴들과의 차이
- 스케치의 강력한 연동 프로그램 및 이를 활용한 전체 작업 프로세스
- 스케치 프로그램을 빠르게 정복하고 강점을 제대로 활용하기 위한 팁
'모의해킹' 진로 고민부터 실무까지
- 관련 책: 실무자가 말하는 모의해킹 https://goo.gl/EuNJou
모의해커를 꿈꾸는 후배에게 들려주는 멘토의 현장 에세이
: 모의해킹을 다루는 전문 기술서는 많지만, 국내 모의해킹 분야로의 진출을 꿈꾸는 입문자의 불안과 궁금증을 속 시원하게 해결해주는 입문서는 없다. 보안 분야에 10년 이상 종사한 필자는 이 책에서 ‘모의해킹’이라는 주제에 관한 입문자의 각종 궁금증을 자신의 경험에 비추어 구체적으로 풀어준다. 기술적인 내용은 최소화하고 필요한 경우에는 최대한 알기 쉽게 풀어 설명했다. 모의해킹 업무를 진로로 선택한 학생들과 이제 막 업무를 시작한 직원들은 이 책을 다 읽고 나면 앞으로 맞이할 업무에 관해 더 명확하고 구체적인 그림을 그려볼 수 있을 것이다.
* 관련도서: 비즈니스 블록체인(https://goo.gl/KD5Wvd)
Beyond Internet: 블록체인이 가져올 혁신적 비즈니스 기회에 관하여 알아봅니다.
- 블록체인 정의(기술,법,비즈니스 관점에서 블록체인의 정의)
- 블록체인이 어렵게 느껴지는 이유
- 블록체인 기술
- 블록체인 사례
설계부터 개발까지 직접 만들면서 배우는 보안 개발 시리즈 - Security School
1. 시리즈 소개
• 리눅스 환경에서 동작하는 보안 솔루션을 개발하며 기본 구조를 이해할 수 있습니다.
• 백신 개발을 시작으로 시스템 보안과 네트워크 보안까지 개발합니다.
• 다 만들어진 코드를 설명하는 게 아니라 기획/설계/구현하는 방법을 이야기합니다.
• 보안 개발을 처음 시작하는 학생과 직장인을 대상으로 합니다.
• 최대한 쉽게 구현합니다.
• 누구나 보안 개발자가 될 수 있다는 꿈과 희망을 선사합니다.
2. 주요 특징
• UML 실용 설계 - UML을 효과적으로 사용하는 방법으로 간결한 코드만으로도 모든 요구사항을 만족시킬 수 있습니다.
• 현실주의 - 현업에서 실제로 일어나는 일들과 그에 맞는 개발 프로세스를 이야기합니다.
• 모듈식 구성 - 원하는 목적에 맞춰 골라 읽을 수 있습니다.
• 손 안에 기술서 - 한 권의 내용을 1주에서 2주 정도면 정독할 수 있는 분량으로 짧게 구성합니다.
3. 사전 지식(권장)
• C 언어
• 간단한 소켓 프로그래밍
• 리눅스 커널의 역할 이해(단, 커널 개발 경험은 없어도 됩니다.)
• UML과 VMWare 사용의 이해
저자: 이창우
보안 기업 AhnLab에서 10년 동안 PC용 V3 방화벽과 침입차단 시스템 엔진, 웹 보안 솔루션을 개발했다. 이후 삼성전자에서 스마트TV 보안 강화 설계, SDL(Security Development Lifecycle) 적용, 임베디드 보안 프레임워크를 설계했고, 현재는 삼성 스마트TV 통합 보안 솔루션인 ‘스마트 시큐리티’를 담당하며 임베디드 백신, 코드 서명, 방화벽을 개발하고 있다.
하나의 보안 기술만으로 컴퓨터 시스템을 안전하게 만들 수 없다. 따라서 개발 기술뿐만 아니라 프로세스와 조직 문화까지 보안과 관련된 것이라면 무엇이든 공부하고 있다.
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 모듈이 없다능!!