[React] 다양한 개념 정리

1. Babel이란?

- 자바스크립트의 문법을 확장해주는 도구

- 자바스크립트 컴파일러

- 코드 변환기

- 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다.

아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 합니다.

입력은 자바스크립트 코드고 출력도 자바스크립트 코드입니다만, 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다고 생각 하면 될 것 같습니다.

 

바벨은 왼쪽 코드를 오른쪽처럼 자바스크립트 문법으로 변경시켜준다.

 

2. Webpack이란?

- 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다.

- 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할

- 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통해 하나의 파일로 짠!하고 만들어 준다

번들링: 여러가지 파일을 모아서 하나로 만드는 것

 

3. 로더란?

웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만아니라 스타일시트, 이미지, 폰트까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올수 있다.

이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만아니라 CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 해준다.

 

4. yarn?

 yarn은 npm과 같이 자바스크립트 패키지 매니저다

 

5. React?

리액트는 컴포넌트 단위로 개발해 재사용할 수 있게 하면서 자바스크립트의 장점을 잘 살린 프론트엔드 개발 라이브러리다

 

[참고링크]

react.vlpt.us/basic/04-jsx.html

4. JSX · GitBook

medium.com/wasd/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766

Webpack과 Babel을 이용한 React 개발 환경 구성하기

 

jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html

프론트엔드 개발환경의 이해: 웹팩(기본)

 

perfectacle.github.io/2016/11/18/Module-bundling-with-Webpck/

(Webpack) 모듈? 번들링?

 

 

babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&spec=false&loose=false&code_lz=BQKABGA8AmCWBuA-cEp3gemRSH3bAEog&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.12.3&externalPlugins=

Babel · The compiler for next generation JavaScript

 

woolbro.tistory.com/61

[React-Native] React-Native 입문기 - ES6(1) Babel과 String literal

devlog.jwgo.kr/2018/12/03/webpack-babel-react/

웹팩과 바벨 무엇이 다른가. 리액트에서는 뭘 써야 할까? · Tonic