모던 자바스크립트(javascript) 개발을 위한 ES6 강좌

모던 자바스크립트(javascript) 개발을 위한 ES6 강좌

(28개의 수강평)

2758명의 수강생

무료

윤지수
평생
중급
수료증
44개 수업, 총 5시간 7분

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

지식공유자 소개

윤지수

교육과정

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

수강 후기

4.4
28개의 수강평
결국우리 8일 전
너무 좋아요~!
Juno Ahn 16일 전
쉽고 잼있게 강의를 정말 잘하시네요. 소중한 시간 좋은 강좌 만들어 주셔서 정말 감사합니다.
한혜경 1달 전
ES6문법 중에 헷갈리던 부분들이 잘 잡혔어요~! 그런데 촬영 중간 중간 준비가 덜 된 듯한 느낌이 들 때가 있는데 그런 거 빼고는 다 좋았습니다~! 감사합니다~!^^
Jae-young Park 1달 전
좋은 강의 감사합니다~
윤지수 프로필

윤지수 1달 전
넵 도움이 되신 거 같아 기쁩니다.

bhhan 1달 전
좋은 강의 감사합니다. 많이 배우고 갑니다.
윤지수 프로필

윤지수 1달 전
감사합니다 :-)

진인사 2달 전
es6 를 기초를 잡는데 도움이 되었습니다. 기초개념부터 활용까지 집어주셔서 정말 도움이 되었네요. 특히 마지막에 webpack 기반에 활용까지 넣어 주셔서 좋았구요. 무료강좌인데도.. 감사합니다. 디버깅/강의중 오류수정 등은 개발에 과정으로 생각해서 저는 오히려 좋았습니다. 강의를 토대로 앞으로 더욱 공부해야 겠습니다. ^--^
윤지수 프로필

윤지수 2달 전
응답 감사합니다. 디버깅 오류과정을 오히려 이해해주셔서 감사합니다. ^^ 즐 코딩 하세요!

이유정 3달 전
javascript에 기본 지식과 DOM구조 AJAX 등 어느 정도 알아야지 듣기 수월하실 꺼에요. webpack설정하는 것도 npm이 뭔지 아셔야지 설치하는데도 무리가 없어요. 저는 vanilia javascript를 어느 정도 해서 es6 배우는데 크게 어렵진 않았어요.
sohyeon jeon 3달 전
전체적으로 내용이 괜찮았습니다. -강의 시간이 적당했습니다. 하나하나 너무 길었다면 완주하지 못했을 거에요. 강의 목소리도 계속 듣기에 부담스럽지 않아서 괜찮았습니다. -예제 기준으로 개념을 습득해서 따라하면서 하니까 이해가 좀 더 쉬웠던 것 같습니다. -맵과 셋에 대한 이해가 부족했는데 강의를 통해서 알게될 수 있어 좋았습니다. 프록시도 잘 몰랐는데 알게되어 좋았습니다. 꼭 필요한 개념들은 활용 예제로 한 번 더 짚고 넘어가주셔서 제대로 공부하는 느낌이었습니다. 아쉬운게 있다면, -개념 설명이 말로만 잠깐씩 이루어져서 금방 넘어가는 느낌을 받습니다. 자막이나 화면상으로 추가 설명이 있었다면 어땠을까 하는 아쉬움이 남습니다. -코드 재실행, 비행기 소음 등 영상 편집으로 넘어갈 수 있는 부분들이 그대로 강의 상에 남아있어 불필요하게 느껴집니다. -실습 예제 중 로또번호 생성기에 대해서 풀이 영상이 없습니다. -미니 프로젝트 영상은 최신 버전에 맞추어 한번쯤 업데이트가 필요한 것 같습니다. 웹팩 설정, 바벨, XHR 통신 등 강의대로 따라하려니 버전차이도 있고 다르게 작업되는 부분도 있더라구요.
윤지수 프로필

윤지수 3달 전
응답 감사합니다. 네 피드백을 자세히 알려주셔서 감사드립니다. 업데이트 해야할 내용을 고민해서 진행해야겠네요 :-)

양병윤 4달 전
ES6 문법을 가볍게 익히기 좋은 강좌입니다. ES5만 쓰다가 이번에 ES6 공부를 하는 중인데 각 강의마다 길지 않고 필요한 부분만 알려주셔서 좋았습니다.
윤지수 프로필

윤지수 3달 전
피드백 감사드려요. 네 핵심만 짚고 넘어가는 컨셉이라.. 내용이 약간 부족하기도 하죠. 피드백 감사해요.

신승화 5달 전
듣길 잘했어요 es6 혼자 공부한뒤 정리용으로 들었는데 알아가는게 많네요. 길이가 짧지만 알찬 강의 입니다. 감사합니다.
김의중 7달 전
짧막 짧막 하게 되어있어서 오히려 집중력 있게 볼수 있었어요. 감사합니다 ~~ ㅎㅎ
이준명 7달 전
잘봤습니다. 잘봤어요.~~~좋은강의 감사합니다.
박시중 7달 전
이런 강좌가 무료라니..고맙습니다. 한/영 전환이 잘 안된 것 빼고는 너무 좋은 강좌 잘 들었습니다. ^^
Taeeun Kim 7달 전
es6를 알 수 있어서 좋았습니다.
Cheoljung Lee 7달 전
강좌 잘 봤습니다 ES6에 대해 조금이나마 알 수 있게되는 강좌였습니다. 좋은 강의 감사합니다
JAEHYUNG cho 8달 전
감사합니다 jquery 1버전 공부한 것으로 지금까지 살아 왔는데 이 강의로 업그레이드 되었습니다
윤지수 프로필

윤지수 7달 전
jquery! 아 조금이라도 도움이 되셨다니 감사하네요 ^^ jquery와 이제 이별할때죠~

Taemin Lim 9달 전
좋은 강좌 잘 들었습니다. 미니 프로젝트를 통해서 간단하게 어떻게 활용할 수 있을지 감을 잡는데 도움이 많이 되었습니다. 감사합니다.
윤지수 프로필

윤지수 7달 전
감사합니다. 실습을 직접 해보시면 좀더 도움이 되실겁니다~!

Jun hwang 9달 전
es6 문법에 대해 잘 배우고 갑니다. 현재 es6문법을 쓰고있지는 않지만 추후를 위해서 기본적으로 알고자 강의를 들었습니다. 잘 배우고 갑니다. 감사합니다~
차현철 11달 전
기초에 좋은강좌네요 많은 도움이 되었습니다 감사합니다
구선모 2018.06.07
강의가 전체적으로 가볍게 접근할 수 있어서 좋았습니다. 하지만 동영상 강의 중간중간에 오타에 대해서 디버깅으로 시간은 낭비하는것은 좀 안타까웠습니다.
Kim Sang Woon 2018.05.31
멋진 강의 고맙습니다.^^ ES6에 대해 쉽게 잘 설명해주셔서 많은 도움이 됐습니다. 다음 강좌도 기대가 되네요ㅎㅎ 강의하느라 고생 많으셨습니다.^^
천세선 Ch 2018.04.18
좀 더 세심한 강의 준비가 필요할 거 같습니다. 강의 전에 수강생을 위한 세심한 준비가 필요할 거 같습니다. 교육을 듣는 목적은 빠른 시간안에 많은 정보를 습득하기 위함입니다. 수업중에 디버깅으로 너무 많은 시간을 할애하는 거 같습니다. 강의 내용 중 참고한 https://tlhm20eugk.execute-api.ap-northeast-2.amazonaws.com/prod/lambda_get_blog_info 도 접속이 되지 않아서 예제를 해보지 못했습니다.
윤지수 프로필

윤지수 2018.04.18
피드백 감사드려요. 디버깅 과정에서 불편을 느끼셨다니 죄송합니다. 영상에 노출된 URL접속이 안되는 것은, 확인해서 json파일을 만들어서 별도 안내할 수 있도록 해야겠네요. 의견 감사드립니다.

seongchun lim 2018.03.02
Mini Project 가 좋습니다. 급하게 개념을 잡고, JS 영역에서의 필요 요소들을 찾아볼 수 있는 Index같은 강의였습니다. 강좌를 듣고, 심화로 나가야 하는 RoadMap이 잡힌 것 같아서 좋네요.
Minsu Kong 2018.01.24
별로입니다. 일단 es6 대해 나열은 좋은데 그거 가지고 뭐라고 하는게 아니라.. 기본적으로 강좌 환경 자체를 잘못 고르셔서, 캐시문제로 강사가 당황해 합니다. 또한 스스로 해보고 하는건지 모르겠는데, 제가 보면서도 오타가 나서 어? 이건 오류 당연 날텐데 하는 부분이 너무 많습니다. 강좌를 들으려 했는데 디버깅 하는 영상을 보고 있네요. 또한 es6에 대한 완전한 수박 겉핥기식 공부 방법으로 알려주시네요? 보다가 어이없어서 MDN doc 보고 공부했습니다. 차라리 MDN doc이 나을 정도 입니다... 돈받고 강좌하는데 기본이 너무 안되어 있습니다. 핸드폰 알림이 계속 들린다던가... 비행기 소리가 너무 크게 나던가.. 강사가 본인이 쓰고 있는 예제를 오류내서 디버깅으로 시간을 오래 보낸다 던가.. 소스 파일 조차 깃에다 올려놓지 않아 예제 파일을 받을 수 없다 던가.... 심각성을 깨닫으시고 다음 강좌는 반드시 기본은 지켜 주셨으면 좋겠습니다. 톤이나 말투는 듣기 좋았으나, 기본이 안되서 별점을 다 깍아 내렸네요...
miriamme 2018.01.06
좋은 강좌 잘 들었습니다. 간단하게 만드는 사이트정도에서는 아주 좋을 것 같습니다. 추가적으로 바라는게 있다면 큰 사이트라고 가정하고 소스 분리하는 과정이 있었으면 합니다. 저도 웹개발자이고 큰 사이트만 작업하다 보니 자꾸 이런 것만 바라게 되네요. 아무튼 좋은 강좌 감사드립니다.
박요한 Park 2017.08.19
지속적으로 피드백을 받고 강좌를 개선해 나가는 것이 너무 좋습니다 마이크 음질도 분명해서 좋구요. 아쉬운점이라면 아무래도 영상이 길면 끝까지 시청하지 않는 사용자가 많은 것을 의식하신건지 짧게 촬영을 하셨네요. 그건 좋지만 이해를 돕기 위한 설명 시간도 함께 짧아져서 뭔가 급히 마무리 되는 것처럼 느껴지네요. 자바스크립트가 발전하며 그 흐름을 따라 가기에 부족함이 없는 강좌라 생각되네요. 부지런히 연습하겠습니다. :)
장지원 2017.07.11
잘 보고있습니다. 리엑트와 앵귤러같은 프레임워크를 사용하면서 ES6가 거의 필수적으로 필요하다고 판단이 돼서 강좌를 듣고있습니다. 개인적으로는 영상이 너무 길면 늘어질수있기때문에 짧은것도 괜찮다고 생각합니다. 난이도도 입문용이 아니기때문에 초중급자들이 보기에 적당한 수준이라고 생각합니다. 초중급자 입장에서 봤을 때 이해하기 어렵지는 않았습니다. 다만 ES5를 먼저 학습한 후에 이 강의를 들어야 훨씬 도움이 될 것 같아요. 남은 강의도 잘 볼게요~
김철중 2017.06.28
강의가 전체적으로 가벼운 느낌이 있습니다. 우선 강의가 전체적으로 가볍네요. 각 주제별로 영상이 너무 짧아요. (약 2분) 그러니까 맥이 탁탁 끊깁니다. Bootstrap 이나 Vue.js 처럼 잘 정리된 공식 가이드 문서를 보면서 짚어주는 느낌이랄까요... 그 이상의 유용한 팁이나, 노하우는 많이 녹아있지 않은 것 같습니다. 각 주제별로 영상이 좀 짧아서 그런지 이제 좀 머리가 돌아가고 정리가 되려고 하면 끝나버려요... 어떤 부분이 개선되었고, 어떤 식으로 쓰일 수 있는지 설명은 해주시는데, 좀 더 구체적인 사례 같은걸 들어서 풀어주시면 더 좋을 것 같습니다. 많이 저지르는 실수같은 유의사항도 있으면 좋을 것 같구요. 또, jsbin.com 서비스를 이용하시는건 강의자 입장에서는 편할지 모르겠지만, 캐시 문제로 콘솔창의 결과값이 제대로 안나올 때가 많아서 강의 중에 반복해서 'Clear', 'Run'을 누르시던데 수강자 입장에서는 방해가 됩니다. (제가 써보기로는 'Clear', 'Run' 반복해서 누르는 것 보다 'Run' 하기 전에 Ctrl+S 한번만 눌러주면 잘 되던데요...) 이 문제를 해결하시고 녹화하시던가, 다른 서비스를 사용하시던가, 영상 편집으로 이 불필요한 과정은 좀 잘라내면 좋을 것 같습니다. 또, 기왕 온라인 에디터(?)를 쓰실 거면 강의에서 작성한 샘플 코드를 볼 수 있는 URL도 남겨주시면 좋을거 같아요.
윤지수 프로필

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