뒤로 가기
홈으로 이동
러닝패스
공유하기
자바스크립트 ES6의 대표 이미지

자바스크립트 ES6

무료
시리즈

⚡ 9개의 콘텐츠로 1시간이면 이런걸 할 수 있어요!

ES6 필수 문법을 속성으로 알려드려요.
화살표 함수를 작성할 수 있게 됩니다.
구조분해할당(Destructuring assignment)을 배웁니다.
Rest parameters, Spread syntax를 배웁니다.
단축 속성명(Short hand property)을 배웁니다.
계산된 속성명(Computed property)을 배웁니다.
명명 매개변수(Named property)를 배웁니다.
ES6에서 자주 쓰이는 Array methods인 map, filter, reduce, every, some, includes, forEach, find를 배웁니다.
그 외 자바스크립트 코드를 깔끔하게 작성할 수 있게 도와주는 여러 문법을 알려드립니다.(Ternary operator, Nullish coalescing operator, Logical operator, Optional chaining, Template literals)
이 분들은 꼭 보세요.
JS 기초지식 보유자
미리 알고 있어야 해요.
JS 기초지식

ES6는 ECMA에서 2015년에 채택한 자바스크립트 표준이며 ES6 이후로 자바스크립트에는 spread operator, template string literal, destructuring, named parameters 등 많은 변화가 있었습니다.

특히 ES6 문법은 React에서도 자주 쓰이는데요, 이에 무지하거나 익숙해지지 않는다면 깔끔한 React 코드를 작성하거나 다른 사람의 React 코드를 분석할 때 어려움을 겪을 것입니다.

React에서 자주 쓰이는 ES6 문법들을 유튜브에 잘 설명된 영상들로 엮어 살펴보겠습니다.

큐레이터의 노트 소개
기존의 함수 표현식 혹은 함수 선언식 방식으로만 함수를 다루시던 분들이시라면 시청 필수입니다 :) 만약 화살표 함수를 작성해 보셨거나 알고 계신 분이라면 건너뛰셔도 좋습니다. *저는 C++로 처음 프로그래밍을 접했고 그렇다보니 화살표 함수의 형태에 거부감이 느껴졌었는데요, 많이 작성하고 접하다보니 지금은 많이 익숙해진 상태입니다 ㅎㅎ 저도 그랬으니 여러 분들도 그러실거에요!
서원석의 프로필 이미지
서원석 님의 학습노트 외 1개
신하영의 프로필 이미지

학습노트 제목: 자바스크립트 기초 강좌 #11 - 함수 표현식, 화살표 함수(arrow function)

Video

자바스크립트 기초 강좌 #11 - 함수 표현식, 화살표 함수(arrow function)

출처: https://youtu.be/Zwaxqf1gsTg
#전체 #개발자 #프론트엔드 #자바스크립트 #javascript #js #es6 #basic #초보 #강좌 #tutorial #함수 #function #함수 선언문 #함수 표현식 #화살표 함수 #arrow function #호이스팅 #hoisting
큐레이터의 노트 소개
배열의 구조 분해 할당은 리액트의 useState hook의 return 값과도 관련이 있죠? 또한 객체의 구조 분해 할당은 리액트 컴포넌트에 props 대신 각각의 property로 작성할 수 있도록 해줍니다. 위의 문장을 읽었을 때 이해가 전혀 되지 않는 분이시라면 해당 학습노트를 필수적으로 시청해주세요. 물론 리액트를 먼저 접하고 계속 작성하다보면 이해가 될 순 있지만, 그 부분이 자바스크립트의 어떤 문법인지까지 알지는 못하며 에러를 찾는데 있어 어려움을 겪으실수도 있습니다.
서원석의 프로필 이미지
서원석 님의 학습노트

학습노트 제목: 자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment)

Video

자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment)

출처: https://youtu.be/lV7ulA7R5Nk
#전체 #개발자 #프론트엔드 #자바스크립트 #javascript #js #es6 #강좌 #tutorial #중급 #intermediate #구조 분해 할당
큐레이터의 노트 소개
배열 합치기, 객체 합치기 등을 할 때 기존의 방식보다 훨씬 간결하고 직관적으로 할 수 있게 도와주는 문법, Spread syntax입니다. 또한 Rest parameters는 React에서 하위 컴포넌트에게 자신의 props을 넘겨줄 때 아주 유용하게 활용할 수 있는 문법이죠.
서원석의 프로필 이미지
서원석 님의 학습노트

학습노트 제목: 자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)

Video

자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)

출처: https://youtu.be/lekNM8ldxno
#전체 #개발자 #프론트엔드 #자바스크립트 #javascript #js #es6 #강좌 #tutorial #중급 #intermediate #나머지 매개변수 #전개 구문 #Rest parameters #Spread syntax
큐레이터의 노트 소개
short hand property, 일명 '단축 속성명'를 활용하면 객체를 생성하는 코드를 작성할 때 더욱 간결히 작성할 수 있게 됩니다. 영상에 남겨진 해설노트만 읽으시면 되기 때문에 부담없이 다녀오세요 ^^
서원석의 프로필 이미지
서원석 님의 학습노트

학습노트 제목: Javascript Object Shorthand Property

Video

Javascript Object Shorthand Property

출처: https://youtu.be/A0F3NVTZBA8
#전체 #개발자 #프론트엔드 #javascript #object #shorthand
큐레이터의 노트 소개
리액트에서 제일 자주 사용되는 문법인 map, filter, reduce은 물론 every, some, includes, find, forEach 등 유용한 배열 함수에 대해 다루는 영상입니다. 영어 강의이지만 코드와 출력 결과를 따라가면 이해하시는데 무리가 없으실거에요. 리액트의 JSX와 함께 자주 사용되기도 하고 API로 부터 받아온 데이터를 다룰 때도 사용하는 매우매우매우 중요한 문법입니다. 씹어먹겠다는 각오로 해당 강의 수강해주세요!
서원석의 프로필 이미지
서원석 님의 학습노트

학습노트 제목: 8 Must Know JavaScript Array Methods

Video

8 Must Know JavaScript Array Methods

출처: https://youtu.be/R8rmfD9Y5-c
#전체 #개발자 #프론트엔드 #webdevsimplified #javascript array methods #javascript higher order array methods #javascript map function #javascript filter function #javascript top 8 #javascript reduce method #javascript find method #javscript every function #javscript some function #javascript array tutorial #javascript array methods tutorial #javascript array methods exaplained #javsacript array functions #best array methods #must know array methods #javascript #javscript array functions tutorial #array
큐레이터의 노트 소개
위에서 언급된 내용을 포함해서 삼항연산자(Ternary operator), Nullish coalescing operator(??), Logical Operator(||), Optional chaining, Template literals 등 아주 자주 쓰이는 자바스크립트 문법이 이 짧은 영상 하나에서 다뤄지고 있는데요. 예시를 통해 간결하고 이해가 쉽도록 설명을 해주시니 처음 접하시는 개념이시더라도 금방 이해하실 수 있을거에요. *저는 특히 Nullish coalescing operator(??), Logical Operator(||)이 마음에 들더라구요. 긴 코드를 짧게 바꿔주는 것이 그 이유일까요? 여러분은 이 영상을 보고 어떤 문법을 가장 좋아하게 되실지 궁금하네요? 🤔
서원석의 프로필 이미지
서원석 님의 학습노트

학습노트 제목: 자바스크립트 프로처럼 쓰는 팁 ✨ (+ 보너스 인터뷰 문제 하나!)

Video

자바스크립트 프로처럼 쓰는 팁 ✨ (+ 보너스 인터뷰 문제 하나!)

출처: https://youtu.be/BUAhpB3FmS4
#전체 #개발자 #프론트엔드 #자바스크립트 #최신자바스크립트 #드림코딩 #웹개발 #코딩 #프로그래밍 #자바스크립트 기초 #자스크립트 강좌 #코딩 면접
named parameter, 일명 '명명된 매개변수'는 함수 호출 시 넘기는 인자에 naming을 함으로써 함수가 필요로하는 인자가 무엇인지 명시적으로 드러내는 것을 말합니다. 코드 작성 시 개발자의 이해를 도울 수 있겠죠? 자바스크립트에서는 어떻게 구현할 수 있을까요? 살펴보시죠. *관련 개념: destructuring assignment <제목: named Params(명명된 매개변수)란?> *첫 번째 함수 예시 선언: const makePerson1 = (name, age) => ({name, age}); 호출: makePerson1('p1', 100); *두 번째 함수 예시 선언: const makePerson2 = ({name, age}) => ({name, age}); 호출: makePerson2({name: 'p2', age: 101}); 첫 번째 함수는 argument가 두 개입니다. name과 age이죠. 그래서 호출할 때도 'p1'과 100, 두 개의 인자를 입력합니다. 두 번째 함수는 argument가 한 개입니다. name과 age property를 가지는 object이죠. 그래서 호출할 때는 하나의 object만 전달됩니다. 이 둘의 차이점이 무엇일까요? 바로 호출하는 시점에서 어떤 인자가 들어가는지 확인할 수 있다는 것입니다. 첫 번째 함수의 parameter인 'p1', 100은 뭘 의미하는지 아시겠나요? 그에 반해 두 번째 함수의 parameter인 { name: 'p2', age: 101 }은 'p2는 name이고 101은 age이구나'를 바로 알 수 있겠죠?
정리: 해당 러닝패스를 통해 '화살표 함수 작성법, 구조 분해 할당, rest parameters, spread syntax, object(shorthand property, computed property name, named parameter), 배열 method, 삼항 연산자, Nullish coalescing operator(??), Logical Operator(||), Optional chaining, Template literals' 등.. 리액트 코드 작성, 이해에 필요한 JS ES6+ 지식을 훑어보셨습니다. 축하드려요! 👏👏👏 훑어보신 내용을 다 외우려 하기보다는 메타 지식을 얻었다는 느낌으로 코드를 작성하다가 '아 맞다, 그 문법 적용해봐야지' 라는 느낌으로 하나하나 실제 구현 시에 유용하게 꺼내 쓰신다면 코드를 깔끔하게 줄였다는 만족감과 함께, 기억 속에 더 오래 자리 잡게 될 거에요. 😄
이 러닝패스가 어땠나요?
(내 보관함에서 다시 볼 수 있어요)
댓글 1
썬석 test의 프로필 이미지
썬석 test
10달 전
자바스크립트 기초 학습에 매우 좋네요.
댓글 달기
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기