Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulBansook Nam
Suggest a new pattern "How to divide your Activity & Fragment".
Shows "Lotto - App" sample.
Youtube: https://www.youtube.com/watch?v=_-yZPjf9HLo
Hope it would help to understand Andoird Architecture Pattern.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.sung ki choi
ajax 등장 이전부터, ajax, comet, 그리고 html5의 웹소켓까지 기술의 흐름을 간략하게 정리해 보았습니다.
웹 어플리케이션의 개발을 다뤄보지 않은 개발자들을 대상으로 처음부터 웹소켓을 다루기 전에,
1. 이전 세대의 통신 기법은 어떤 모양이었는지
2. 웹소켓이 왜 환영받을 만한 기술인지
... 등을 공감할 수 있기 위한 목적으로 PT를 작성 하였습니다.
18. 1.브라우저가 자바스크립트로 그려야 할 내용을 서버에서 미리 그려서 보여줍니다.
2.기존 방식 + SPA(Single Page Application) 두가지 장점을 모두 누릴 수 있습니다.
Server Side Rendering
Server Side Rending이 뭐지?
21. 1.Node.js
1.ssr.vuejs.org/ko 를 보며 한땀한땀 구현
2.Nuxt.js 사용
2.비 Node.js
1.v8 엔진 모듈 사용
2.헤드리스 브라우저 사용
Server Side Rendering
서버에서 자바스크립트를 동작시키는 방법
22. 1.Node.js
1.ssr.vuejs.org/ko 를 보며 한땀한땀 구현
2.Nuxt.js 사용
2.비 Node.js
1.v8 엔진 모듈 사용
2.헤드리스 브라우저 사용 -> 말도 안되는 방식 (...)
Server Side Rendering
서버에서 자바스크립트를 동작시키는 방법
23. 1.Node.js 환경이고 레거시코드가 있을 때 적합한 방식.
2.Frontend만 작업한다고 하면 Nuxt를 바로 도입하는게 더 낫습니다.
Server Side Rendering
ssr.vuejs.org/ko 를 보며 한땀한땀 구현
24. 1.SSR 과 관련된 모든 것이 적용된 Vue Framework.
2.SSR로 한땀한땀 구현하다 보면 결국 최종 종착지가 Nuxt라는 이야기가 많음.
3.신규 프로젝트라면 이 방식을 무조건 추천.
Server Side Rendering
Nuxt.js
25. 1.v8 엔진은 c++로 되어있고 해당 모듈을 구동하는 라이브러리를 이용.
2.과거에는 이 방식이 동작하지 않았지만 vue 2.5 버전 부터 지원.
https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#environment-agnostic-
ssr
3.PHP의 경우 V8js(github.com/phpv8/v8js)을 통해서 가능.
(위 버전 업데이트가 일주일(2017.10.21 기준) 되었다는 점을 고려하면 적용 사례가 없음)
Server Side Rendering
v8 엔진 모듈 사용
26. 1.Node.js
1.https://ssr.vuejs.org/ko 를 보며 한땀한땀 구현
2.Nuxt.js 사용
2.비 Node.js
1.v8 엔진 모듈 사용
2.헤드리스 브라우저 사용 -> 말도 안되는 방식 (...)
Server Side Rendering
서버에서 자바스크립트를 동작시키는 방법
27. 1.Node.js
1.https://ssr.vuejs.org/ko 를 보며 한땀한땀 구현 -> Node.js로 다 옮겨야함.
2.Nuxt.js 사용 -> Node.js로 다 옮겨야함.
2.비 Node.js
1.v8 엔진 모듈 사용 -> 나온지 일주일 되어서 적용 사례가 없음.
2.헤드리스 브라우저 사용 -> 말도 안되는 방식 (...)
서버에서 자바스크립트를 동작시키는 방법
Server Side Rendering
37. 1.소스를 빌드하고, 소스를 헤드리스 브라우저에서 동작.
2.헤드리스 브라우저(Phantom.js)에서 동작 시키고, 그 결과를 html로 저장.
3.그리고 그 html파일을 서버사이드쪽 템플릿 파일로 사용.
4.이 상태로 서버 운영을 시작.
Prerendering
동작원리
38. 1.소스를 빌드하고, 소스를 헤드리스 브라우저에서 동작.
2.헤드리스 브라우저(Phantom.js)에서 동작 시키고, 그 결과를 html로 저장.
3.그리고 그 html파일을 서버사이드쪽 템플릿 파일로 사용.
4.이 상태로 서버 운영을 시작.
Prerendering
동작원리
빌드 과정. 이부분을 Webpack으로 작성해야 합니다.
42. 1.로그인에 따라 값이 바뀌는 경우, Prerender 시점에
는 로그아웃된 상태입니다.
2.로그인 한 상태에서 새로고침하면 Prerender된 화면
이 출력되고 로그인으로 바뀌면서 화면 깜빡임이 발생
합니다.
3.즉, State 가 존재하는 경우 Prerender에서는 제어할
수가 없습니다.
Prerendering
문제점
로그아웃 상태
로그인 상태로 전환
47. 1.해당 플러그인은 브라우저에서 process.env.NODE_ENV 와 같은 변수를 사용할 수 있게 해줍니다.
2.process.env.NODE_ENV 를 빌드과정에서 찾아서 정해진 값으로 치환해서 사용합니다.
3.여기서는 process.env.PRERENDER 라는 변수를 선언해서 사용하였습니다.
webpack define plugin
동작원리