SlideShare a Scribd company logo
ES6 STUDYF I R S T T I M E
2 0 1 8 . 1 0 . 2 0
장 승 빈
TODAY SUBJECTS
• ECMA Script 6
• 개발 환경설정 (vscode, nodejs, eslint)
– 프로젝트 초기화
– eslint 설치 및 사용해보기
• 기존 Java Script 문법 (빠르게) 정리
• ES6 시작하기
– let, const
– template literal
– arrow function
ECMA SCRIPT
• 국제 기구 ECMA에서 정리한 Script 언어 규칙
– JavaScript에만 쓰는게 아님
• https://ko.Wikipedia.org/wiki/ECMA스크립트
• 스펙 문서
– http://www.ecma-international.org/ecma-262/6.0/
– http://es6-features.org 여기 정도만 봐도…
개발 환경 설정
V I S U A L S T U D I O C O D E
N O D E . J S
E S L I N T
VSCODE (VISUAL STUDIO CODE)
• Node가 자동 완성이 됨!!
• 텍스트 편집기 (필수는 아님)
– Atom, Sublime Text, WebStorm 등등
• https://code.visualstudio.com/
NODE.JS 설치 확인
• MAC OS – 터미널
• Windows – 파워셀, 명령프롬프트(CMD) 등에서
node –v
NODE.JS INSTALL
• 설치되지 않았거나 8.x 대 이하면 설치
• https://nodejs.org/ko/
프로젝트 디렉터리 생성
• 소스 코드를 작성할 프로젝트 디렉터리를 만들어주세요
– MacOS의 경우 시스템 권한이 필요치 않은 곳으로~
• VSCode 에서 프로젝트 디렉토리를 엽니다.
– index.js 파일을 생성합니다.
– console.log("hello es6 study");
• VSCode 에서 ctrl + ` (역따옴표)를 눌러
터미널(CMD) 패널 node index를 실행합니다.
프로젝트 초기화
• 터미널 패널이 열린 상태에서
npm init
• 전부 enter눌러서 기본 설정
• package.json 파일 생김
ESLINT INSTALL
• node.js로 만들어진 JavaScript 문법 검사 프로그램
• NPM을 이용해 설치 (npm은 node.js 설치 시 같이 설치됨)
sudo npm install -g eslint
ESLINT 설정 초기화
eslint --init
ESLINT 설정 초기화 (2)
ESLINT 설정 초기화 (3)
.eslintrc.js 파일이 생깁니다
ESLINT 사용해보기
eslint [파일명]
JAVA SCRIPT
기 본 문 법 정 리
변수와 자료형
• 변수(Variable)의 앞3글자를 따서 var로 선언
– var 변수명 = 값
• 타입을 가리지 않음 (중간에 다른 타입을 넣어도 오류가 발생하지 않음)
• 사용 가능한 타입
– number : 숫자 (정수, 실수를 나누지 않음)
– string : 문자열
– boolean : true/false
– object : 객체 타입 (null 도 속함)
– undefind
– function : 함수
– symbol (es6에서 생김)
연산자 (OPERATOR)
• 산술 연산자
– 사칙 연산 : +, - , *, /
+ 는 문자열 연결(Concat) 연산자 역할도…
– 나머지 : %
– 제곱 : **
– 증감 연산자 : ++, --
• 비교 연산자
– 크거나 작음 : >, >=, <, <=
– 같거나 다름 : ==, === , != , !==
연산자 (2)
• 대입 연산자 (=)
– 복합 : += , -= , *= , /= , %=
• 삼항 연산자
– 조건식 ? 참 : 거짓
• 논리 연산자
– AND : && , OR : || , NOT : !
함수
• function로 선언
WHY?
FLOW CONTROL - 조건문
• if ~ else • switch ~ case
• break
FLOW CONTROL - 반복문
• for loop • while / do ~ while
• continue
객체지향 (OBJECT ORIENTED …)
• JavaScript는 객체지향 언어가 아님
• prototype을 이용해 객체 지향처럼 구현
객체 선언 + LITERAL
• 일반
• 객체 리터럴
JSON
• Java Script Object Notation
• https://www.json.org/json-ko.html
• 요즘 API 통신의 표준(!?)
• JS의 객체 리터럴과 혼동 주의
배열
• 배열은 같은 자료형의 변수가 메모리상에 일정 크기로 반복…
• JavaScript의 배열은 Array 객체에 특화
• JavaScript의 배열은 다른 자료형이 들어가도 무관
되도록이면 같은 자료형에 사용하고
다른 자료형은 객체 타입 이용
배열 유용한 메소드
• 아이템 추가 : push()
• 마지막 아이템 가져오기 : pop()
• 아이템 정렬 : sort()
• 일치하는 아이템의 index 가져오기 : indexOf()
• 아이템 순서 뒤집기 : reverse()
• …
H A ! H A ! H A !
예외처리
• try ~ catch ~ finally 사용 가능
ES6
L E T, C O N S T
T E M P L AT E L I T E R A L
A R R O W F U N C T I O N
변수 선언 - LET, CONST
• 변수 선언 let, 상수 선언 const
• 중복 선언 불가능
• 유효범위(scope) 관련
– 코드블록 {~}사이에서 유효 (var는 functio의 {~} 안에서만 유효)
– 선언 이후 코드에서 사용가능 (hoisting)
• 기존의 변수 선언 var 키워드는 이제 잊어버리자!
중복 선언 불가능
중복 선언 불가능
블록 스코프
블록 스코프
호이스팅 불가능
호이스팅 불가능
상수 CONST
• 유효범위(Scope)에 관해서는 let과 동일
• 객체에서는 재할당이 불가능
TEMPLATE LITERAL
• 백틱(`) 안에 표현식 // 작은 따옴표 말고 1키 옆에 있는 그 키
• 주요 문법
– ${ statement } : 표현식 안에 간단하게 문법 사용 가능 (ex> 3항 연산자)
– 줄넘김(n)을 할 필요가 없음
STRING INTERPOLATION
CUSTOM INTERPOLATION
CUSTOM INTERPOLATION
ARROW FUNCTION
• function 키워드로 선언하는 함수에 비해 짧고 간결한 표현식
• 모두 익명 함수
• 정적인(lexical) this
function (x, y) {
return x+y;
}
(x, y) => { return x+y; }
생략 가능한 기호
• return 값이 한줄에 간단히 표현 가능하다면
블록 괄호와 return 키워드가 생략이 가능하다
(x, y) => { return x+y; }
(x, y) => x+y;
• Parameter가 1개일때 () 괄호 생략이 가능하다.
하지만 없거나 2개 이상이면 꼭 사용해야 한다.
(x) => { return x*x; }
X => { return x*x; }
X => x*x; 보다 고급 구문
LEXICAL THIS
• function 키워드로 선언된 함수들은
this의 범위를 함수 내부으로 새로 정의 되었습니다.
• 화살표 함수로 정의된 함수는 this를
새로 정의하지 않습니다.
function someFunc() {
// ...
setTimeout(function(){
console.log( this );
}, 1000);
}
function someFunc() {
// ...
setTimeout(
()=>{ console.log( this ); }
, 1000 );
}
LEXICAL THIS
function someFunc() {
// ...
let to1 = setTimeout(
()=>{ console.log( this.to1 ); } // 접근 가능!
, 1000 );
let to2 = setTimeout(function(){
console.log( this.to2 ); // undefined
}, 1000);
}
수고하셨습니다

More Related Content

What's hot

1.Startup JavaScript - 프로그래밍 기초
1.Startup JavaScript - 프로그래밍 기초1.Startup JavaScript - 프로그래밍 기초
1.Startup JavaScript - 프로그래밍 기초
Circulus
 
Javascript 교육자료 pdf
Javascript 교육자료 pdfJavascript 교육자료 pdf
Javascript 교육자료 pdf
Hyosang Hong
 
프론트엔드스터디 E04 js function
프론트엔드스터디 E04 js function프론트엔드스터디 E04 js function
프론트엔드스터디 E04 js function
Young-Beom Rhee
 
자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초
진수 정
 
호이스팅, 클로저, IIFE
호이스팅, 클로저, IIFE호이스팅, 클로저, IIFE
호이스팅, 클로저, IIFE
ChangHyeon Bae
 
동시성 프로그래밍 하기 좋은 Clojure
동시성 프로그래밍 하기 좋은 Clojure동시성 프로그래밍 하기 좋은 Clojure
동시성 프로그래밍 하기 좋은 Clojure
Eunmin Kim
 
자바스크립트 함수
자바스크립트 함수자바스크립트 함수
자바스크립트 함수유진 변
 
iOS 메모리관리
iOS 메모리관리iOS 메모리관리
iOS 메모리관리
Changwon National University
 
JavaScript Patterns - Chapter 3. Literals and Constructors
JavaScript Patterns - Chapter 3. Literals and ConstructorsJavaScript Patterns - Chapter 3. Literals and Constructors
JavaScript Patterns - Chapter 3. Literals and Constructors
Hyuncheol Jeon
 
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
Oracle Korea
 
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
정연 최
 
Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리
ETRIBE_STG
 
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Circulus
 
Effective c++ chapter 1,2 요약
Effective c++ chapter 1,2 요약Effective c++ chapter 1,2 요약
Effective c++ chapter 1,2 요약
Nam Hyeonuk
 
자바 8
자바 8자바 8
자바 8
신 한
 
Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수
Park Jonggun
 
100511 boost&tips 최성기
100511 boost&tips 최성기100511 boost&tips 최성기
100511 boost&tips 최성기
sung ki choi
 
Exception&log
Exception&logException&log
Exception&log
Nam Hyeonuk
 
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료
욱진 양
 
Go
GoGo

What's hot (20)

1.Startup JavaScript - 프로그래밍 기초
1.Startup JavaScript - 프로그래밍 기초1.Startup JavaScript - 프로그래밍 기초
1.Startup JavaScript - 프로그래밍 기초
 
Javascript 교육자료 pdf
Javascript 교육자료 pdfJavascript 교육자료 pdf
Javascript 교육자료 pdf
 
프론트엔드스터디 E04 js function
프론트엔드스터디 E04 js function프론트엔드스터디 E04 js function
프론트엔드스터디 E04 js function
 
자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초
 
호이스팅, 클로저, IIFE
호이스팅, 클로저, IIFE호이스팅, 클로저, IIFE
호이스팅, 클로저, IIFE
 
동시성 프로그래밍 하기 좋은 Clojure
동시성 프로그래밍 하기 좋은 Clojure동시성 프로그래밍 하기 좋은 Clojure
동시성 프로그래밍 하기 좋은 Clojure
 
자바스크립트 함수
자바스크립트 함수자바스크립트 함수
자바스크립트 함수
 
iOS 메모리관리
iOS 메모리관리iOS 메모리관리
iOS 메모리관리
 
JavaScript Patterns - Chapter 3. Literals and Constructors
JavaScript Patterns - Chapter 3. Literals and ConstructorsJavaScript Patterns - Chapter 3. Literals and Constructors
JavaScript Patterns - Chapter 3. Literals and Constructors
 
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
[Main Session] 미래의 Java 미리보기 - 앰버와 발할라 프로젝트를 중심으로
 
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
 
Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리
 
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
 
Effective c++ chapter 1,2 요약
Effective c++ chapter 1,2 요약Effective c++ chapter 1,2 요약
Effective c++ chapter 1,2 요약
 
자바 8
자바 8자바 8
자바 8
 
Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수
 
100511 boost&tips 최성기
100511 boost&tips 최성기100511 boost&tips 최성기
100511 boost&tips 최성기
 
Exception&log
Exception&logException&log
Exception&log
 
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료
 
Go
GoGo
Go
 

Similar to ES6 for Node.js Study

Oop design principle SOLID
Oop design principle SOLIDOop design principle SOLID
Oop design principle SOLID
Ryan Park
 
0.javascript기본(~3일차내)
0.javascript기본(~3일차내)0.javascript기본(~3일차내)
0.javascript기본(~3일차내)Sung-hoon Ma
 
4-1. javascript
4-1. javascript4-1. javascript
4-1. javascript
JinKyoungHeo
 
NHNNEXT 개경프14 Subway Rocket Team Study 3rd C++
NHNNEXT 개경프14 Subway Rocket Team Study 3rd C++NHNNEXT 개경프14 Subway Rocket Team Study 3rd C++
NHNNEXT 개경프14 Subway Rocket Team Study 3rd C++
Min-soo Park
 
외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements민태 김
 
Scala, Scalability
Scala, ScalabilityScala, Scalability
Scala, Scalability
Dongwook Lee
 
PL/SQL - 10g Release1
PL/SQL - 10g Release1PL/SQL - 10g Release1
PL/SQL - 10g Release1
Michael/Taewoo Kim
 
Let's Go (golang)
Let's Go (golang)Let's Go (golang)
Let's Go (golang)
상욱 송
 
Windows reversing study_basic_2
Windows reversing study_basic_2Windows reversing study_basic_2
Windows reversing study_basic_2
Jinkyoung Kim
 
GopherCon Korea 2015 - Python 개발자를 위한 Go (이경찬)
GopherCon Korea 2015 - Python 개발자를 위한 Go (이경찬)GopherCon Korea 2015 - Python 개발자를 위한 Go (이경찬)
GopherCon Korea 2015 - Python 개발자를 위한 Go (이경찬)
Kyoungchan Lee
 
PSR - Code Convention
PSR - Code ConventionPSR - Code Convention
PSR - Code Convention
jhyeon1010
 
제프리 리처의 Windows via C/C++ : 8장 유저 모드에서의 스레드 동기화
제프리 리처의 Windows via C/C++ : 8장 유저 모드에서의 스레드 동기화제프리 리처의 Windows via C/C++ : 8장 유저 모드에서의 스레드 동기화
제프리 리처의 Windows via C/C++ : 8장 유저 모드에서의 스레드 동기화
sung ki choi
 
Windows Debugging Technique #2
Windows Debugging Technique #2Windows Debugging Technique #2
Windows Debugging Technique #2
Wooseok Seo
 
ES2015 훑어보기 for Django Girls Seoul
ES2015 훑어보기 for Django Girls SeoulES2015 훑어보기 for Django Girls Seoul
ES2015 훑어보기 for Django Girls Seoul
HyeonMi Kim
 
C++ Advanced 강의 5주차
C++ Advanced 강의 5주차C++ Advanced 강의 5주차
C++ Advanced 강의 5주차
HyunJoon Park
 
[C++ korea] effective modern c++ study item 14 declare functions noexcept if ...
[C++ korea] effective modern c++ study item 14 declare functions noexcept if ...[C++ korea] effective modern c++ study item 14 declare functions noexcept if ...
[C++ korea] effective modern c++ study item 14 declare functions noexcept if ...
Seok-joon Yun
 
Assembly 스터디 2
Assembly 스터디 2Assembly 스터디 2
Assembly 스터디 2
Jinkyoung Kim
 
C 언어 스터디 01 - 기초
C 언어 스터디 01 - 기초C 언어 스터디 01 - 기초
C 언어 스터디 01 - 기초
Yu Yongwoo
 

Similar to ES6 for Node.js Study (20)

Oop design principle SOLID
Oop design principle SOLIDOop design principle SOLID
Oop design principle SOLID
 
0.javascript기본(~3일차내)
0.javascript기본(~3일차내)0.javascript기본(~3일차내)
0.javascript기본(~3일차내)
 
4-1. javascript
4-1. javascript4-1. javascript
4-1. javascript
 
NHNNEXT 개경프14 Subway Rocket Team Study 3rd C++
NHNNEXT 개경프14 Subway Rocket Team Study 3rd C++NHNNEXT 개경프14 Subway Rocket Team Study 3rd C++
NHNNEXT 개경프14 Subway Rocket Team Study 3rd C++
 
외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements
 
Scalability
ScalabilityScalability
Scalability
 
Scala, Scalability
Scala, ScalabilityScala, Scalability
Scala, Scalability
 
PL/SQL - 10g Release1
PL/SQL - 10g Release1PL/SQL - 10g Release1
PL/SQL - 10g Release1
 
Let's Go (golang)
Let's Go (golang)Let's Go (golang)
Let's Go (golang)
 
Windows reversing study_basic_2
Windows reversing study_basic_2Windows reversing study_basic_2
Windows reversing study_basic_2
 
GopherCon Korea 2015 - Python 개발자를 위한 Go (이경찬)
GopherCon Korea 2015 - Python 개발자를 위한 Go (이경찬)GopherCon Korea 2015 - Python 개발자를 위한 Go (이경찬)
GopherCon Korea 2015 - Python 개발자를 위한 Go (이경찬)
 
C++ api design 품질
C++ api design 품질C++ api design 품질
C++ api design 품질
 
PSR - Code Convention
PSR - Code ConventionPSR - Code Convention
PSR - Code Convention
 
제프리 리처의 Windows via C/C++ : 8장 유저 모드에서의 스레드 동기화
제프리 리처의 Windows via C/C++ : 8장 유저 모드에서의 스레드 동기화제프리 리처의 Windows via C/C++ : 8장 유저 모드에서의 스레드 동기화
제프리 리처의 Windows via C/C++ : 8장 유저 모드에서의 스레드 동기화
 
Windows Debugging Technique #2
Windows Debugging Technique #2Windows Debugging Technique #2
Windows Debugging Technique #2
 
ES2015 훑어보기 for Django Girls Seoul
ES2015 훑어보기 for Django Girls SeoulES2015 훑어보기 for Django Girls Seoul
ES2015 훑어보기 for Django Girls Seoul
 
C++ Advanced 강의 5주차
C++ Advanced 강의 5주차C++ Advanced 강의 5주차
C++ Advanced 강의 5주차
 
[C++ korea] effective modern c++ study item 14 declare functions noexcept if ...
[C++ korea] effective modern c++ study item 14 declare functions noexcept if ...[C++ korea] effective modern c++ study item 14 declare functions noexcept if ...
[C++ korea] effective modern c++ study item 14 declare functions noexcept if ...
 
Assembly 스터디 2
Assembly 스터디 2Assembly 스터디 2
Assembly 스터디 2
 
C 언어 스터디 01 - 기초
C 언어 스터디 01 - 기초C 언어 스터디 01 - 기초
C 언어 스터디 01 - 기초
 

More from 승빈이네 공작소

토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 3
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 3토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 3
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 3
승빈이네 공작소
 
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 2
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 2토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 2
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 2
승빈이네 공작소
 
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 1
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 1토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 1
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 1
승빈이네 공작소
 
Vue.js 입문 04 조건부 랜더링
Vue.js 입문 04 조건부 랜더링Vue.js 입문 04 조건부 랜더링
Vue.js 입문 04 조건부 랜더링
승빈이네 공작소
 
Vue.js 입문 03 데이터와 메소드
Vue.js 입문 03 데이터와 메소드Vue.js 입문 03 데이터와 메소드
Vue.js 입문 03 데이터와 메소드
승빈이네 공작소
 
Vue.js 입문 02 템플릿 문법
Vue.js 입문 02 템플릿 문법Vue.js 입문 02 템플릿 문법
Vue.js 입문 02 템플릿 문법
승빈이네 공작소
 
Git 코드랩 스터디 4
Git 코드랩 스터디 4Git 코드랩 스터디 4
Git 코드랩 스터디 4
승빈이네 공작소
 
Git 코드랩 스터디 3
Git 코드랩 스터디 3Git 코드랩 스터디 3
Git 코드랩 스터디 3
승빈이네 공작소
 
Git 코드랩 스터디 2
Git 코드랩 스터디 2Git 코드랩 스터디 2
Git 코드랩 스터디 2
승빈이네 공작소
 
Git 코드랩 스터디 1
Git 코드랩 스터디 1Git 코드랩 스터디 1
Git 코드랩 스터디 1
승빈이네 공작소
 
ES6 for Node.js Study 5주차
ES6 for Node.js Study 5주차ES6 for Node.js Study 5주차
ES6 for Node.js Study 5주차
승빈이네 공작소
 
ES6 for Node.js Study 4주차
ES6 for Node.js Study 4주차ES6 for Node.js Study 4주차
ES6 for Node.js Study 4주차
승빈이네 공작소
 
ES6 for Node.js Study 3주차
ES6 for Node.js Study 3주차ES6 for Node.js Study 3주차
ES6 for Node.js Study 3주차
승빈이네 공작소
 
겜냥이 어플 활용 가이드
겜냥이 어플 활용 가이드겜냥이 어플 활용 가이드
겜냥이 어플 활용 가이드
승빈이네 공작소
 
Google Calendar API - PHP 연동하기
Google Calendar API - PHP 연동하기Google Calendar API - PHP 연동하기
Google Calendar API - PHP 연동하기
승빈이네 공작소
 
Firebase for web (웹개발을 위한 파이어베이스) 4 Storage
Firebase for web (웹개발을 위한 파이어베이스) 4 StorageFirebase for web (웹개발을 위한 파이어베이스) 4 Storage
Firebase for web (웹개발을 위한 파이어베이스) 4 Storage
승빈이네 공작소
 
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time DatabaseFirebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
승빈이네 공작소
 
Firebase for web (웹개발을 위한 파이어베이스) 2 Authentication
Firebase for web (웹개발을 위한 파이어베이스) 2 AuthenticationFirebase for web (웹개발을 위한 파이어베이스) 2 Authentication
Firebase for web (웹개발을 위한 파이어베이스) 2 Authentication
승빈이네 공작소
 
Firebase for Web (웹개발을 위한 파이어베이스) 1 Hosting
Firebase for Web (웹개발을 위한 파이어베이스) 1 HostingFirebase for Web (웹개발을 위한 파이어베이스) 1 Hosting
Firebase for Web (웹개발을 위한 파이어베이스) 1 Hosting
승빈이네 공작소
 

More from 승빈이네 공작소 (19)

토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 3
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 3토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 3
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 3
 
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 2
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 2토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 2
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 2
 
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 1
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 1토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 1
토이 프로젝트를 위한 속성 RDB(MySQL) 스터디 1
 
Vue.js 입문 04 조건부 랜더링
Vue.js 입문 04 조건부 랜더링Vue.js 입문 04 조건부 랜더링
Vue.js 입문 04 조건부 랜더링
 
Vue.js 입문 03 데이터와 메소드
Vue.js 입문 03 데이터와 메소드Vue.js 입문 03 데이터와 메소드
Vue.js 입문 03 데이터와 메소드
 
Vue.js 입문 02 템플릿 문법
Vue.js 입문 02 템플릿 문법Vue.js 입문 02 템플릿 문법
Vue.js 입문 02 템플릿 문법
 
Git 코드랩 스터디 4
Git 코드랩 스터디 4Git 코드랩 스터디 4
Git 코드랩 스터디 4
 
Git 코드랩 스터디 3
Git 코드랩 스터디 3Git 코드랩 스터디 3
Git 코드랩 스터디 3
 
Git 코드랩 스터디 2
Git 코드랩 스터디 2Git 코드랩 스터디 2
Git 코드랩 스터디 2
 
Git 코드랩 스터디 1
Git 코드랩 스터디 1Git 코드랩 스터디 1
Git 코드랩 스터디 1
 
ES6 for Node.js Study 5주차
ES6 for Node.js Study 5주차ES6 for Node.js Study 5주차
ES6 for Node.js Study 5주차
 
ES6 for Node.js Study 4주차
ES6 for Node.js Study 4주차ES6 for Node.js Study 4주차
ES6 for Node.js Study 4주차
 
ES6 for Node.js Study 3주차
ES6 for Node.js Study 3주차ES6 for Node.js Study 3주차
ES6 for Node.js Study 3주차
 
겜냥이 어플 활용 가이드
겜냥이 어플 활용 가이드겜냥이 어플 활용 가이드
겜냥이 어플 활용 가이드
 
Google Calendar API - PHP 연동하기
Google Calendar API - PHP 연동하기Google Calendar API - PHP 연동하기
Google Calendar API - PHP 연동하기
 
Firebase for web (웹개발을 위한 파이어베이스) 4 Storage
Firebase for web (웹개발을 위한 파이어베이스) 4 StorageFirebase for web (웹개발을 위한 파이어베이스) 4 Storage
Firebase for web (웹개발을 위한 파이어베이스) 4 Storage
 
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time DatabaseFirebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
 
Firebase for web (웹개발을 위한 파이어베이스) 2 Authentication
Firebase for web (웹개발을 위한 파이어베이스) 2 AuthenticationFirebase for web (웹개발을 위한 파이어베이스) 2 Authentication
Firebase for web (웹개발을 위한 파이어베이스) 2 Authentication
 
Firebase for Web (웹개발을 위한 파이어베이스) 1 Hosting
Firebase for Web (웹개발을 위한 파이어베이스) 1 HostingFirebase for Web (웹개발을 위한 파이어베이스) 1 Hosting
Firebase for Web (웹개발을 위한 파이어베이스) 1 Hosting
 

ES6 for Node.js Study

  • 1. ES6 STUDYF I R S T T I M E 2 0 1 8 . 1 0 . 2 0 장 승 빈
  • 2. TODAY SUBJECTS • ECMA Script 6 • 개발 환경설정 (vscode, nodejs, eslint) – 프로젝트 초기화 – eslint 설치 및 사용해보기 • 기존 Java Script 문법 (빠르게) 정리 • ES6 시작하기 – let, const – template literal – arrow function
  • 3. ECMA SCRIPT • 국제 기구 ECMA에서 정리한 Script 언어 규칙 – JavaScript에만 쓰는게 아님 • https://ko.Wikipedia.org/wiki/ECMA스크립트 • 스펙 문서 – http://www.ecma-international.org/ecma-262/6.0/ – http://es6-features.org 여기 정도만 봐도…
  • 4. 개발 환경 설정 V I S U A L S T U D I O C O D E N O D E . J S E S L I N T
  • 5. VSCODE (VISUAL STUDIO CODE) • Node가 자동 완성이 됨!! • 텍스트 편집기 (필수는 아님) – Atom, Sublime Text, WebStorm 등등 • https://code.visualstudio.com/
  • 6. NODE.JS 설치 확인 • MAC OS – 터미널 • Windows – 파워셀, 명령프롬프트(CMD) 등에서 node –v
  • 7. NODE.JS INSTALL • 설치되지 않았거나 8.x 대 이하면 설치 • https://nodejs.org/ko/
  • 8. 프로젝트 디렉터리 생성 • 소스 코드를 작성할 프로젝트 디렉터리를 만들어주세요 – MacOS의 경우 시스템 권한이 필요치 않은 곳으로~ • VSCode 에서 프로젝트 디렉토리를 엽니다. – index.js 파일을 생성합니다. – console.log("hello es6 study"); • VSCode 에서 ctrl + ` (역따옴표)를 눌러 터미널(CMD) 패널 node index를 실행합니다.
  • 9.
  • 10. 프로젝트 초기화 • 터미널 패널이 열린 상태에서 npm init • 전부 enter눌러서 기본 설정 • package.json 파일 생김
  • 11. ESLINT INSTALL • node.js로 만들어진 JavaScript 문법 검사 프로그램 • NPM을 이용해 설치 (npm은 node.js 설치 시 같이 설치됨) sudo npm install -g eslint
  • 14. ESLINT 설정 초기화 (3) .eslintrc.js 파일이 생깁니다
  • 16. JAVA SCRIPT 기 본 문 법 정 리
  • 17. 변수와 자료형 • 변수(Variable)의 앞3글자를 따서 var로 선언 – var 변수명 = 값 • 타입을 가리지 않음 (중간에 다른 타입을 넣어도 오류가 발생하지 않음) • 사용 가능한 타입 – number : 숫자 (정수, 실수를 나누지 않음) – string : 문자열 – boolean : true/false – object : 객체 타입 (null 도 속함) – undefind – function : 함수 – symbol (es6에서 생김)
  • 18.
  • 19. 연산자 (OPERATOR) • 산술 연산자 – 사칙 연산 : +, - , *, / + 는 문자열 연결(Concat) 연산자 역할도… – 나머지 : % – 제곱 : ** – 증감 연산자 : ++, -- • 비교 연산자 – 크거나 작음 : >, >=, <, <= – 같거나 다름 : ==, === , != , !==
  • 20. 연산자 (2) • 대입 연산자 (=) – 복합 : += , -= , *= , /= , %= • 삼항 연산자 – 조건식 ? 참 : 거짓 • 논리 연산자 – AND : && , OR : || , NOT : !
  • 22. WHY?
  • 23. FLOW CONTROL - 조건문 • if ~ else • switch ~ case • break
  • 24. FLOW CONTROL - 반복문 • for loop • while / do ~ while • continue
  • 25. 객체지향 (OBJECT ORIENTED …) • JavaScript는 객체지향 언어가 아님 • prototype을 이용해 객체 지향처럼 구현
  • 26. 객체 선언 + LITERAL • 일반 • 객체 리터럴
  • 27. JSON • Java Script Object Notation • https://www.json.org/json-ko.html • 요즘 API 통신의 표준(!?) • JS의 객체 리터럴과 혼동 주의
  • 28. 배열 • 배열은 같은 자료형의 변수가 메모리상에 일정 크기로 반복… • JavaScript의 배열은 Array 객체에 특화 • JavaScript의 배열은 다른 자료형이 들어가도 무관 되도록이면 같은 자료형에 사용하고 다른 자료형은 객체 타입 이용
  • 29. 배열 유용한 메소드 • 아이템 추가 : push() • 마지막 아이템 가져오기 : pop() • 아이템 정렬 : sort() • 일치하는 아이템의 index 가져오기 : indexOf() • 아이템 순서 뒤집기 : reverse() • …
  • 30. H A ! H A ! H A !
  • 31. 예외처리 • try ~ catch ~ finally 사용 가능
  • 32. ES6 L E T, C O N S T T E M P L AT E L I T E R A L A R R O W F U N C T I O N
  • 33. 변수 선언 - LET, CONST • 변수 선언 let, 상수 선언 const • 중복 선언 불가능 • 유효범위(scope) 관련 – 코드블록 {~}사이에서 유효 (var는 functio의 {~} 안에서만 유효) – 선언 이후 코드에서 사용가능 (hoisting) • 기존의 변수 선언 var 키워드는 이제 잊어버리자!
  • 40. 상수 CONST • 유효범위(Scope)에 관해서는 let과 동일 • 객체에서는 재할당이 불가능
  • 41. TEMPLATE LITERAL • 백틱(`) 안에 표현식 // 작은 따옴표 말고 1키 옆에 있는 그 키 • 주요 문법 – ${ statement } : 표현식 안에 간단하게 문법 사용 가능 (ex> 3항 연산자) – 줄넘김(n)을 할 필요가 없음
  • 45. ARROW FUNCTION • function 키워드로 선언하는 함수에 비해 짧고 간결한 표현식 • 모두 익명 함수 • 정적인(lexical) this function (x, y) { return x+y; } (x, y) => { return x+y; }
  • 46. 생략 가능한 기호 • return 값이 한줄에 간단히 표현 가능하다면 블록 괄호와 return 키워드가 생략이 가능하다 (x, y) => { return x+y; } (x, y) => x+y; • Parameter가 1개일때 () 괄호 생략이 가능하다. 하지만 없거나 2개 이상이면 꼭 사용해야 한다. (x) => { return x*x; } X => { return x*x; } X => x*x; 보다 고급 구문
  • 47. LEXICAL THIS • function 키워드로 선언된 함수들은 this의 범위를 함수 내부으로 새로 정의 되었습니다. • 화살표 함수로 정의된 함수는 this를 새로 정의하지 않습니다. function someFunc() { // ... setTimeout(function(){ console.log( this ); }, 1000); } function someFunc() { // ... setTimeout( ()=>{ console.log( this ); } , 1000 ); }
  • 48. LEXICAL THIS function someFunc() { // ... let to1 = setTimeout( ()=>{ console.log( this.to1 ); } // 접근 가능! , 1000 ); let to2 = setTimeout(function(){ console.log( this.to2 ); // undefined }, 1000); }