Weitere ähnliche Inhalte Ähnlich wie [GDG DevFest Seoul 2017] JAMstack이 GitHub와 CloudFlare를 만날 때 고성능 웹 어플리케이션 호스팅은 무료가 된다 (20) Mehr von Byungjin Park (6) [GDG DevFest Seoul 2017] JAMstack이 GitHub와 CloudFlare를 만날 때 고성능 웹 어플리케이션 호스팅은 무료가 된다1. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
JAMstack이
GitHub와 CloudFlare를 만날 때
고성능 웹 어플리케이션 호스팅은 무료가 된다.
By Byungjin Park
2. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
Node.js와 Python을 좋아합니다.
터미널 환경을 사랑하는 굉장한 Vim 덕후입니다.
GitHub에서 활발하게 오픈소스 활동을 하고 있습니다.
SPEAKER
발표자 소개
박병진 / @posquit0
(현) 소프트웨어 아키텍트 @ 옴니어스
What I Interest
시스템 및 인프라 설계 및 구축 / DevOps
서비스 모니터링 및 로깅 시스템 구축
컨테이너 기반의 마이크로서비스 아키텍처
3. How it feels to learn javascript in 2016?
By Jose Aguinaga
Applause from 18K people
4. 회사에서 이번에 웹 사이트 새로 만드는데 뭐 쓰는게 좋을까?
이거 ㄹㅇ React 각 ㅇㅈ? ㅇ ㅇㅈ~ 지금 2017년 React 오지는거 ㅇㅈ하는 부분?
6. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
HTML
CSS
JavaScript
WAS
Web Application
A BRIEF HISTORY OF WEB DEV
7. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
A BRIEF HISTORY OF WEB DEV
HTML
HyperText Markup Language
- 구조적인 문서를 작성하기 위한 마크업 언어
- 1993년 첫 릴리즈
- 1997년 HTML4 발표
- 2014년 HTML5 발표
STRUCTURE
8. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
A BRIEF HISTORY OF WEB DEV
CSS
Casacading Style Sheets
- HTML과 같은 마크업 언어가 실제로 표현되는 방법을 기술하는 언어
- 1996년 첫 릴리즈
- 2006년 SASS(Syntactically Awesome Stylesheets) 첫 릴리즈
- 2013년 PostCSS 첫 릴리즈 by TJ Holowaychuk
STYLE
9. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
A BRIEF HISTORY OF WEB DEV
JavaScript
- 웹 브라우저에서 실행되어 DOM을 핸들링하기 위한 목적으로 만들어진 언어
- 1995년 첫 릴리즈 by Brendan Eich
(10일만에 개발되었다는 근본 없는 언어)
- 1997년 ECMAScript 표준 첫 발표
- 2009년 Node.js 첫 릴리즈
- 2015년 ES6 발표 / 2016년 ES7 발표 / 2017년 ES8 발표
BEHAVIOR
10. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
A BRIEF HISTORY OF WEB DEV
WAS
Web Application Server
- 앱의 연산이 복잡해지면서 이를 클라이언트가 아닌 서버에서 수행
- 1990년대 후반 전자상거래의 발전과 함께 일반화
- 1995년 PHP 첫 릴리즈
- 데이터베이스와 함께 3-Tier 웹 아키텍처 일반화
11. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
A BRIEF HISTORY OF WEB DEV
Web Application
- SPA(Single-page Application)
- 클라이언트 디바이스의 성능 향상과 함께 서버의 로드를 클라이언트에게
전과하여 서비스의 전체적인 성능 향상
- API서버와 통신하여 데이터를 표현하는 역할을 수행
- 2015년 PWA(Progressive Web Application) 발표 by Google
12. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
HTML
HTML
13. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
HTML + CSS
HTML + CSS
14. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
HTML + CSS + JavaScript
HTML + CSS + JS
15. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
WAS
HTML + CSS + JS
16. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
WAS: 3-Tier
HTML + CSS + JS
17. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
Web Application
Web App
(HTML + CSS + JS)
DATA(JSON/XML)
18. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
What is JAMstack?
What is Static Site Generator?
Profits
Best Practices
JAM STACK
19. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
모든 동적인 처리를 프론트엔드 단에서 자바스크립트로 수행
EX) JS Framework / Library / Vanilla Javascript
JAM STACK
What is JAMstack?
J
A
M
JavaScript
APIs
모든 서버단 처리는 재사용 가능한 API로 추상화
EX) Custom-built API / 3rd-party API
Markup
배포시 빌드 가능한 마크업 템플릿 엔진 사용
EX) Static Site Generator(Jekyll, Hugo, Hexo, GitBook 등) / Webpack
Modern web development architecture based on client-side JavaScript,
reusable APIs, and pre-built Markup.
20. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
JAM STACK
What is Static Site Generator?
Static Site Generator is a program, that generates HTML website as an output.
자세한 내용은 staticgen.com에서 확인할 수 있습니다.
템플릿 엔진 기반으로 미리 웹 사이트의 레이아웃 구성
Markdown, JSON, YAML, 혹은 API를 통해 웹 컨텐츠 구성
컨텐츠와 스타일의 분리
StaticGen
Netlify에서 운영하는 오픈소스 Static Site Generator 랭킹 페이지
라이선스/언어에 대한 정보도 제공하여 빠르게 비교 가능
보통 블로그 / API 문서 / 개인 및 회사 홈페이지 제작 목적으로 사용
운영이 쉽고 SEO(Search Engine Optimization)에 유리
21. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
CDN을 활용시 컨텐츠 캐싱이 쉬움
전세계 엣지를 통해 글로벌 확장 용이
JAM STACK
Profits
Better Performance Low Cost
운영을 위한 웹 서버가 불필요
정적 파일(Static File) 호스팅 환경만 필요
Higher Security Better Developer Experience
데이터와 로직을 분리하여 약결합(Loose coupling)
웹 서버가 없어 쉬운 유지보수
비지니스 로직 처리는 API에게 위임
CDN을 활용시 쉽고 안정적인 HTTPS/SSL
22. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
01. 모든 프로젝트는 CDN(Content Delivery Network)에 업로드
02. 배포시 CDN 캐시는 즉시 폐기
03. 배포는 모든 변경 파일이 업로드 완료 시에 적용
04. Git으로 버전관리를 하고 단일 표준 명령어(ex. npm install)로 어플리케이션 빌드
05. Babel, PostCSS, Webpack과 같은 모던 빌드 도구 활용하여 최신 JS 문법 사용
06. 빌드 자동화로 JAMstack 마크업 변경사항 실시간 확인
JAM STACK
Best Practices
자세한 내용은 jamstack.org에서 확인할 수 있습니다.
23. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
GitHub Pages + CloudFlare
Netlify
AWS S3 + CloudFront
DEPLOYMENT
24. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
- GitHub 사용자/그룹/프로젝트의 Static Web Site 호스팅 무료 제공
- github.io 도메인을 이용하여 HTTPS/SSL 지원
- Jekyll 기반의 기본 템플릿 지원
DEPLOYMENT
사용제한
GitHub 저장소 1GB 사용 제한 / 월 100GB 대역폭 제공 / 시간당 10개 빌드
빌드가 필요한 경우 빌드 결과물을 특정 디렉토리 혹은 브랜치에 보관 필요
자세한 내용은 pages.github.com에서 확인할 수 있습니다.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live!
25. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
DEPLOYMENT
26. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
- 역방향 프록시(Reverse Proxy) 역할 수행
- 무료로 전세계 CDN 및 SSL 인증서, 그리고 DDoS 방어 서비스 제공
DEPLOYMENT
자세한 내용은 cloudflare.com에서 확인할 수 있습니다.
Provide a CDN, DDoS mitigation, Internet security services, and distributed DNS services.
사용제한
개인 도메인을 소유하고 있어야 하며, 네임서버를 CloudFlare로 설정 필요
27. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
DEPLOYMENT
28. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
DEPLOYMENT
GitHub Pages + CloudFlare
GitHub Pages로 배포하고 CloudFlare CDN을 활용하여 성능 최적화
29. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
- GitHub / BitBucket / GitLab과 계정 연동 및 쉬운 프로젝트 호스팅 제공
- 무료로 전세계 CDN 및 SSL 인증서 지속적인 배포(Continuous Deployment) 제공
- 공식 API 및 CLI 도구 제공
DEPLOYMENT
사용제한
자세한 내용은 netlify.com에서 확인할 수 있습니다.
A unified platform that automates your code to create high-performant,
easily maintainable sites and web apps.
개인 도메인을 소유하고 있어야 하며, 네임서버를 Netlify로 설정 필요
30. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
DEPLOYMENT
Netlify
GitHub에 코드가 업데이트되면 Netlify에서 자체 CDN을 활용하여 자동 배포
31. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
AWS 클라우드 인프라 상에서 서비스를 운영하는 경우
DEPLOYMENT
AWS S3 + CloudFront
GitHub
32. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
GitHub와 CloudFlare를 이용한 웹 어플리케이션 호스팅
Netlify를 이용한 웹 어플리케이션 호스팅
DEMO
33. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
서비스의 목적에 맞는 웹 기술 스택을 선택하자
목적과 맞다면 웹 서비스 설계시 JAMstack을 고려하자
세상 좋은 공짜 서비스 참 많다
SUMMARY
34. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
2주 단위의 스프린트를 바탕으로 애자일 프로세스 진행
회고를 통한 지속적인 개발팀 문화 개선
프로세스의 개선을 위한 다양한 도구 도입
페어프로그래밍 / 코드리뷰 진행
RECRUITING
와 함께 성장할 개발자를 찾습니다
자세한 내용은 omnious.com을 방문해주시거나 joinus@omnious.com으로 문의 주시면 성심 성의껏 답변드리겠습니다.
서버 개발자
MSA 기반의 서버 어플리케이션 개발 및 인프라 운영
웹 개발자
모던 웹 어플리케이션 개발 및 웹 테스팅 자동화
데이터 사이언티스트
데이터 분석 및 모델링. 데이터 파이프라인 구축
머신러닝 엔지니어
패션 이미지 인식/분류 기술 및 추천 알고리즘 연구 개발
우리는 이렇게 일해요
혜택 및 복지
8-10시 내 자율 출퇴근 / 주 1회 리모트 근무 / 다양한 간식 제공
도서 구매 지원 / 개발장비 지원
35. Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
THE ENDPLEASE DON’T ASK TOO MUCH :)