React를 배우기 전에 갖춰야 할 자바스크립트 기본기

작성자: Ken Huh

바닐라코딩에서는 현재 프론트엔드 프레임워크 관련 교육은 모두 React로 진행하고 있습니다. Vue나 Angular에 대한 교육도 기본 실력이 밑받침되는 분들께는 추가적으로 진행하기도 하지만, 기본적으로는 React로 진행하고 있습니다. 초보자분들에게는 한 가지만으로도 충분하고, 한 가지에 집중하는 편이 낫다고 생각합니다.

React, Node, Vue, Angular 등의 프레임워크를 공부하더라도 기본적으로 모든 밑바탕은 바닐라 자바스크립트입니다. 바닐라 자바스크립트 자체만으로 작업하는 것이 익숙하지 않은 사람은 전반적인 이해도가 떨어질 수 밖에 없고 그러다보면 프레임워크를 공부하는 시간 자체가 낭비일 수 있습니다.

그래서 오늘은 React(혹은 다른 프레임워크)를 공부하기 전에 알고 있어야할 기본적인 요소들에 대해 간략하게 정리해보고자 합니다.

1. Javascript Class

Javascript Class

자바스크립트에 클래스가 추가된 이후, 많은 개발자들이 자바스크립트의 클래스를 이용하고 있습니다. 프레임워크를 이용한 작업들도 마찬가지이고, 이제는 어디서나 매우 흔히 볼 수 있습니다. 하지만 많은 분들이 아시다시피, 자바스크립트의 클래스는 Prototype(Prototypal Inheritance or Behavior Delegation)을 기반으로 동작합니다. 자바스크립트의 클래스에 대해 잘 모르더라도 예제나 튜토리얼을 보고 진행하는데 있어서는 지장이 없을 수 있겠지만, 그것은 진정 이해하고 사용하는 것이 아닐 것입니다. 진정 이해하지 못하고 사용한다는 것은 그만큼 사용 범위가 제한적이고 활용을 제대로 못하게 되는 결과로 이어질 수 있을 것입니다.

늘 제가 강조하는 이야기이지만, 본인이 쓴 코드 한줄 한줄 혹은 한 단어 한 단어 그 의미와 동작에 대해 꼼꼼하게 집고 넘어가야 할 것입니다.

2. Javascript Expression

Javascript Expression

Javascript Expression이란 무엇인가에 대한 이해도 반드시 필요합니다. 예를 들어, React의 JSX에는 Javascript Expression을 융합하여 사용할 수 있습니다. 교육을 진행하다보면 대다수의 분들이 문제없이 코드를 작성하고 일정 수준의 결과물을 만들어내기는 하지만, Javascript Expression이란 무엇인가에 대한 대답을 명확하게 할 수 있는 분들이 생각보다 많이 없습니다. 자바스크립트에서 Expression이란 무엇인가, 혹은 Statement란 무엇인가에 대한 정의는 매우 기초 중에 기초입니다. 반드시 명확하게 이해하고 넘어가야만 합니다.

3. ES2015

Javascript ES2015

위에서 언급한 Class도 마찬가지이지만, 더 이상 ES2015는 새로운 개념이 아닙니다. 이제는 필수적으로 알아야만 합니다. 몇 가지 자주 사용되는 ES2015의 기능들을 언급해보자면 Arrow Function, Destructuring Assignment, Rest Parameter, Spread Syntax, Default Parameters, Import/Export Statement 등이 있습니다. 예를 들어 Arrow Function을 공부하려 한다면, thisarguments 키워드에 대해서도 속속들이 알고 있어야만 하기 때문에 생각처럼 간단하게 공부하고 지나갈 수 있는 주제들이 아닙니다.

4. Higher Order Functions

Higher Order Function

Higher Order Function은 요즘 매우 흔하게 볼 수 있습니다. Higher Order Function도 반드시 필수적으로 공부해야 하는 개념이라고 할 수 있습니다. Higher Order Function을 이해해야 Higher Order Component를 이해할 수 있고, Higher Order Function을 잘 만들고 잘 사용해야 코드의 퀄리티가 높아질 수 있습니다. Higher Order Function을 공부하려면 또 자바스크립트에서 Function이 왜 First Class Object인지 그리고 First Class Object라는 말은 도대체 무슨 뜻인지도 반드시 이해하고 넘어가야만 합니다. 그리고 또한 당연한 이야기지만, 이해한 것에 그치지 않고 잘 활용할 수 있어야만 합니다.

5. 그 외

위에 언급한 내용들 이외에도 중요한 기초 지식들은 매우 많습니다. 프론트엔드에서 많은 자료를 다루고 처리하기 위해서는 자료 구조도 학습해야만 하고, 효율적인 Logic을 구현하기 위해서는 알고리즘도 학습해야만 합니다. 완벽한 준비는 없습니다. 하지만 충분한 준비 없이 시도해서도 안됩니다.


글을 마치며

다음 코드의 결과값이 true라고 생각한다면 당신은 조금 더 준비를 해야할지도 모르겠습니다.

true && '바닐라코딩';

밤이 늦었군요. 새 나라의 어른이답게 꿈나라로.. (글을 마무리하는 방법에 대해 아직 고민중인 블로그 꿈나무입니다.)