Image
Image

DAY1-2.Javascript ES2015+ 기초문법

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>



Image

댓글목록

Image