[Front end] React #1 소개

우리가 사용하는 코드는 리액트 코드이기 때문에, 자바스크립트로 바꿔주는 툴이 필요하다. 이런 툴을 '트랜스파일러' 또는 '트랜스포머'라고 부르기도 한다. 이번에 소개할 툴은 '웹팩'이다. 웹팩은 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경해주는 역할을 한다.

자바스크립트는 버전이 여러 개 존재하며, 최신 버전의 자바스크립트를 웹팩을 이용해서 자바스크립트를 브라우저가 이해할 수 있게 변경해줘야 한다.

https://webpack.js.org/

webpack

js, hbs, cjs, sass, 등의 언어들이 웹팩을 통해서 js, css로 변경이 되는 것을 볼 수 있다. 즉, 리액트로 작업하려면 웹팩과 같은 트랜스파일러가 필요하다. 하지만 시간이 없기 때문에 페이스북에서 초보자들을 위해 제공되고 있는 'create react app'을 사용하도록 하자.

https://github.com/facebook/create-react-app

facebook/create-react-app

웹팩과 같은 툴을 사용할 필요가 없이 손쉽게 리액트 앱을 만들어주는 툴이다. 해당 명령어로 인스톨을 하면 끝이다. 손쉽게 인스톨하고, 바로 코딩을 시작해보자.