자바스크립트 표준 ECMAScript!
큰 변화가 있었고, 모던 자바스크립트의 축이 되는 ES2015 (ES6) 를 학습하는 강좌 입니다.
이 강좌는 전체내용을 교과서적으로 자세히 설명하는 방식이 아닌, 각 feature별 짧은 실습코드를 통해서 실제로 어떻게 구현하고 활용하는지를 배울 수 있습니다.

코드스쿼드의 윤지수 Front-End 마스터가 각 기능을 예제코드를 통해 이해하는 실습형 강좌입니다.

1. 모던 자바스크립트 개발을 위한 ES6 강좌 소개

javascript 표준을 정의하는 ECMAScript 중 최근 가장 중요한 변화를 겪었던 ECMAScript 2015(이하 ES6) 를 학습해볼 수 있는 강좌입니다.
ES6 에서 새롭게 추가된 syntax 와 기능들을 코드를 통해서 짚어보고 사용해 보면서 javascript 의 이런저런 특징들을 알 수 있게 됩니다. 또한 학습 중간 중간 ‘배열만들기’ 와  ‘로또번호만들기’ 등의 간단한 실습 예제들을 만들어, 생각해보면서 자기의 것으로 만들 수 있도록 도와주는 실습형 강좌입니다.

왜 ES6 를 배워야 하죠?

  • 모던 자바스크립트 개발을 위해
  • 다른 사람의 코드를 읽고 사용하기 위해
  • 현재 많이 사용되는 javascript 라이브러리와 프레임워크(react, angular,vue 등등..) 는 대부분 ES6 를 기반으로 둠
  • 새로운 syntax로 보다 효율적으로 개발
  • 새로운 기능의 사용으로 라이브러리에서 벗어날 수 있음

2. 도움되는 분들

  • 자바스크립트를 다루는 개발자
  • 많이 쓰이고 있는 라이브러리, 프레임워크를 이해하고 싶은 분
  • ES6 의 새로운 부분을 알고 싶은 분
  • javascript 에 대한 이해도가 있는 분

3. 강좌 특징

  • 예제 코드를 통한 실습 중심의 강좌
    (자바스크립트 기본을 학습하고 싶은 분께는 맞지 않습니다.)
  • 난이도 : 초급~중급 (입문용 아니에요.)
  • jsBin 을 통해 학습을 진행합니다. (http://jsbin.com)

4. 강사소개

윤지수

네이버에서 Core UI 개발과 개발팀장을 했습니다. NEXT에서 웹 UI 전임교수를 하며 인재양성을 하기도 했으며, SK Planet 에서 기술분야의 유일한 Master레벨로 근무했습니다. 삼성전자, 씨티은행, 삼성생명, NAVER Technology service, 위메프등 국내 여러회사에서 웹프론트엔드 강의 경력이 있으며, 2014년에 NAVER 신입사원교육, 2015년 SK Planet 신입사원 교육을 설계하고 멘토로 참여했습니다. Deview 2016에서 웹프론트엔드 강의를 하기도 했습니다. UX를 고려한 웹 프론트엔드 개발방법과 Clean한 웹프론트엔드 개발방법에 관심이 많습니다. 개발관련 유용한 강의자료를 40편 정도 slideshare를 통해서 많은 개발자들에게 공유하고 있습니다.

코드스쿼드

코드스쿼드

개발자 출신의 교육 전문가들이 만든 최고품질의 소프트웨어 교육기관
http://codesquad.kr

강좌 평가

4.3

11 개의 수강평
  • 5 점6
  • 4 점3
  • 3 점1
  • 2 점1
  • 1 점0
  1. momoChung의 프로필 사진

    강의가 전체적으로 가볍게 접근할 수 있어서 좋았습니다.

    5

    강의가 전체적으로 가볍게 접근할 수 있어서 좋았습니다.
    하지만 동영상 강의 중간중간에 오타에 대해서 디버깅으로 시간은 낭비하는것은 좀 안타까웠습니다.

  2. Kim Sang Woon의 프로필 사진

    멋진 강의 고맙습니다.^^

    5

    ES6에 대해 쉽게 잘 설명해주셔서 많은 도움이 됐습니다.
    다음 강좌도 기대가 되네요ㅎㅎ
    강의하느라 고생 많으셨습니다.^^

  3. SS Ch의 프로필 사진

    좀 더 세심한 강의 준비가 필요할 거 같습니다.

    2

    강의 전에 수강생을 위한 세심한 준비가 필요할 거 같습니다.
    교육을 듣는 목적은 빠른 시간안에 많은 정보를 습득하기 위함입니다.
    수업중에 디버깅으로 너무 많은 시간을 할애하는 거 같습니다.

    강의 내용 중 참고한 https://tlhm20eugk.execute-api.ap-northeast-2.amazonaws.com/prod/lambda_get_blog_info
    도 접속이 되지 않아서 예제를 해보지 못했습니다.

  4. seongchun lim의 프로필 사진

    Mini Project 가 좋습니다.

    5

    급하게 개념을 잡고, JS 영역에서의 필요 요소들을 찾아볼 수 있는 Index같은 강의였습니다.

    강좌를 듣고, 심화로 나가야 하는 RoadMap이 잡힌 것 같아서 좋네요.

  5. miriamme의 프로필 사진

    좋은 강좌 잘 들었습니다.

    5

    간단하게 만드는 사이트정도에서는 아주 좋을 것 같습니다.
    추가적으로 바라는게 있다면 큰 사이트라고 가정하고 소스 분리하는 과정이 있었으면 합니다.

    저도 웹개발자이고 큰 사이트만 작업하다 보니 자꾸 이런 것만 바라게 되네요.
    아무튼 좋은 강좌 감사드립니다.

  6. Yohan Park의 프로필 사진

    지속적으로 피드백을 받고 강좌를 개선해 나가는 것이 너무 좋습니다

    5

    마이크 음질도 분명해서 좋구요.

    아쉬운점이라면 아무래도 영상이 길면 끝까지 시청하지 않는 사용자가 많은 것을 의식하신건지 짧게 촬영을 하셨네요. 그건 좋지만 이해를 돕기 위한 설명 시간도 함께 짧아져서 뭔가 급히 마무리 되는 것처럼 느껴지네요.

    자바스크립트가 발전하며 그 흐름을 따라 가기에 부족함이 없는 강좌라 생각되네요. 부지런히 연습하겠습니다. 🙂

  7. jangji1의 프로필 사진

    잘 보고있습니다.

    4

    리엑트와 앵귤러같은 프레임워크를 사용하면서 ES6가 거의 필수적으로 필요하다고 판단이 돼서 강좌를 듣고있습니다.
    개인적으로는 영상이 너무 길면 늘어질수있기때문에 짧은것도 괜찮다고 생각합니다.
    난이도도 입문용이 아니기때문에 초중급자들이 보기에 적당한 수준이라고 생각합니다.
    초중급자 입장에서 봤을 때 이해하기 어렵지는 않았습니다.
    다만 ES5를 먼저 학습한 후에 이 강의를 들어야 훨씬 도움이 될 것 같아요.
    남은 강의도 잘 볼게요~

  8. Applejjeing의 프로필 사진

    간결하고 중요한 내용만 짚어주니까 좋네요.

    5

    아직 리엑트나 앵귤러 같은 모던 라이브러리나 프레임워크를 사용하지 않고 있어서 필요를 느끼지 못하다가, 이번기회에 배우게 되었습니다.
    ES6에서 변경되거나 추가된 요소들만 짚어서 보여주는 코드가 시간을 아끼면서도 도움이 많이 됩니다.
    짧은 시간에 ES5와 ES6의 차이점을 알 수 있으면서 활용하는 아이디어를 갖는게 좋네요.
    다만 자바스크립트에 대해서 입문하는 사람이나 개발경험이 없는 사람에게는 맞지 않는 강의인거 같습니다.
    자바스크립트를 자주 사용해 왔던 개발자가 보면 시간아끼고 좋아요.

  9. 담요의 프로필 사진

    강의가 전체적으로 가벼운 느낌이 있습니다.

    3

    우선 강의가 전체적으로 가볍네요.
    각 주제별로 영상이 너무 짧아요. (약 2분)
    그러니까 맥이 탁탁 끊깁니다.
    Bootstrap 이나 Vue.js 처럼 잘 정리된 공식 가이드 문서를 보면서 짚어주는 느낌이랄까요…
    그 이상의 유용한 팁이나, 노하우는 많이 녹아있지 않은 것 같습니다.
    각 주제별로 영상이 좀 짧아서 그런지 이제 좀 머리가 돌아가고 정리가 되려고 하면 끝나버려요…
    어떤 부분이 개선되었고, 어떤 식으로 쓰일 수 있는지 설명은 해주시는데,
    좀 더 구체적인 사례 같은걸 들어서 풀어주시면 더 좋을 것 같습니다.
    많이 저지르는 실수같은 유의사항도 있으면 좋을 것 같구요.

    또, jsbin.com 서비스를 이용하시는건 강의자 입장에서는 편할지 모르겠지만,
    캐시 문제로 콘솔창의 결과값이 제대로 안나올 때가 많아서 강의 중에 반복해서 ‘Clear’, ‘Run’을 누르시던데 수강자 입장에서는 방해가 됩니다.
    (제가 써보기로는 ‘Clear’, ‘Run’ 반복해서 누르는 것 보다 ‘Run’ 하기 전에 Ctrl+S 한번만 눌러주면 잘 되던데요…)
    이 문제를 해결하시고 녹화하시던가, 다른 서비스를 사용하시던가, 영상 편집으로 이 불필요한 과정은 좀 잘라내면 좋을 것 같습니다.
    또, 기왕 온라인 에디터(?)를 쓰실 거면 강의에서 작성한 샘플 코드를 볼 수 있는 URL도 남겨주시면 좋을거 같아요.

    • 윤지수의 프로필 사진

      안녕하세요.

      4

      @Minsu님,
      피드백 감사드려요.
      a-z까지 나열하는 강좌가 아니라서요. 그렇게 충분히 생각하셨을 거 같아요.
      예제위주로 영상을 보여드리면서, 자연스럽게 실습중에 겪는 문제들을 그대로 노출했던것도 사실인데요. 아마 정리되지 않은 모습을 보여지셨을 거 같습니다. 도움을 드리지 못해서 죄송하게 생각합니다.
      개인적인 질문이 있으시면 질문남기시거나, 이메일로 연락주시면 답변드리도록 할게요!
      nigayoun@gmail.com

강좌 교육과정

오리엔테이션
ES2015 (ES6) 시작하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:05:00
scope
let학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:03:00
let 과 closure학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
const – 선언된 변수 지키기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
const 특성과 immutable array학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
String
ES2015 String 에 새로운 메서드들학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
Array
for of – 순회하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
spread operator – 배열의 복사학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:03:00
spread operator – 몇가지 활용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
from 메서드로 진짜 배열 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
실습 1 - 특정 문자열이 포함된 배열 만들어 반환하기
실습 예제 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
실습 예제 1 풀어보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
Object
간단히 객체생성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
Destructuring
Destructuring Array학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:03:00
Destructuring Object학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
Destructuring 활용 JSON파싱학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
Destructuring 활용_Event객체전달학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:06:00
Set & WeakSet
Set 으로 유니크한 배열만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
WeakSet 으로 효과적으로 객체타입저장하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:00
Map & WeakMap
Map & WeakMap 추가정보를 담은 객체저장하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
WeakMap 클래스 인스턴스 변수 보호하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
실습예제 2 - Destructuring 과 Set 을 활용한 로또 번호 생성기
로또 번호 생성기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
Template
Template처리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
Tagged Template literals학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
function
Arrow function 활용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:05:00
Arrow function 의 this context학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
function default paramaters학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
rest paramaters학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
객체
class 를 통한 객체생성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
Object assign으로 JS객체만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
Object assign으로 Immutable 객체만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
Object setPrototypeOf로 객체만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
Object setPrototypeOf 로 객체간 prototype chain생성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:00
module
module(export & import)의 이해학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
module(export & import)기반 서비스코드 구현방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
Proxy
Proxy로 interception기능구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:17:00
미니 프로젝트
step0. 미니 프로젝트 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
step1. nodeJS 기반 환경구성과 webpack학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:18:00
step2. babel preset 설정학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:00
step3. webpack-dev-server와 html 구성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:00
step4-1. XHR통신학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
step4-2. bloglist 추가학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
step5. Set자료에 데이터 추가(찜하기기능)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:21:00
step6. 찜목록뷰 업데이트학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:20:00

우리는 성장기회의 평등 을 추구합니다.

경제적, 시간적 제약없는 양질을 교육으로 누구나에게 성장 기회를 균등하게 주는것. 그것이 우리의 목표입니다.

지식공유참여 고객센터
top
(주)인프랩 | 대표자:이형주 | TEL:070-4202-1180 | E-MAIL: course@inflearn.com | 사업자번호:499-81-00612
주소:성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R10 | 개인정보보호책임자:이형주
통신판매업:2017-서울강남-01544 | ©INFLAB. ALL RIGHTS RESERVED