러닝패스

리액트를 배우기 전에 알아야하는 자바스크립트 필수 지식

멤버십
시리즈
⚡ 3.5시간이면 이런걸 할 수 있어요!
리액트는 대부분 자바스크립트 코드로 작성됩니다. 자바스크립트 핵심지식을 빠르게 훑어봅니다.
ES6 필수 문법만을 빠르게 훑어봅니다.
자바스크립트로 비동기 프로그래밍을 하기 위해 필요한 문법 같은 지엽적인 부분부터 연관된 관련 지식, 개념들을 통틀어 빠르게 배워봅니다.
자바스크립트의 문법도 중요하지만 기반 지식을 아는 것도 매우 중요합니다. 코드를 작성하기 전에 알아야하는 자바스크립트 근본 지식을 배워봅니다.
학습 시간을 줄였어요!
3.5시간
핵심 콘텐츠만 선별했어요!
4개 콘텐츠
이 분들은 꼭 보세요.
리액트를 배우려는 사람(JS 기초가 부족한 사람)
미리 알고 있어야 해요.
HTML, CSS, JS 기초
이 러닝패스가 어떠신가요?
(내 보관함에서 다시 볼 수 있어요)
대상: 리액트를 배우려는 대상(HTML, CSS, JS에 대한 기본 지식이 있는 사람) but JS에 대한 지식을 다시 한 번 살펴보며 되뇌어야하는 사람 혹시 리액트를 하루라도 빨리 공부하기 위해 자바스크립트 공부는 거의 하지 않거나 소홀히 하고 계시나요? 혹은 자바스크립트 공부를 하긴 했지만 리액트를 다루는 데 있어서 어려움을 겪고 계시나요? 저의 경우엔 취업을 준비하던 시기, 취업 후 리액트로 업무를 시작하던 시기에 자바스크립트 공부보다는 리액트 공부가 급하게 느껴졌고 그렇다 보니 자바스크립트 공부엔 소홀했었습니다. 그 결과, 어느 시점부터는 코드를 이해하는데 필요한 시간이 점점 늘어나더라고요. 경력 만 1년이 다 되어가는 지금, 해당 러닝패스를 제작하며 자바스크립트 문법을 둘러보니 제가 막히고 어려워했던 리액트의 상당 부분이 결국은 자바스크립트의 이해에서 시작한다는 것을 새삼 알게 되었습니다. 여러분들은 리액트를 본격적으로 공부하기에 앞서 확실하게 자바스크립트 기초 영역을 정복하여 더욱 빠르게 리액트를 이해하실 수 있기를 바랍니다. *React를 다루기 위해 꼭 알아야하는 JS 문법들과 개념을 다룹니다.
PATH
ES6는 ECMA에서 2015년에 채택한 자바스크립트 표준이며 ES6 이후로 자바스크립트에는 spread operator, template string literal, destructuring, named parameters 등 많은 변화가 있었습니다. 특히 ES6 문법은 React에서도 자주 쓰이는데요, 이에 무지하거나 익숙해지지 않는다면 깔끔한 React 코드를 작성하거나 다른 사람의 React 코드를 분석할 때 어려움을 겪을 것입니다. React에서 자주 쓰이는 ES6 문법들을 유튜브에 잘 설명된 영상들로 엮어 살펴보겠습니다.
서원석의 러닝패스
자바스크립트 ES6
자바스크립트 기초 강좌 #11 - 함수 표현식, 화살표 함수(arrow function)
출처: https://youtu.be/Zwaxqf1gsTg
자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment)
출처: https://youtu.be/lV7ulA7R5Nk
자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)
출처: https://youtu.be/lekNM8ldxno
PATH
여기를 읽고 계신거면... 자바스크립트 ES6에 대한 지식을 쌓고 오셨군요 ES6+가 다음 학습 주제인 비동기 프로그래밍의 선수지식이라고 까진 할 수 없지만 자바스크립트 코드가 쓰이는 이곳저곳에서 이미 많이 쓰이고 있는만큼 문법을 몰라 헤맬 확률이 낮아졌다고 볼 수 있겠죠? 👏👏👏👏👏 자 그럼, 바로 다음 학습 주제로 넘어가볼까요!? 이번에 다룰 주제는 자바스크립트에만 존재하는 개념은 아니지만 자바스크립트를 배울 때 제일 헷갈리는 개념이라고도 할 수 있는 비동기 프로그래밍입니다. 정확히 이해하지 않고 then, async, await을 덕지 덕지 붙여가며 일단 돌아가는 코드를 보며 만족하고 넘어갔었던 경우는 없으신가요? 저 또한 비슷한 경험이 있는데요, 결국 기능을 추가하거나 변경하게 되면서 다시 짜게 되더라고요. 자바스크립트에서뿐만 아니라 리액트에서도 코드를 짤 때 비동기 개념은 빠질 수 없는 요소이므로 혹시 해당 부분에 대한 핵심 개념이 부족하신 분들께서는 이 기회에 다시 훑고 지나가시길 추천드립니다.
서원석의 러닝패스
자바스크립트 비동기 프로그래밍
[병맛코딩만화] 비동기 프로그래밍이 뭔가요?
출처: https://youtu.be/m0icCqHY39U
자바스크립트 타이머는 지각쟁이? 그 이유는 싱글 콜 스택?
출처: https://youtu.be/iNH4UQxZexs
자바스크립트 & DOM 프로그래밍 40강 - 이벤트 객체의 target 속성 이용하기
출처: https://youtu.be/qRIU7oqWcjo
서원석님의 멤버십 전용 콘텐츠에요.
지금 가입하고 큐레이터의 꿀팁을 확인하세요!
멤버십 가입하기
이미 멤버십 회원이라면 로그인하세요.
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기