웹 디자이너의 도전: Vue.js 따라하기Seungmin Lee2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.sung ki choiajax 등장 이전부터, ajax, comet, 그리고 html5의 웹소켓까지 기술의 흐름을 간략하게 정리해 보았습니다.
웹 어플리케이션의 개발을 다뤄보지 않은 개발자들을 대상으로 처음부터 웹소켓을 다루기 전에,
1. 이전 세대의 통신 기법은 어떤 모양이었는지
2. 웹소켓이 왜 환영받을 만한 기술인지
... 등을 공감할 수 있기 위한 목적으로 PT를 작성 하였습니다.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.sung ki choiajax 등장 이전부터, ajax, comet, 그리고 html5의 웹소켓까지 기술의 흐름을 간략하게 정리해 보았습니다.
웹 어플리케이션의 개발을 다뤄보지 않은 개발자들을 대상으로 처음부터 웹소켓을 다루기 전에,
1. 이전 세대의 통신 기법은 어떤 모양이었는지
2. 웹소켓이 왜 환영받을 만한 기술인지
... 등을 공감할 수 있기 위한 목적으로 PT를 작성 하였습니다.
[IoT] MAKE with Open H/W + Node.JS - 3rdPark JonggunIoT 시대에 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
Mongo db intro & tipsInBum KimThis presentation is used for "MS Open Camp 2016" in Seoul.
I was there to introduce MongoDB & tips.
My experience is in the slide as a tip.
2. 트래픽
▸ 파일 용량은 가정한 것임,
이 외에도 js 파일, css 파일 등등도 다 트래픽에 포함됨.
▸ 자신의 호스팅에 올라간 파일이 아닌 외부 자원을 쓴 경우에는
트래픽에 미포함됨. (소스코드 상의 구글 로고 이미지 같은)
▸ html 소스 코드: 1MB
▸ 404.jpg: 2MB
▸ video.mp4: 7MB
▸ 1명 방문시 트래픽 1+2+7 = 10MB 발생
▸ 5명 방문시 트래픽 50 MB 발생
3. 트래픽 초과
전 페이지에 이어서…
▸ 무료 계정인 경우 일일 트래픽이란 게 존재함.
▸ 일일 트래픽이 50MB인 경우 6명부터
트래픽 초과, 페이지 접속 불가.
▸ 트래픽을 수동으로 초기화해줘야 함.
▸ 24시간 모니터링 할 것인가…?
▸ 그에 대한 해답은 세미나에서!
4. 기존 방식의 문제점 - 버전 괶리
▸ 우리에게 필요한 것은 단 하나의 최종 버전 html 파일
▸ 하지만 우리의 갑(클라이언트, 의뢰자)님께서는 변덕이
심하여 갑님께 보여드릴 여러 시안과 그 시안에 따라 여러
버전이 등장하게 됨.
▸ 그 버전을 구분하고자 날짜, 수정, 최종본 등등 여러 키워
드를 붙이지만 직접 파일을 까보기 전에는 정확한 결과물
을 예측 할 수가 없음.
6. GIT - 버전 괶리
▸ git이란 프로그램을 쓰면 파일은 하나인데 그 하나의 파일에 대
해 로그(기록)을 남겨 어떤 변경 사항이 있는지 남길 수 있음.
▸ 해당 로그만을 보고 좌측의 해시코드를 가지고 왔다리 갔다리
자유롭게 할 수 있음.
▸ 하지만 깃은 자신의 컴퓨터, 즉 로컬에서만 쓸 수 있어서 타인과
협업을 하거나 다른 컴퓨터, 혹은 포맷에 대한 대비가 돼있지 않
음.
9. GITHUB - 파일 비교
▸ 현재 버전이 이전 버전과 어떤 내용이 삭제/추가 됐는지를 보여줌.
▸ 물론 git(로컬)에서도 가능하지만 웹페이지에서 보는 게 더 직관적
10. NODE.JS란…?
▸ 서버가 아니라 자바스크립트 실행 환경
▸ 즉, 브라우저 밖에서도 자바스크립트를 실행할 수
있음.
▸ 서버를 구동하기 위해서는 http와 같은 모듈을 사용
해야 함.
▸ 윈도우의 명령 프롬프트(CMD)와 맥의 터미널에서
실행할 수 있음.
11. NODE.JS란…?
▸ 노드js 설치 후 윈도우의 CMD, 맥의 터미널을 키고,
node라고 치면 바로 노드를 실행할 수 있다.
▸ 변수 선언, 표현식 사용 전부 가능 (물론 서버 구축도)
▸ 하지만 브라우저가 아니기 때문에 브라우저에서 제공
해주는 alert, confirm과 같은 함수는 사용 불가.
12. NPM(NODE PACKAGE MANAGER)이란…?
▸ 패키지 = 잘 만들어 놓은 모듈을 패키징한 것.
▸ 하나의 모듈이 하나의 패키지가 될 수도 있고, 여러 모듈이 하
나의 패키지가 될 수도 있음.
▸ npm은 여러 패키지들이 저장된 저장소임.
▸ 여기서 jquery나 bxslider 같은 애들 설치해서 쓰면 됨, 공식
홈페이지 가서 다운받고 cdn에서 파일 주소 복붙할 필요가 사
라짐.
▸ node 란 이름이 들어갔으니 노드 안에서 실행됨, 즉 cmd나 터
미널을 키고 거기서 실행하면 됨!
19. NPM을 이용한 모듈 삽입
▸ 모듈 사용하기
물론 npm의 다른 패키지인 웹팩 2를 사용해야 예제와 같이(물론 많은
과정은 생략됐다고 보면 됨.) 사용할 수 있는데 단적인 예를 보여주고자
예를 든 것임. 절대 제이쿼리 모바일만 설치해서는 이런 방식으로는
작동하지 않음.