[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
JSConf US 2014: Building Isomorphic AppsSpike Brehm
Slides from Spike Brehm's talk at JSConf US 2014. Topics include the etymology of "Isomorphic JavaScript", examples is isomorphic apps in the wild, reasons behind the growing trend towards isomorphic apps, and how to build an isomorphic module using Browserify & NPM.
The professionals who just want to know about the topmost web application development frameworks must go through this blog. For the top 10 development Framework introduction, positive and negative aspects are clearly mentioned.
스프링군살없이세팅하기(The way to setting the Spring framework for web.)EunChul Shin
깔끔하게 스프링 프레임워크 세팅하는 것에 대한 이야기 입니다.
군살없이 프레임워크를 세팅한다는 의미와 이유, 그리고 스프링 기본 설정 및 설정들의 역할에 대해서 정리해 보았습니다.
This presentation is about Spring framework.
I want to talk about the way to setting the spring framework as tidy in this presentation.
A Lecture given in Aalto University course "Design of WWW Services".
Single page app is already several years old web application paradigm that is now gaining traction due to the interest towards HTML5 and particularly cross-platform mobile (web) applications. The presentation overviews the single page application paradigm and compares it with other web app paradigms.
The presentation uses Backbone.js as the sample and gives practical tips on how to best structure Backbone.js applications. It contains an extensive set of tips and links in the notes section.
The reader is adviced to download the presentation for better readability of the notes.
Micro Services provide a means to build more flexible infrastructures that can maintained by large and distributed teams. Micro Deployments allow us to constantly evolve our applications step by step in small increments constantly. These paradigms helps us to achieve more agility. At the same time the force us to rethink how we run our DevOps processes. This talk covers the key requirements for DevOps follow the Site Reliability Engineering approach
1.일렉트론이란? + NW.js vs. Eelectron
2.중요점
3.설명
4.선행요구사항
5.구조
6.Main Process
7.Renderer Process
8.쉽게 이해하기
9.IPC
10.전체적인 흐름
11.Package
12.시작하기
13.참고
14.THANK YOU
2. 경력
디지탈아리아 : 2003~2012
C, C++로 Adobe Flash의 모바일 버전을 개발
크로키닷컴: 2012~
비스킷 - 단어장 앱: 2012~2014
나이키 컵 관리 시스템: 2013~2015
지그재그: 2015~
발표자는…
3. iOS 앱 – Swift 전환중
안드로이드 앱 – Kotlin 고려중
서버 – Node.js
Amazon Web Services – EC2, RDS, CloudSearch, S3,
ElasticBeanstalk…
웹 어플리케이션 – Bootstrap, Mithril.js, Gulp, Browserify, …
데이터 분석 – Spark on Zeppelin
지그재그 개발 스택
4.
5. 정적 페이지(1991~1993) -> JavaScript & DOM Level 0(1995) ->
Dynamic HTML(1997) -> XMLHTTP ActiveX(1999) ->
XMLHttpRequest(2000~2005) -> Ajax(2005) -> SPA
브라우저의 페이지 이동 없이 모든 기능을 제공
= Client-side web application, Rich web application, Modern webapp
Single-page Application 이란?
6. 장점
사용자 친화적
빠른 반응
화면 전환 애니메이션
서버 요청이 적음
단점
JavaScript 활성화가 필요함
보안이슈
메모리 이슈
검색 엔진 최적화(SEO)가 어려움
초기 구동에 시간이 걸림
SPA 장단점
7. 모든 어플리케이션이 로그인이 필요함 -> 검색 엔진을 고려하지 않아도
됨
모바일 어플리케이션을 위해 이미 API 서버는 있음 -> 같은 API를
이용해서 구현할 수 있음
API 서버는 웹 서버에 비해 구조가 단순해서 차후 한계에 이르렀을 때
다른 것으로 교체가 쉬움 (예 Node.js -> Rails)
서버 부하가 적음
크로키의 SPA 선택 이유
9. http://yeoman.io
어느 정도 표준화된 프로젝트
파일을 생성해줌
수천개의 생성기(generator)
크로키는 초기 설정에만
사용하고 현재는 사용하지 않음.
하지만 간혹 최신 툴의 변경점을
체크하고 있음
Yeoman
10. 전통적인 빌드 툴
Makefile, Ant, Maven, Gradle, Rakefile …
Grunt
http://gruntjs.com/
설정 기반, 조금 더 오래되어 문서와 플러그인이 많‘았’음
Gulp
http://gulpjs.com/
코드 기반으로 자유롭게 작성할 수 있음, 속도가 빠름
크로키의 추천
기타
Webpack을 사용하는 경우 많은 부분을 처리해주기 때문에(파일 묶기, 최소화등) 빌드
시스템 없이 npm scripts만을 사용할 수도 있다
빌드 시스템
11. 원하는 라이브러리를 홈페이지가서 받아 프로젝트에 추가하는 작업을
없애줌
Bower
http://bower.io/
Twitter에서 내 놓은 웹 프론트엔드 패키지 관리자
NPM
https://www.npmjs.com/
Node.js에서 사용하는 백엔드 패키지 관리자이지만, 프론트엔드에도
동일하게 쓰는 경우가 늘어남
간혹 같은 모듈의 Bower와 NPM의 패키지가 다른 경우가 있음
크로키는 Bower -> NPM 전환중
패키지 관리자
12. SPA는 기본적으로 모든 스크립트를 하나로 만들어서 패포한다.
하지만 모든 코드를 하나의 파일에 두고 개발할 수는 없다.
JavaScript는 기본적으로 모듈 시스템이 없다. (ECMAScript 2015
(ES6)에서 추가됨)
모듈 시스템
13. Browserify
http://browserify.org/
Node.js에서 사용하는 CommonJS 모듈 시스템(require)을 지원 ->
Node.js용 모듈을 클라이언트에서 사용할 수 있음
크로키에서 현재 사용중
Webpack
https://webpack.github.io/
모듈을 묶어주는 역할. JavaScript 외에 CSS, 이미지도 처리해준다
크로키는 앞으로 전환할 예정
모듈 시스템
16. http://backbonejs.org/
비교적 초기에 인기를 끌었음
크기가 작아서 배우기 쉽고, 수정하기 쉬움
부족한 기능은 플러그인으로 보강
큰 어플리케이션에는 적합하지 않다고 보임
하지만 Backbone + React등으로 아직 사용되기도 함
Code size (gzipped) : 7.6kb, jQuery(Zepto), Underscore 필요
추천하지 않음
Backbone.js
17. https://www.angularjs.org/
구글 개발자에 의해 개발된 프레임워크
MEAN(MongoDB, Express, AngularJS, Node.js)라는 명칭이 있을 정도로
가장 널리 쓰임
Code size (gzipped) : 56k
최적화가 쉽지 않음
Angular 2는 거의 다른 프레임워크라고 보일 정도로 많이 바뀜
풍부한 커뮤니티의 지원이 필요한 경우 추천
AngularJS
18. https://facebook.github.io/react/
페이스북에 의해 개발되었고, 실제로 페이스북 홈페이지에 적용되어 있음
최근 가장 핫한 프레임워크
View 부분만 담당하기 때문에 다른 파트를 위해 Flux(Redux),
Immutable등 다른 라이브러리를 같이 쓰게 됨
Code size (gzipped) : 44kb
한번 개념을 익혀두면 React Native를 통해 iOS/안드로이드 개발도 할 수
있음
가장 빠르게 발전하고 있어서 장래성이 가장 높아보임
React
19. http://emberjs.com/
설정 보다 관례(Convention over Configuration)를 따름
자체 프로젝트 툴이 있음
ember new ember-quickstart
ember generate route scientists
ember generate component people-list
ember serve
ember build --env production
Code size (gzipped) : 116kb
데스크탑/모바일 네이티브 앱 개발과 비슷한 환경을 원할 경우 사용
Ember.js
20. https://www.meteor.com/
서버 개발을 포함하는 프레임워크(플랫폼?)
V 부분은 Angular, React, Blaze를 사용
서버와 클라이언트를 하나의 코드로 개발
데이터가 클라이언트에 있는 것처럼 다루면 자동으로 서버와 동기화를
시켜줌
여러 클라이언트 간에 동기화가 필요한 경우 고려해볼만함
Meteor
21. http://mithril.js.org/
가벼우면서도 모든 파트를 커버함
다른 프레임워크보다 평범한 JavaScript에 가까움
Code size (gzipped) : 7.8kb
현재 크로키의 프로젝트에 사용중
Mithril.js