2.Javascript ES2015+ 기초문법 실습
1)Javascript
-객체 기반 스크립트 프로그래밍 언어의 한 종류입니다.
-과거 주로 웹 브라우저 기반에서 작동되는 동적 웹 페이지 개발기술로 사용되었지만
-최근엔 서버환경에서 동적 웹 프로그래밍(Node.js) 개발 및 다양한 개발 분야에서 사용되고 있습니다.
-범용적으로 사용되는 많은 개발언어는 표준 스펙을 관리하는 단체가 별도 존재하며 자바스크립트 언어의 표준 스펙은 ECMA International 이라는 단체에서 그 표준을 관리합니다.
2) ECMAScript & ES6(ES2015)
-자바스크립트 언어는 ECMA International에서 정의한 ECMA-262 기술 규격에 정의된 자바스크립트 표준 스펙을 준수한 범용 스크립트 언어입니다.
-ECMA 표준 스펙을 준수한 자바스크립트를 ECMAScript 또는 ES라고 줄여 이야기 합니다.
-대부분의 개발언어는 사라지지 않는 이상 신규 스펙이 추가될 때마다 버전이 올라가면서 지속적으로 발전을 거듭합니다.
-자바스크립트는 주로 ES1..ES3,ES4,ES5,ES6 형태로 버전명을 붙여오다가 매년 신규 스펙이 추가됨에 따라 ES6버전(ES2015) 이후부터는 년도 식 표기방식으로 호칭하기 변경하여 ES2015,ES2016,ES2017…ES2019형태로 버전을 표기하고 있습니다.
-ES6와 ES2015는 동일 버전의 표준 스펙입니다.
-자바스크립트 언어의 다양한 버전 중 기존 버전에게 비해 획기적으로 다양한 문법체계가 추가되고 신규 스펙이 추가된 버전이 ES6(ES2015) 버전이며 2015년도에 업데이트된 ES6버전은 전통적인 스크립트 언어가 아닌 객체 지향 언어로 자리매김합니다.
3) ES6(ES2015+) 기초문법
-ES6 주요 자바스크립 문법을 코딩을 통해 실습합니다.
-관련 실습자료 완성본은 제공 구글 드라이브 Node\DAY1폴더에 존재합니다.
-학습자료경로: 구글드라이브\Node\DAY1\ECMA2015.html
- Visual Studio Code를 가동하고 VSCode 탐색기창에서 Node\DAY1폴더를 선택하고 해당 폴더에 ECMA2015.html 파일을 생성합니다.
- ECMA2015.html 파일에 HTML 문서 기본 구조를 코딩후 저장합니다.
-저장을 완료 후 해당 ECMA2015.html 문서영역에 오른쪽 마우스 클릭 View In Browser 메뉴를 클릭하여 웹브라우저를 통해 해당 페이지 내용을 확인합니다.
<html>
<head>
<meta charset="utf-8">
<title>메인페이지</title>
</head>
<body>
</body>
</html>
가)const, let 상수,변수 선언자
-var를 대체하는 새로운 변수 선언 방식제공
-const는 초기 할당 값 변경 불가한 상수, let은 초기 할당 값 변경가능한 var를 대체하는 변수 선언자
-const와 let은 블록 스코프를 가지며 해당 코드 블록 스코프 밖에서 호출 시 에러발생,초기값 미할당시 에러발생함
코딩실습 : 하기 코드를 ECMA2015.html 문서 <body>태그 사이에 코딩합니다.
<!--const/let 실습-->
<script>
//변수 선언자 var 와 const,let의 차이를 확인한다.
if(true){
var x = 3;
}
console.log(x);
if(true){
const y =3;
console.log("if블록안에서 호출:",y);
}
console.log("y상수가 if블럭안에서 선어됨:",y);
let b = 0;
b = 1;
console.log("b=",b);
</script>
-ECMA2015.html 문서내에 하기 코드를 작성하고 저장 후 View In Browser 메뉴를 통해 브라우저로 내용을 확인합니다.
-웹브라우저에서 F12키를 클릭하여 개발자 도구를 활성화 시키고 개발자 도구의 콘솔탭에 출력된 콘솔로깅 내용을 확인합니다.
-콘솔창에 발생한 에러내용을 확인합니다.
나)템플릿 문자열
- 역 홑 따옴표(백틱) 으로 템플릿 문자열내 줄 바꿈이 가능
- 문자열 안에 변수 추가가 가능.
코딩실습 : 하기 코드를 ECMA2015.html 문서 내 상기 스크립트 블록 다음에 추가로 코딩합니다.
<!--템플릿 문자열-->
<script>
var num1 = 1;
var num2 = 2;
var result = 3;
var string1 = num1 +'더하기'+num2 + '는 \'' + result+'\'';
console.log(string1);
//ES2015 템플릿 문자열 백틱기법을 이용해보아요.
const num3 =1;
const num4 =2;
const result2 =3;
const string2 = `${num3}더하기 ${num4}는 '${result2}'`;
const string3 = `${num3}더하기 ${num4}는 ${result2}`;
console.log(string2);
</script>
-ECMA2015.html 문서내에 하기 코드를 작성하고 저장 후 View In Browser 메뉴를 통해 브라우저로 내용을 확인합니다.
-웹브라우저에서 F12키를 클릭하여 개발자 도구를 활성화 시키고 개발자 도구의 콘솔탭에 출력된 콘솔로깅 내용을 확인합니다.
-콘솔창에 내용을 확인합니다.
다)객체 리터럴 신규문법 추가
-객체에 동적 속성 추가 기능제공
-속성명과 변수명이 같으면 한번만 사용가능.
코딩실습 : 하기 코드를 ECMA2015.html 문서 내 상기 스크립트 블록 다음에 추가로 코딩합니다.
<!--객체 리터럴 -->
<script>
//동적 속성 만들기
var sayNode = function(){
console.log('Say Node~~');
}
var es ='ES';
//두개의 메소드 제공 객체 생성
var oldObject = {
sayJS:function(){
console.log('Say JS~~~~');
},
sayNode:sayNode,
test:'aaaa',
age:15
};
//기 정의된 객체에 동적속성을 추가하고 값을 할당한다.
oldObject[es+6] ="Iam Dynamic Property....";
//객체에 메소드와 동적속성값을 출력한다.
oldObject.sayNode();
oldObject.sayJS();
console.log(oldObject.ES6);
//객체 속성명을 동적으로 만들고 값을 할당하기
var name='강창훈';
var age = 46;
//기존방식
var user1 ={
name:name,
age:age
};
//ES2015 신규문법
const user= {
name,
age
};
console.log(`사용자 이름은 ${user.name}이고 나이는 ${user.age}입니다. `);
</script>
- View In Browser 메뉴를 통해 브라우저로 내용을 확인합니다.
-웹브라우저에서 F12키를 클릭하여 개발자 도구를 활성화 시키고 개발자 도구의 콘솔탭에 출력된 콘솔로깅 내용을 확인합니다.
-콘솔창에서 관련 내용을 확인합니다.
라)화살표 함수
-function(){} 와 함께 화살표 함수 사용가능
-화살표 함수에서는 return 구문을 안사용해도 된다.
코딩실습 : 하기 코드를 ECMA2015.html 문서 내 상기 스크립트 블록 다음에 추가로 코딩합니다.
<!--화살표 함수 실습-->
<script>
//전통적인 자바스크립트 함수정의
function add1(x,y){
return x+y;
}
//리턴구문이 있는 화살표 함수
const add2 =(x,y) =>{
return x+y;
}
//리턴 구문이 없는 화살표 함수
const add3 = (x,y)=>(x+y);
</script>
- View In Browser 메뉴를 통해 브라우저로 내용을 확인합니다.
-웹브라우저에서 F12키를 클릭하여 개발자 도구를 활성화 시키고 개발자 도구의 콘솔탭에 출력된 콘솔로깅 내용을 확인합니다.
-콘솔창에서 관련 내용을 확인합니다.
마)비구조화 할당
-객체와 배열로부터 속성이나 요소를 쉽게 꺼내 사용가능
-구조화 되지 않은 코드로 변수 일괄 선언 및 값 할당가능
코딩실습 : 하기 코드를 ECMA2015.html 문서 내 상기 스크립트 블록 다음에 추가로 코딩합니다.
<!--비구조화 할당 예시-->
<script>
//전통적인 자바스크립트 코딩방식
var candyMachine = {
status:{
name:'none',
count:5
},
getCandy:function(){
this.status.count--;
return this.status.count;
}
};
var getCandy = candyMachine.getCandy;
var count = candyMachine.status.count;
//비구조화 할당방식을 이용한 코드 간결화처리
const candyMachine ={
status:{
name:'none',
count:5,
},
getCandy(){
this.status.count --;
return this.status.count;
}
};
const {getCandy,status:{count}} = candyMachine;
//배열에 대한 기존방식과 비구조화 할당방식 사용비교
//전통적 방식의 배열정의 와 배열값 추출해 변수할당하기
var array = ['nodejs',{},10,true];
var node =array[0];
var obj =array[1];
var bool =array[3];
//비구조화 할당방식으로 간결화 코딩하기
const array=['nodejs',{},10,true];
const [node,obj,,bool] = array;
</script>
- View In Browser 메뉴를 통해 브라우저로 내용을 확인합니다.
-웹브라우저에서 F12키를 클릭하여 개발자 도구를 활성화 시키고 개발자 도구의 콘솔탭에 출력된 콘솔로깅 내용을 확인합니다.
-콘솔창에서 관련 내용을 확인합니다.
바)프로미스 promise
- 비동기 프로그래밍 지원 기능(ES2015부터 비동기 이벤트 리스너 콜백함수를 대체하는 비동기 처리 신규 문법)
- Promise 객체를 활용하면 콜백 헬의 문제점을 개선할수 있다.
사)async/await
- ES2017, NODE 7.6 부터 지원되는 비동기 함수 선언 방식
-간결한 예외 처리방식을 지원한다.
-가장 권장되는 비동기처리 방식
코딩실습 : 하기 코드를 ECMA2015.html 문서 내 상기 스크립트 블록 다음에 추가로 코딩합니다.
<!-- 자바스크립트 콜백함수(지옥)과 프라미스,그리고 async-await방식을 이용한 비동기 프로그래밍-->
<script>
//전통적인 자바스크립트 콜백함수 기반 동기처리(콜백지옥예시)
function findAndSaveUser(Users){
//STEP1: 단일사용자정보조회하기
Users.findOne({select userid,username from users where userid='test'},(err1,user)=> {
//조회콜백함수가 호출되면 에러체크 및 조회사용자정보를 DB에 저장한다.
if(err1){
return console.error(err1);
}
user.name ='zero';
//STEP2: 사용자 정보 등록하기
user.save((err2)=>{
//데이터를 저장하고 호출되는 콜백함수영역
if(err2){
return console.error(err2);
}
//STEP3: 사용자정보 추가 조회
Users.findOne({select userid,username from users where userid='test'},(err3,user2)=> {
//코드생략
});
});
});
}
//ES2015 promise방식을 이용한 비동기 처리방식
function findAndSaveUser(Users){
Users.findOne({select userid,username from users where userid='test'})
.then((user)=>{
user.name ='zero';
return user.save();
})
.then((user)=>{
return Users.findOne({});
})
.then((user)=>{
//생략
})
.catch(err => {
console.error(err);
});
}
//ES2017 async/await방식을 이용한 비동기 처리방식
async function findAndSaveUser(Users){
let user = await Users.findOne();
username ='zero';
user = await user.save();
user = await Users.findOne();
//생략
}
</script>
댓글목록
-
-
-
-
-
NODE.JS
DAY1-6.Node 주요 공통기능 실습
21 °C
Mostly Cloudy
- London, UK
13%
6.44 MPH
-
23° Sun, 3 Jan -
26° Sun, 3 Jan
3 students arrested after body-slamming principal
4 students arrested after body-slamming principal
3 students arrested after body-slamming principal
4 students arrested after body-slamming principal
2 students arrested after body-slamming principal