어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
#DEVIEW 2014
아직 기존 프론트엔드 기술로 된 웹에 머물러 계시나요? 매번 더 강력한 GPU를 내장하고 있는 PC, 모바일 기기 출시소식을 듣지만, 하드웨어 발전을 잘 활용하고 있기는커녕 더욱 고도화되는 요구사항 앞에 기존 웹페이지 랜더링 기술들은 한계에 봉착되어 있는 상황입니다. 기존 중심적인 그래픽 처리 방법인 DOM의 렌더링 한계를 극복하기 위해 WebGL을 활용하는 방안을 살펴봅니다. 과연 현재의 브라우저 환경이 WebGL을 적용하기에 적합한지 실제 조사자료를 통해 검증해보고, 기존의 프론트엔드 기술이 해소하기 어려웠던 부분을 Web GL로 극복하기 위해 진행했던 시행착오와 오픈소스 WebGL프레임워크를 개발하면서 알게된 여러 가지 경험을 나누는 자리를 갖고자 합니다. 본 세션은 이를 통해서 DOM 프로세싱으로 기존의 프론트엔드 개발에 한계에 봉착한 개발자들에게 새로운 프론트엔드 패러다임으로 안내하는 길잡이가 될거라 생각합니다.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
#DEVIEW 2014
아직 기존 프론트엔드 기술로 된 웹에 머물러 계시나요? 매번 더 강력한 GPU를 내장하고 있는 PC, 모바일 기기 출시소식을 듣지만, 하드웨어 발전을 잘 활용하고 있기는커녕 더욱 고도화되는 요구사항 앞에 기존 웹페이지 랜더링 기술들은 한계에 봉착되어 있는 상황입니다. 기존 중심적인 그래픽 처리 방법인 DOM의 렌더링 한계를 극복하기 위해 WebGL을 활용하는 방안을 살펴봅니다. 과연 현재의 브라우저 환경이 WebGL을 적용하기에 적합한지 실제 조사자료를 통해 검증해보고, 기존의 프론트엔드 기술이 해소하기 어려웠던 부분을 Web GL로 극복하기 위해 진행했던 시행착오와 오픈소스 WebGL프레임워크를 개발하면서 알게된 여러 가지 경험을 나누는 자리를 갖고자 합니다. 본 세션은 이를 통해서 DOM 프로세싱으로 기존의 프론트엔드 개발에 한계에 봉착한 개발자들에게 새로운 프론트엔드 패러다임으로 안내하는 길잡이가 될거라 생각합니다.
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation TestNAVER Engineering
자동화, 계륵에 살 붙이기
: Evolution of Android Automation Test
송의초경
N Tech Service/ Contents QA
NTS Contents QA 팀에서 근무하고 있는 송의초경입니다. 오디오 플랫폼에서 주로 QA를 진행했고 네이버 뮤직을 거쳐 현재는 오디오 클립 QA를 담당하고 있습니다. 자동화 거버넌스 TF에서 자동화 라이브러리의 유지 보수도 함께 담당하고 있습니다.
딥러닝 서비스에 쓰이는 GPU 인스턴스 비용 효율을 위한 스팟(Spot) 활용기 - 손은주, 매스프레소 :: AWS DevDay 2018Amazon Web Services Korea
딥러닝 서비스에 쓰이는 GPU 인스턴스 비용 효율을 위한 스팟(Spot) 활용기 (손은주, 매스프레소) :: AWS DevDay 2018
매스프레소는 딥러닝 기반 OCR 검색 엔진을 자체 개발하여, 수학 문제 이미지 속 텍스트와 수식을 인식하여 풀이를 제공해주는 ‘콴다’앱를 운영 중입니다. 스타트업이 딥러닝 기반 서비스를 만들기 위해 AWS가 제공하는 GPU 인스턴스를 활용하는 방법과 에이전트 기반 지표 수집, 그리고 비용 절감을 위해 스팟 인스턴스를 활용하여 안정된 서비스 운영 방법 등을 공유합니다.
커지고 있는 웹 애플리케이션에서 성능은 점점 더 중요한 요소가 되고 있습니다. 사용자와의 접점에서 긴밀한 상호작용을 요구하는 프런트엔드, 보다 빠르게 로딩되고 부드럽게 구동되어야 하는 웹 애플리케이션을 만들기 위해 노력하는 분들과 함께 이야기를 나눕니다.
목차
1. 로딩 최적화 방법
2. PWA 케이스 소개
3. 렌더링 최적화 방법
대상
- 프런트엔드 성능 개선을 시작하고 싶은 개발자
- 느린 웹 페이지를 빠르게 만드는 데 관심 있는 프런트엔드 개발자
- 로딩/렌더링 최적화에 대한 힌트를 얻고 싶은 개발자
Basic of web ref.웹을지탱하는기술_01
1. REST라는 아키텍처를 따른다.
2. REST의 특징 중에 Stateless가 있다.
3. Stateless한 서버는 애플리케이션 상태를 기억할 필요가 없기 때문에 서버 시스템이 단순해진다
4. 확장성이 용이해진다.
5. 때로는 복잡한 것보다 간단한 게 낫다
Basic of web ref.웹을지탱하는기술_01
1. 웹 이전의 인터넷 : 전자메일, FTP, Telnet, Gopher
2. 팀버너스리에 의해 웹이 탄생, Mosaic 브라우저를 통해 사용자 증가
3. 표준화의 필요성 > IETF, W3C등
4. SOAP vs REST 분쟁
11. Fast
시간은 돈이다!
● 53%의 사용자가 3초
로드가 걸리면 서비스를
포기하고 이탈한다.
https://wordpressmaintenancetips.tk/wp-experts/wordpress-multisite-velocity-overview-at-philadelphia/
12. Integrated
● 모바일 앱 사용자 경험
● 결제, 로그인, 미디어 재생 등이 사용자의
기기에서 자연스럽게 느낄 수 있어야 한다.
13. ● 웹 앱 매니페스트는 사용자가 앱을
볼 것으로 예상되는 영역에 어떻게
보이게 할 것인가를 개발자가
제어할 수 있는 JSON 파일
Web App Manifest
14. Web App Manifest
● name: icon에 표시되는 이름
● start_url: 실행 시 시작되는 url 주소
● display: 앱이 어떻게 실행될지 정하는
속성
○ fullscreen, standalone, browser 등
● orientation: 웹 앱의 화면 방향
○ any, landscape, portrait
● icon: 아이콘 이미지 및 크기
15. Payment Request API
● 브라우저가 판매자, 사용자, 결제 방법 사이에서
중재자 역할을 하도록 지원
● 결제 커뮤니케이션 흐름을 최대한 표준화
● 다양한 보안 결제 방법을 원활하게 지원
● 모든 브라우저, 기기 또는 플랫폼에서 작동
16. Payment Request API
● 지불 방법
○ 신용카드, android pay …
● 트랜젝션 정보
○ 거래 금액, 통화액
● 옵션
○ 배송 방법, 배송지
21. Proprietary + Confidential
서비스 워커 생명주기
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Idle
Register
Error
Install
Activated
Active
Terminated
22. // 서비스 워커 등록
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker Registered', reg))
.catch(err => console.log('Error registing Service Worker', err))
}
23. Proprietary + Confidential
서비스 워커 생명주기
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Idle
Register
Error
Install
Activated
Active
Terminated
24. // 설치 후 리소스 캐싱
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', '...'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName).then(cache => {
return cache.addAll(filesToCache);
}).then(() => {
return self.skipWating();
})
);
});
25. Proprietary + Confidential
서비스 워커 생명주기
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Idle
Register
Error
Install
Activated
Active
Terminated
42. ● wego, expedia, trivago와 같은 여행업
● infobae forbes와 같은 출판사
● fandango, alibaba, rakuten과 같은 전자 상거래 서비스
● uber와 같은 승차 공유 서비스
● twitter와 같은 소셜네트워크 서비스
44. - Chrome 확장프로그램
- 커맨드 라인에서, 노드 모듈에서
프로그램으로도 사용 가능
- Lighthouse에 확인할 URL을 지정하고,
페이지에 대한 테스트를 실행한 다음,
페이지에 대한 보고서를 생성
- 여기에서 실패한 테스트는 앱을 개선하기
위해 할 수 있는 것에 대한 지표로 사용
웹 앱의 품질을 측정하는
오픈소스 자동화 도구
46. Angular
● Angular CLI를 이용하여 프로젝트에 PWA
적용
○ sudo npm i @angular/cli -g
○ ng new my-pwa
○ ng add @angular/pwa
○ ngsw-config.json, manifest.webmanifest
파일 등 PWA에 필요한 파일 자동 생성
47. React
● create-react-app을 이용하여 프로젝트를 생성하면 설정하기 쉬움
● manifest.json, serviceWorker.js 파일 등 PWA에 필요한 파일을 직접 작성
● 혹은 pwa-manifest-cli 설치 후 자동 생성/수정
48. Vue
● Vue CLI를 이용하여 프로젝트에 PWA 적용
○ WorkBox 라이브러리 기반
○ vue create my-pwa
○ vue add @vue/pwa
○ manifest.json, registerServiceWorker.js 파일
등 PWA에 필요한 파일 자동 생성
49. 참고 리소스
● 다양한 예제, 코드랩, 이론 설명등이 있습니다.
● MDN PWA (https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps)
● Google developers PWA(https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko)