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

멤버십

시리즈

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

•

리액트는 대부분 자바스크립트 코드로 작성됩니다. 자바스크립트 핵심지식을 빠르게 훑어봅니다.

•

ES6 필수 문법만을 빠르게 훑어봅니다.

•

자바스크립트로 비동기 프로그래밍을 하기 위해 필요한 문법 같은 지엽적인 부분부터 연관된 관련 지식, 개념들을 통틀어 빠르게 배워봅니다.

•

자바스크립트의 문법도 중요하지만 기반 지식을 아는 것도 매우 중요합니다. 코드를 작성하기 전에 알아야하는 자바스크립트 근본 지식을 배워봅니다.

이 분들은 꼭 보세요.

리액트를 배우려는 사람(JS 기초가 부족한 사람)

미리 알고 있어야 해요.

HTML, CSS, JS 기초

대상: 리액트를 배우려는 대상(HTML, CSS, JS에 대한 기본 지식이 있는 사람) but JS에 대한 지식을 다시 한 번 살펴보며 되뇌어야하는 사람

혹시 리액트를 하루라도 빨리 공부하기 위해 자바스크립트 공부는 거의 하지 않거나 소홀히 하고 계시나요? 혹은 자바스크립트 공부를 하긴 했지만 리액트를 다루는 데 있어서 어려움을 겪고 계시나요? 저의 경우엔 취업을 준비하던 시기, 취업 후 리액트로 업무를 시작하던 시기에 자바스크립트 공부보다는 리액트 공부가 급하게 느껴졌고 그렇다 보니 자바스크립트 공부엔 소홀했었습니다. 그 결과, 어느 시점부터는 코드를 이해하는데 필요한 시간이 점점 늘어나더라고요. 경력 만 1년이 다 되어가는 지금, 해당 러닝패스를 제작하며 자바스크립트 문법을 둘러보니 제가 막히고 어려워했던 리액트의 상당 부분이 결국은 자바스크립트의 이해에서 시작한다는 것을 새삼 알게 되었습니다. 여러분들은 리액트를 본격적으로 공부하기에 앞서 확실하게 자바스크립트 기초 영역을 정복하여 더욱 빠르게 리액트를 이해하실 수 있기를 바랍니다.

*React를 다루기 위해 꼭 알아야하는 JS 문법들과 개념을 다룹니다.

큐레이터의 러닝패스 소개

ES6는 ECMA에서 2015년에 채택한 자바스크립트 표준이며 ES6 이후로 자바스크립트에는 spread operator, template string literal, destructuring, named parameters 등 많은 변화가 있었습니다. 특히 ES6 문법은 React에서도 자주 쓰이는데요, 이에 무지하거나 익숙해지지 않는다면 깔끔한 React 코드를 작성하거나 다른 사람의 React 코드를 분석할 때 어려움을 겪을 것입니다. React에서 자주 쓰이는 ES6 문법들을 유튜브에 잘 설명된 영상들로 엮어 살펴보겠습니다.

서원석의 러닝패스

자바스크립트 ES6

큐레이터의 러닝패스 소개

여기를 읽고 계신거면... 자바스크립트 ES6에 대한 지식을 쌓고 오셨군요 ES6+가 다음 학습 주제인 비동기 프로그래밍의 선수지식이라고 까진 할 수 없지만 자바스크립트 코드가 쓰이는 이곳저곳에서 이미 많이 쓰이고 있는만큼 문법을 몰라 헤맬 확률이 낮아졌다고 볼 수 있겠죠? 👏👏👏👏👏 자 그럼, 바로 다음 학습 주제로 넘어가볼까요!? 이번에 다룰 주제는 자바스크립트에만 존재하는 개념은 아니지만 자바스크립트를 배울 때 제일 헷갈리는 개념이라고도 할 수 있는 비동기 프로그래밍입니다. 정확히 이해하지 않고 then, async, await을 덕지 덕지 붙여가며 일단 돌아가는 코드를 보며 만족하고 넘어갔었던 경우는 없으신가요? 저 또한 비슷한 경험이 있는데요, 결국 기능을 추가하거나 변경하게 되면서 다시 짜게 되더라고요. 자바스크립트에서뿐만 아니라 리액트에서도 코드를 짤 때 비동기 개념은 빠질 수 없는 요소이므로 혹시 해당 부분에 대한 핵심 개념이 부족하신 분들께서는 이 기회에 다시 훑고 지나가시길 추천드립니다.

서원석의 러닝패스