ES2015 훑어보기 for Django Girls Seoul
•Download as PPTX, PDF•
3 likes•624 views
Django Girls Seoul 2016년 7월 세미나 발표 자료 입니다.
Recommended
More Related Content
Similar to ES2015 훑어보기 for Django Girls Seoul
Similar to ES2015 훑어보기 for Django Girls Seoul (20)
ES2015 훑어보기 for Django Girls Seoul
- 1. ES2015 훑어보기 ES2015에는 무엇이 달라졌나 July 16, 2016 김현미
- 2. 배워야 할까? 당장 실무에 써먹을 수 있나?
- 4. 어떻하지?
- 6. let scope
- 7. const scope
- 8. const object
- 9. 파라메터 기본 값(Parameter Default Value)
- 17. 화살표 함수(Arrow Function) ES5 scope
- 18. 화살표 함수(Arrow Function) ES6 scope
- 20. 클래스(Class) 비교
- 25. 모듈화(Modules)
Editor's Notes
- 안녕하세요. 김현미입니다. 제가 이번에 발표할 주제는 ECMAScipt2015 대한 이야기 입니다. 자바스크립트에 관한 발표를 해달라고 문의가 왔을때 어떤 주제로 발표하면 좋을까 고민을 했었는데요. 마침 ES2015 공부 하고 있던 중이여서 이것을 발표 주제로 삼게 되었습니다. 누군가가 공부한 내용을 정리해서 듣는다는 생각으로 가볍게 들어 주셨으면 합니다.
- ES2015는 기존에 우리가 알고 있던 ECMAScript 262의 6번째 버젼입니다. 그래서 ES6라고도 부릅니다. 2015년 6월에 발표가 되었습니다. ES2015를 공부해서 당장 써먹을수 있나? 실무에 도움이되나? 그런 고민들을 하실수 있습니다. 저는 선택에 여지가 없었는데요. 그 이유는 제가 개발하고 있는 서비스에서 리액트를 사용하고 있었기 때문입니다.
- 이 표는 현재 브라우저 별 ES2015를 지원하는 표입니다. 출처 페이지에서 실시간으로 확인할 수 있습니다. 보시는것 처럼 크롬, 파이어포스, 사파리, 엣지 등 최신 브라우져에서는 스펙 구현률이 높습니다. 우리가 이 표에서 눈여겨 보셔야 할 부분은 왼쪽에 바벨 지원 비율입니다. 바벨은 트랜스파일러라고 부르는데요. 트랜스파일러가 뭐냐면 ES2015 문법으로 적힌 자바스크립트를 지금 사용중이 브라우저에서도 사용할수 있게 변환해주는 도구입니다. 지원 비율이 다행이도 70%가 넘습니다.
- 만약 실무에서 사용을 고려하신다면 바벨을 도입하는 방식으로 해야합니다. 하지만 언제가는 바벨 조차도 없이 ES2015만으로 스크립트립트를 짤수 있는 시대가 오겠죠?
- 그럼 지금부터 ES2015를 훑어 보도록 하겠습니다.
- 첫번째는 let 입니다. 기존에 변수를 선언할때 var로 선언을 했는데요 ES2015 에는 let이라는 변수 선언이 추가되었습니다. var와 let의 큰 차이점은 scope 입니다. var는 함수 기준으로 스코프가 정해졌는데 let은 블록 스코프 변수여서 전역에 선언했을때는 var와 동일하지만 블록에 위치하면 스코프 범위가 다르게 됩니다. 두번째 예제를 보면 if문 밖에 있는 b변수는 if문 안에서 문제가 없지만 if문 안에서 선언된 c는 if문 안에서만 스코프가 유지되기 때문에 밖에서 호출하면 에러를 발생시킵니다. 또한 두번째 예문에서 a와 같은 위치에서 b,c를 호출하게 되면 당연히 에러가 발생합니다.
- 다음은 const 입니다. const는 상수 선언 입니다. let과 동일한 스코프를 가지고 있습니다. 앞서 보신 예제처럼 if문 안에서 선언한 t는 if문 밖에서 호출하게되면 당연히 에러를 발생 시킵니다. 또한 a 위치에서 b, t 를 호출하게 되면 동일하게 에러가 발생하게 됩니다. 그리고 const로 선언된 변수는 상수 이기 때문에 값을 재할당하면 에러가 발생합니다.
- 하지만 const로 선언한 객체의 경우 변수에 재할당을 당연히 불가능하지만 예제처럼 객체 프로퍼티는 변경을 할수 있습니다.
- 파라메터의 기본 값이 없는 경우 첫번째 예제처럼 or 연산자로 기본값을 할당 하셨을 겁니다. 하지만 ES2015에서는 손쉽게 기본 값을 할당 할수 있습니다.
- 다음은 펼침 연산자 입니다 기존에는 배열을 파라메터로 넘기기려면 apply 메소드를 사용했어야 했는데요. 두번째 예제처럼 펼침 연산자를 사용하면 그러지 않아도 됩니다. ES2015에서는 코드를 좀더 우아하게 만들어 주는것 같습니다.
- 펼침 연산자는 배열에서도 사용 할수 있습니다. 첫번째 예처럼 arr1을 arra2에 펼침연산자로 넣으면 합쳐진 형태가 됩니다. 두번재 예처럼 arr2에 arr1를 펼침연산자 형태로 push 메소드로 추가하면 arr2뒤에 연속적으로 추가되는 형태가됩니다. 기존에는 두 배열을 합치려면 복잡한 로직들이 들어갔는데 펼침 연산자를 사용하면 간편하게 사용 할수 있습니다.
- 함수에 여러 파라미터를 전달 했을때 일부를 나머지 파라미터로 받아 받을 수 있습니다. 이전에는 이렇게 하기 위해 arguments는 배열로 변환해서 일부를 잘라내는 등의 작업들을 했는데 이제는 그러지 않아도 되게 되었습니다. 나머지 파라미터는 배열로 받아 지기 때문에 쉽게 전달 할수 있습니다.
- 기존에는 배열의 값을 추출하여 변수에 넣기 위해서 첫번째 예제처럼 했어야 했습니다. 해체 할당을 이용하면 2번째 예제처럼 간략하게 가능합니다.
- 해체 할당은 객체에서도 가능합니다. person의 name과 age를 personName, personAge 라는 변수에 할당하는 방법이 한줄이면 됩니다
- 함수에 옵션 형태로 파라메터로 넘길때 보통 객체 형태로 넘기곤 하는데요. 이때 넘어온 파라메터에 기본값이 없으면 할당해주는 작업들을 해야 했습니다. 그부분도 예제처럼 간략하게 가능 합니다. myfunction을 실행할때 job 프로퍼티를 넘기 않았음에도 출력되는 결과에는 기본 값이 들어갑니다. 또한 옵션 값들을 각각의 변수로 할당하지 않아도됩니다.
- 다음은 화살표 함수 입니다. function이라는 키워드 없이 첫번째 예제처럼 사용가능합니다. 심지어 문이 하나밖에 없고 리턴문을 사용하는 경우에는 블록 조차도 없이 사용 가능합니다.
- 화살표 함수에서 유의해야할 점은 스코프입니다. 이 예제는 기존의 방식입니다. 예제처럼 f1은 object의 프로퍼티이므로 f1함수의 this는 object입니다. f2는 윈도우 객체의 프로퍼티여서 f2의 this는 윈도우입니다.
- 앞서본 코드를 화살표 함수로 변경하게 되면 다음과 같습니다. this 결과 모두 window가 되는데 f1의 스코프가 전역이기 때문에 그렇고 f2는 f1안에 있기 때문에 this는 f1을 가리키고 있게되어서 그렇기 때문입니다. 이부분은 저도 헷갈리는 부분인데요. 기존에 자바스크립트에서 this 값이 결정되는 경우가 복잡하기 때문입니다. 저는 간단하게 화살표 함수를 사용하면 자동으로 bind 된다고 이해를 했습니다. 이부분은 좀더 파봐야 할것 같아요.
- 템플릿 문자열 입니다. +로 문자열과 표현식을 엮어서 사용하곤 했습니다. 가독성도 좋지 않고 난잡해 지기 쉬웠죠. ES2015에서는 템플릿 문자열을 제공합니다. 템플릿 문자열 자체로 표현식을 가질 수 있기 때문에 문자열에 표현식을 쉽게 끼워 넣을 수 있다. 또한 개행을 표현하기도 쉽습니다.
- 예전에는 생성자 함수를 이용하여 객체를 선언하고 인스턴스를 생성하였습니다. ES2015에서는 클래스 키워드로 간단게 만들수 있습니다. 사용 방법은 보시는 것처럼 간단합니다.
- 클래스 바디안에 선언되는 메소드는 프로토타입에 선언됩니다. 따라서 인스턴스를 생성할때 해당 메소드 들을 공유 할수 있습니다. 기존 처럼 prototype를 확장해서 넣는 방식으로 사용하지 않아도 됩니다.
- getter와 setter을 생성하여 내부 변수를 캡슐화 할수 있습니다. _name_의 getter, setter를 생성하면 외부에서 변경이 가능합니다. setter를 만들지 않는다면 외부에서 _name_ 값을 변경 할수 없게 되어 캡슐화가 가능합니다. 이전에는 모듈 패턴을 활용 즉시 실행 함수를 이용하여 가능했던 일이 간편하게 가능하게 됩니다.
- 클래스 내부 정적 메소드를 만들수 있습니다. 메소드 앞에 static 키워드만 붙여주면 됩니다. 유틸함수를 만들어 사용할때 이용하면 좋을것 같습니다.
- 기존에 프로토타입을 이용한 상속 방식을 extends 키워드로 명확하게 상속을 구현할수 있습니다. 에제는 A, B, C 클래스가 있고 B는 A를 상속, C는 B를 상속하는 구조입니다. C는 A도 상속하고 있습니다. 코드를 보면 super 역할도 대략 알수 있습니다. 주의할 점은 constructor에서 super을 우선 실행해야합니다. 만약 this 다음에 하게 된다면 에러를 발생한다고 합니다. C 인스턴스를 생성하고 printAll 메소드를 실행하면 3, 2, 1이 출력됩니다.
- 마지막 모듈화 입니다. 기존 자바스크립트에서는 언어 레벨의 모듈 분할이 불가능 했습니다. 따라서 파일로 나눠서 모듈화하고 require.js와 같은 라이브러리를 쓰거나 꼼수를 써야했습니다. 하지만 ES2015에서는 모듈화를 위한 전용 키워드인 export와 import를 제공합니다. 예제는 대표적인 사용 방법입니다. 눈으로 한번 보시면 이해 하실 겁니다.
- 제가 설명드린 부분들은 ES2015의 일부입니다. 라이브러리, 프로미스, 심볼, 제네레이터 등 많은 부분이 있습니다. 짬나실때 학습 해주시면 여러 모로 좋을 거에요. 제가 참고한 책은 왼쪽에 보이는 책이구요. 그외 참고한 사이트입니다. 마지막 주소는 제 블로그 주소인데요. 발표한 내용을 블로그에 정리하고 있는 중이여서 참고해서 보시면 좋을것 같습니다.
- 고맙습니다. 지금부터는 질문을 받도록 하겠습니다. 저도 공부하고 있는 중이라 답변이 시원하지 못할수 있는 점 양해 부탁드립니다. 혹시 발표 내용이 아닌 프론트엔드 개발에 관한 것, 실무적인 질문도 괜찮습니다.