티스토리 뷰
우리가 사용하는 코드는 리액트 코드이기 때문에, 자바스크립트로 바꿔주는 툴이 필요하다. 이런 툴을 '트랜스파일러' 또는 '트랜스포머'라고 부르기도 한다. 이번에 소개할 툴은 '웹팩'이다. 웹팩은 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경해주는 역할을 한다.
자바스크립트는 버전이 여러 개 존재하며, 최신 버전의 자바스크립트를 웹팩을 이용해서 자바스크립트를 브라우저가 이해할 수 있게 변경해줘야 한다.
webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
js, hbs, cjs, sass, 등의 언어들이 웹팩을 통해서 js, css로 변경이 되는 것을 볼 수 있다. 즉, 리액트로 작업하려면 웹팩과 같은 트랜스파일러가 필요하다. 하지만 시간이 없기 때문에 페이스북에서 초보자들을 위해 제공되고 있는 'create react app'을 사용하도록 하자.
https://github.com/facebook/create-react-app
facebook/create-react-app
Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.
github.com
웹팩과 같은 툴을 사용할 필요가 없이 손쉽게 리액트 앱을 만들어주는 툴이다. 해당 명령어로 인스톨을 하면 끝이다. 손쉽게 인스톨하고, 바로 코딩을 시작해보자.
'프로그래밍 > Front end' 카테고리의 다른 글
| [Front end] React #3 웹 서비스 만들기 JSX (0) | 2019.07.21 |
|---|---|
| [Front end] React #2 Node, Yarn 및 CRA 설치 (0) | 2019.07.19 |
| [Front end] React에 왜 열광하는가? (0) | 2019.07.16 |
| [Front end] jQuery 16방위각 32방위각 표시 (0) | 2019.07.12 |
| [Front end] jQuery 이미지 회전 Rotate (0) | 2019.07.12 |
- Collection
- 정렬 알고리즘
- Maven
- SQL
- 리액트
- 오라클
- Tomcat
- 프로그래머스
- 자바스크립트
- 개발환경
- 이직
- 회고
- 성능분석
- 제주도 3박4일 일정
- 리눅스 명령어
- sort algorithm
- javascript
- Linux 명령어
- React
- 자바
- 프로그래머
- 경력관리
- spring
- 제주도 여행
- Java
- 소프트웨어공학
- Eclipse
- effective java
- 오라클 내장 함수
- 리액트 16
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
