패스트캠퍼스 환급챌린지 45일차 미션 (3월 16일) : 프론트엔드개발 강의 후기

오늘의 목표

03. ES6 Classes

04. 상속(확장)

 

 

 

끄어 오늘은 행복한 토요일!!

일찍 일어나서 일정을 정신없이 바쁘게 보내다가 저녁에 듣는 강의다.

 

 

normal 부분에서 뒤쪽에 있는 colon 기호와 함께 function이라는 키워드를 생략해줄 수 있다.

 

ES6 의 클래스 패턴에 대해 살펴볼 때, function 키워드를 사용하는 일반 함수로 만들어진 개념과 동일하다고 이해하면 된다.

 

속성

firstname, lastname 밖에 없지만, 프로토 부분을 열어봤을 때 이렇게 getfullname이라는 함수가 잘 들어가져 있는 거 

 

그렇다면 옆에 나온 이미지 윗부분 생성자 함수를 자바스크립트에서 지원하는 class 라는 키워드를 통해서 어떻게 새로운 문법으로 갱신할 수 있을까?

 

 

 

자바스크립트는 우선 프로토타입 기반의 프로그래밍 언어인데, class 라는 개념을 흉내내서 새로운 문법을 ES6에서 제공하기 시작했다.

 

저번에는 자바스크립트에서 프로토타입으로 활용하던 생성자를 이렇게 원시적인 방법으로 만들었는데

최근에 와서는 더 깔끔하게 고연할 수 있는 class 부분의 문법을 제공하고 있다.

 

 

ES6 란?

ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전이다.

ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 하다.

현재 주요 JavaScript 엔진들에서 ES6 기능들을 구현 중에 있다.

 

 

ES6의 새로운 기능들

• const and let
• Arrow functions(화살표 함수)
• Template Literals(템플릿 리터럴)
• Default parameters(기본 매개 변수)
• Array and object destructing(배열 및 객체 비구조화)
• Import and export(가져오기 및 내보내기)
• Promises(프로미스)
• Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)
• Classes(클래스)

 

상속(확장)이란?

 

내부에서 constructor 라는 함수를 사용해서 바깥쪽에서 어떤 인수를 name과 wheel 이라는 각각의 매개 변수로 받아서 내부에서 활용하고 있다.

 

be-occur 를 통해서 하나의 인스턴스를 생성해보자.

생성자 함수 (=class ) 부분에 실행해서 두개 인수를 사용해서 name과 wheel 부분을 채워준다.

 

그러면 consol 창에 be-occur 이라는 객체 데이터가 하나 만들어진 것을 확인할 수 있다.

 

 

 

클래스를 사용한다는 것은

미리 만들어져 있는 어떠한 정보에 추가적으로 사를 붙여 가면서 새로운 기능들을 이렇게 확장이라는 개념으로 관리해줄 수 있다는 개념이 된다.

 

끄허 오늘 강의 끝

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]