Frontend/webpack & babel

webpack으로 React 프로젝트 빌드해보기 =)

Why? CRA는 노맛.. 무엇보다 실무에서 사용하고 있는데 어떻게 번들링 도구들이 동작하고 어떠한 plugin들이 실제로 상호작용을 통해 dev, prod를 이루는지 알 수 없다..! 일하면서 그냥 react 개발자로 제한되는 기분이였어요 .. =( 그리고 사실 너무 무거움 그래서 경험삼아 + 앞으로도 사용하기 위해 간단하게나마 직접 webpack을 사용해서 프로젝트를 빌드해보도록 하겠다! step1. npm init & 의존성 설치 프로젝트를 생성한 후 프로젝트를 초기화하고 필요한 의존성을 설치하자 플러그인도 설치가 필요하지만 우선 구동에 필요한 필수적인 요소들만 설치해보자~ npm init (프로젝트 초기화 -> package.json 생성) npm init -y React - React (reac..

Babel

Babel ? Babel은 javascript 코드를 최신 문법으로 변환해주는 도구이다..! 오래된 브라우저 및 환경에서 최신 javascript 문법을 지원하지 않을 때 사용된다. 따라서 개발자들이 최신 문법을 사용해서 Babel을 사용해서 오래된 버전의 문법을 사용하는 코드로 배포할 수 있다..! Babel에는 주로 두가지 기능이 있다 Transpiling(문법 변환): Babel은 최신 자바스크립트 문법(ECMAScript 2015+ 또는 ES6+)을 오래된 문법으로 변환한다. 이를 통해 최신 문법을 사용하여 코드를 작성할 수 있다. React 코드를 작성할 때 최신 문법을 사용할 수 있게 한다! React의 JSX 코드를 Javascript로 변환!! JSX 코드를 React.createEleme..

Loader / Plugin

Loader webpack은 기본적으로 javascript와 JSON 파일만 이해할 수 있기 때문에 webpack이 css, jpg등 다른 형식의 파일을 이해할 수 있도록 처리한다. Loader는 test, use두가지 속성을 가지고있다. 아래에서 첫번째 rule을 살펴보면 sass, scss, css 파일을 sass-loader, css-loader를 사용하여 처리한다는 의미이다! import, require 문에서 sass, scss, css 파일이 발견되면 번들에 추가하기 전에 sass-loader, css-loader로 변환을 먼저해버려! sass-loader로 처리된 리소스가 css-loader로 전달됨! -> 역순으로 처리 module.exports = { entry: './src/index...

Entry(index.js) / Output

Entry webpack이 dependency 그래프를 생성하는 최초 진입점이며 파일 경로이다. 웹팩의 번들링이 시작되는 시작점 default 경로로는 ./src/index.js로 설정이 되어있다. // webpack.config.js // 웹팩을 실행하면 index.js부터 빌드를 수행한다! module.exports = { entry: './src/index.js' } entry에 들어가는 파일에는 웹 애플리케이션의 시작점과 구조 및 내용이 담긴다. 예를들어 react의 index.js파일을 살펴보면 app.js부터 렌더링을 한다는 것을 알 수 있다! //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './in..