SlideShare a Scribd company logo
Introduction to node.js, npm and Grunt
Soribada Web Development Team
1. Server-side Javascript

V8 엔진에서 아이디어를 얻어 2009년 탄생

현재 0.12.0 버전
2. HTTP, HTTPS, File System, URL, DNS,
Child Process etc
3. Features
1. Event-driven

이벤트가 발생할 때 까지 자원을 소모하며
기다라지 않는다. 이벤트가 발생할 때 자원
을 사용한다.
2. non-blocking I/O

blocking I/O에 비하여 메모리 점유율이
적고 속도가 빠르다.
4. Showcase
1. node.js 패키지 매니저

node.js의 패키지들을 커맨드 라인 인터페이스를
통해 다운로드 받을 수 있음.
2. 인기 패키지들

- express

- grunt & grunt-cli

- karma

- bower

- coffee script

- yo
3. Showcase
1. node.js 패키지 중 하나
2. Grunt = Automation
3. Examples
1. Creating documentation with
jsDoc
2. QC javascript code with jshint
3. concat, minify static files
4. build control
4. 플러그인 사용법은 각 플러그인의 github를 참고
해야하는 것이 함정
5. Showcase
1. Soribada build plugins
1. time-grunt: 태스크 시간 표시
2. load-grunt-tasks: 플러그인들 로드
3. grunt-contrib-clean: 삭제
4. grunt-contrib-copy: 카피
5. grunt-usemin: concat, minify
6. grunt-contrib-uglify: concat,
minify
7. grunt-filerev: hashing files
8. grunt-contrib-cssmin: minify css
9. grunt-contrib-htmlmin: minify html
10.grunt-build-control: git commit,
push
Thank you
Ad

More Related Content

What's hot (20)

NODEJS INTRO
NODEJS INTRONODEJS INTRO
NODEJS INTRO
JiHwan Yoon
 
[W3C HTML5 2017] Docker & DevOps에서 Serverless & NoOps로의 여정
[W3C HTML5 2017] Docker & DevOps에서 Serverless & NoOps로의 여정[W3C HTML5 2017] Docker & DevOps에서 Serverless & NoOps로의 여정
[W3C HTML5 2017] Docker & DevOps에서 Serverless & NoOps로의 여정
양재동 코드랩
 
Mongo db intro & tips
Mongo db intro & tipsMongo db intro & tips
Mongo db intro & tips
InBum Kim
 
Cooking jquery
Cooking jqueryCooking jquery
Cooking jquery
JinKwon Lee
 
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
NAVER D2
 
Node.js + Websocket 삽질기
Node.js + Websocket 삽질기Node.js + Websocket 삽질기
Node.js + Websocket 삽질기
Paprikhan
 
nodejs websocket & SOCKET.IO
nodejs websocket & SOCKET.IOnodejs websocket & SOCKET.IO
nodejs websocket & SOCKET.IO
Mungyu Choi
 
jbug-vagrant
jbug-vagrantjbug-vagrant
jbug-vagrant
Daekwon Kang
 
이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012
devCAT Studio, NEXON
 
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.
sung ki choi
 
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doorttsRyan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Suwon Chae
 
자바 네트워크 소녀 Netty 리뷰
자바 네트워크 소녀 Netty 리뷰자바 네트워크 소녀 Netty 리뷰
자바 네트워크 소녀 Netty 리뷰
Woojin Joe
 
예제를 통해 쉽게_살펴보는_뷰제이에스
예제를 통해 쉽게_살펴보는_뷰제이에스예제를 통해 쉽게_살펴보는_뷰제이에스
예제를 통해 쉽게_살펴보는_뷰제이에스
Dexter Jung
 
JS Game Engines
JS Game EnginesJS Game Engines
JS Game Engines
Wonjun Hwang
 
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
NAVER D2
 
PHP를 위한 NginX(엔진엑스) 시작과 설정
PHP를 위한 NginX(엔진엑스) 시작과 설정PHP를 위한 NginX(엔진엑스) 시작과 설정
PHP를 위한 NginX(엔진엑스) 시작과 설정
Jin wook
 
웹소켓 (WebSocket)
웹소켓 (WebSocket)웹소켓 (WebSocket)
웹소켓 (WebSocket)
jeongseokoh
 
Grunt
GruntGrunt
Grunt
Dohoon Kim
 
[ 2015 SOSCON ]오픈스택 swift로 시작하는 오픈소스 분석 삽질기
[ 2015 SOSCON ]오픈스택 swift로 시작하는 오픈소스 분석 삽질기[ 2015 SOSCON ]오픈스택 swift로 시작하는 오픈소스 분석 삽질기
[ 2015 SOSCON ]오픈스택 swift로 시작하는 오픈소스 분석 삽질기
nexusz99
 
Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기
KwangSeob Jeong
 
[W3C HTML5 2017] Docker & DevOps에서 Serverless & NoOps로의 여정
[W3C HTML5 2017] Docker & DevOps에서 Serverless & NoOps로의 여정[W3C HTML5 2017] Docker & DevOps에서 Serverless & NoOps로의 여정
[W3C HTML5 2017] Docker & DevOps에서 Serverless & NoOps로의 여정
양재동 코드랩
 
Mongo db intro & tips
Mongo db intro & tipsMongo db intro & tips
Mongo db intro & tips
InBum Kim
 
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
NAVER D2
 
Node.js + Websocket 삽질기
Node.js + Websocket 삽질기Node.js + Websocket 삽질기
Node.js + Websocket 삽질기
Paprikhan
 
nodejs websocket & SOCKET.IO
nodejs websocket & SOCKET.IOnodejs websocket & SOCKET.IO
nodejs websocket & SOCKET.IO
Mungyu Choi
 
이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012
devCAT Studio, NEXON
 
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.
sung ki choi
 
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doorttsRyan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Suwon Chae
 
자바 네트워크 소녀 Netty 리뷰
자바 네트워크 소녀 Netty 리뷰자바 네트워크 소녀 Netty 리뷰
자바 네트워크 소녀 Netty 리뷰
Woojin Joe
 
예제를 통해 쉽게_살펴보는_뷰제이에스
예제를 통해 쉽게_살펴보는_뷰제이에스예제를 통해 쉽게_살펴보는_뷰제이에스
예제를 통해 쉽게_살펴보는_뷰제이에스
Dexter Jung
 
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
NAVER D2
 
PHP를 위한 NginX(엔진엑스) 시작과 설정
PHP를 위한 NginX(엔진엑스) 시작과 설정PHP를 위한 NginX(엔진엑스) 시작과 설정
PHP를 위한 NginX(엔진엑스) 시작과 설정
Jin wook
 
웹소켓 (WebSocket)
웹소켓 (WebSocket)웹소켓 (WebSocket)
웹소켓 (WebSocket)
jeongseokoh
 
[ 2015 SOSCON ]오픈스택 swift로 시작하는 오픈소스 분석 삽질기
[ 2015 SOSCON ]오픈스택 swift로 시작하는 오픈소스 분석 삽질기[ 2015 SOSCON ]오픈스택 swift로 시작하는 오픈소스 분석 삽질기
[ 2015 SOSCON ]오픈스택 swift로 시작하는 오픈소스 분석 삽질기
nexusz99
 
Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기
KwangSeob Jeong
 

Similar to Introduction to node.js, npm and grunt (20)

도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
Jae Sung Park
 
Node.js 살펴보기
Node.js 살펴보기Node.js 살펴보기
Node.js 살펴보기
명신 김
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
Sangmin Yoon
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
MooYeol Lee
 
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
NAVER D2
 
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
Jaeseung Ha
 
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
NAVER D2
 
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST_NHNent
 
생산성을 높여주는 iOS 개발 방법들.pdf
생산성을 높여주는 iOS 개발 방법들.pdf생산성을 높여주는 iOS 개발 방법들.pdf
생산성을 높여주는 iOS 개발 방법들.pdf
ssuserb942d2
 
머신러닝 및 데이터 과학 연구자를 위한 python 기반 컨테이너 분산처리 플랫폼 설계 및 개발
머신러닝 및 데이터 과학 연구자를 위한 python 기반 컨테이너 분산처리 플랫폼 설계 및 개발머신러닝 및 데이터 과학 연구자를 위한 python 기반 컨테이너 분산처리 플랫폼 설계 및 개발
머신러닝 및 데이터 과학 연구자를 위한 python 기반 컨테이너 분산처리 플랫폼 설계 및 개발
Jeongkyu Shin
 
Machine Learning Model Serving with Backend.AI
Machine Learning Model Serving with Backend.AIMachine Learning Model Serving with Backend.AI
Machine Learning Model Serving with Backend.AI
Jeongkyu Shin
 
클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기
YoungSu Son
 
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
Jinuk Kim
 
서버 아키텍처 이해를 위한 프로세스와 쓰레드
서버 아키텍처 이해를 위한 프로세스와 쓰레드서버 아키텍처 이해를 위한 프로세스와 쓰레드
서버 아키텍처 이해를 위한 프로세스와 쓰레드
KwangSeob Jeong
 
1st-BE-sideproject-GDGonCampus_KyungHee_Univ.pdf
1st-BE-sideproject-GDGonCampus_KyungHee_Univ.pdf1st-BE-sideproject-GDGonCampus_KyungHee_Univ.pdf
1st-BE-sideproject-GDGonCampus_KyungHee_Univ.pdf
dpfls5645
 
java thrift
java thriftjava thrift
java thrift
Mesh Korea
 
빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x
Terry Cho
 
Private PaaS with Docker, spring cloud and mesos
Private PaaS with Docker, spring cloud and mesos Private PaaS with Docker, spring cloud and mesos
Private PaaS with Docker, spring cloud and mesos
uEngine Solutions
 
소셜게임 서버 개발 관점에서 본 Node.js의 장단점과 대안
소셜게임 서버 개발 관점에서 본 Node.js의 장단점과 대안소셜게임 서버 개발 관점에서 본 Node.js의 장단점과 대안
소셜게임 서버 개발 관점에서 본 Node.js의 장단점과 대안
Jeongsang Baek
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
Jae Sung Park
 
Node.js 살펴보기
Node.js 살펴보기Node.js 살펴보기
Node.js 살펴보기
명신 김
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
Sangmin Yoon
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
MooYeol Lee
 
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
NAVER D2
 
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
Jaeseung Ha
 
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
NAVER D2
 
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST_NHNent
 
생산성을 높여주는 iOS 개발 방법들.pdf
생산성을 높여주는 iOS 개발 방법들.pdf생산성을 높여주는 iOS 개발 방법들.pdf
생산성을 높여주는 iOS 개발 방법들.pdf
ssuserb942d2
 
머신러닝 및 데이터 과학 연구자를 위한 python 기반 컨테이너 분산처리 플랫폼 설계 및 개발
머신러닝 및 데이터 과학 연구자를 위한 python 기반 컨테이너 분산처리 플랫폼 설계 및 개발머신러닝 및 데이터 과학 연구자를 위한 python 기반 컨테이너 분산처리 플랫폼 설계 및 개발
머신러닝 및 데이터 과학 연구자를 위한 python 기반 컨테이너 분산처리 플랫폼 설계 및 개발
Jeongkyu Shin
 
Machine Learning Model Serving with Backend.AI
Machine Learning Model Serving with Backend.AIMachine Learning Model Serving with Backend.AI
Machine Learning Model Serving with Backend.AI
Jeongkyu Shin
 
클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기
YoungSu Son
 
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
NDC13: DVCS와 코드리뷰 그리고 자동화를 통한 쾌속 개발
Jinuk Kim
 
서버 아키텍처 이해를 위한 프로세스와 쓰레드
서버 아키텍처 이해를 위한 프로세스와 쓰레드서버 아키텍처 이해를 위한 프로세스와 쓰레드
서버 아키텍처 이해를 위한 프로세스와 쓰레드
KwangSeob Jeong
 
1st-BE-sideproject-GDGonCampus_KyungHee_Univ.pdf
1st-BE-sideproject-GDGonCampus_KyungHee_Univ.pdf1st-BE-sideproject-GDGonCampus_KyungHee_Univ.pdf
1st-BE-sideproject-GDGonCampus_KyungHee_Univ.pdf
dpfls5645
 
빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x
Terry Cho
 
Private PaaS with Docker, spring cloud and mesos
Private PaaS with Docker, spring cloud and mesos Private PaaS with Docker, spring cloud and mesos
Private PaaS with Docker, spring cloud and mesos
uEngine Solutions
 
소셜게임 서버 개발 관점에서 본 Node.js의 장단점과 대안
소셜게임 서버 개발 관점에서 본 Node.js의 장단점과 대안소셜게임 서버 개발 관점에서 본 Node.js의 장단점과 대안
소셜게임 서버 개발 관점에서 본 Node.js의 장단점과 대안
Jeongsang Baek
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
 
Ad

Introduction to node.js, npm and grunt

  • 1. Introduction to node.js, npm and Grunt Soribada Web Development Team
  • 2. 1. Server-side Javascript
 V8 엔진에서 아이디어를 얻어 2009년 탄생
 현재 0.12.0 버전 2. HTTP, HTTPS, File System, URL, DNS, Child Process etc 3. Features 1. Event-driven
 이벤트가 발생할 때 까지 자원을 소모하며 기다라지 않는다. 이벤트가 발생할 때 자원 을 사용한다. 2. non-blocking I/O
 blocking I/O에 비하여 메모리 점유율이 적고 속도가 빠르다. 4. Showcase
  • 3. 1. node.js 패키지 매니저
 node.js의 패키지들을 커맨드 라인 인터페이스를 통해 다운로드 받을 수 있음. 2. 인기 패키지들
 - express
 - grunt & grunt-cli
 - karma
 - bower
 - coffee script
 - yo 3. Showcase
  • 4. 1. node.js 패키지 중 하나 2. Grunt = Automation 3. Examples 1. Creating documentation with jsDoc 2. QC javascript code with jshint 3. concat, minify static files 4. build control 4. 플러그인 사용법은 각 플러그인의 github를 참고 해야하는 것이 함정 5. Showcase
  • 5. 1. Soribada build plugins 1. time-grunt: 태스크 시간 표시 2. load-grunt-tasks: 플러그인들 로드 3. grunt-contrib-clean: 삭제 4. grunt-contrib-copy: 카피 5. grunt-usemin: concat, minify 6. grunt-contrib-uglify: concat, minify 7. grunt-filerev: hashing files 8. grunt-contrib-cssmin: minify css 9. grunt-contrib-htmlmin: minify html 10.grunt-build-control: git commit, push