![ESLINT 사용해보기
eslint [파일명]](https://image.slidesharecdn.com/es6-181019221053/85/ES6-for-Node-js-Study-15-320.jpg)
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를 실행합니다.
- 10. 프로젝트 초기화 • 터미널 패널이 열린 상태에서 npm init • 전부 enter눌러서 기본 설정 • package.json 파일 생김
- 11. ESLINT INSTALL • node.js로 만들어진 JavaScript 문법 검사 프로그램 • NPM을 이용해 설치 (npm은 node.js 설치 시 같이 설치됨) sudo npm install -g eslint
- 12. ESLINT 설정 초기화 eslint --init
- 13. ESLINT 설정 초기화 (2)
- 14. ESLINT 설정 초기화 (3) .eslintrc.js 파일이 생깁니다
- 16. JAVA SCRIPT 기 본 문 법 정 리
- 17. 변수와 자료형 • 변수(Variable)의 앞3글자를 따서 var로 선언 – var 변수명 = 값 • 타입을 가리지 않음 (중간에 다른 타입을 넣어도 오류가 발생하지 않음) • 사용 가능한 타입 – number : 숫자 (정수, 실수를 나누지 않음) – string : 문자열 – boolean : true/false – object : 객체 타입 (null 도 속함) – undefind – function : 함수 – symbol (es6에서 생김)
- 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 키워드는 이제 잊어버리자!
- 34. 중복 선언 불가능
- 35. 중복 선언 불가능
- 36. 블록 스코프
- 37. 블록 스코프
- 38. 호이스팅 불가능
- 39. 호이스팅 불가능
- 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); }
- 49. 수고하셨습니다