2. react + webpack + babel로 개발 환경 구축하기 (javascript)

jinsunee·2021년 3월 5일
Reactbabelwebpack
0

react, webpack, babel로 개발 환경 구축 & 배포하기

목록 보기
2/3

프로젝트 생성

mkdir react-example && cd react-example && yarn init -y

1. react, react-dom 설치

$ yarn add react, react-dom
  • react: React 라이브러리를 불러옵니다.
  • react-dom: DOM rendering을 위한 ReactDOM을 담고 있습니다.

2. webpack 관련 설치

$ yarn add -D webpack webpack-dev-server webpack-cli
  • webpack: webpack 의 core 패키지로, 주요 스크립트가 포함되어있습니다.
  • webpack-dev-server: hot-loader 같이 코드가 바뀌는 것을 감지해서 서버를 재시작시켜줍니다. (개발 생산성✔️👏)
  • webpack-cli: command line에서 webpack을 실행시킬 수 있도록 해줍니다.

3. 실행해보기 위해서 파일 추가해보기

  • ./public/index.html
<!DOCTYPE  html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>React-Example</title>
	</head>
	<body>
		<div id="root">Hello world:)</div>
		<script  src="../src/index.js"></script>
	</body>
</html>
  • ./src/index.js
const innerTextOfRoot = document.getElementById('root').innerText;
alert(innerTextOfRoot);

이제 webpack으로 실행시켜봅시다.

시작 전에 package.json에 scripts태그를 아래처럼 추가해줍니다.

{
	...
	"scripts" : { 
		"start": "npx webpack serve --mode development --port 3000",
	},
	...
}

그리고 아래처럼 root에서 명령 실행!

$ yarn start

image

콘솔에 찍힌 것처럼 http://localhost:3000/로 들어가보면 아래처럼 프로젝트의 root가 나오는 것을 볼 수 있습니다.
image

우선은 webpack을 설치해서 server를 실행해보는 것까지 완료!

ReactDOM을 이용해서 페이지를 띄어볼까?

물론 html 파일에서 react, react-dom을 불러와서 스크립트를 모듈화하여 작성해나가는 방법도 있겠지만, create-react-app 에서 하는 방식처럼 해볼 예정입니다.

파일 추가

./public/index.html 수정

body 태그 안에 id값이 root인 div 엘리먼트만 남겨두고 다 지울 거에요.
이유는 웹팩에서 javascript 파일로 시작할 것이기 때문에 script 태그는 필요없기 때문! 
<!DOCTYPE  html>
<html lang="en">
	...
	<body>
		<div id="root"></div>
	</body>
</html>

./src/index.js

import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

./src/App.js

class를 통해서 컴포넌트를 만들어줍니다.
(물론 React 공식문서에는 class를 지양하라고 나오지만 여기에서는 우선 ES6+문법을 사용해서 예제를 진행해보겠습니다.)
import React from 'react';

class App extends React.Component {
	render() {
		return <div>Hello world :) </div>
	}
}

export default App;

webpack.config.js 설정 📌

webpack에서 서버를 시작할 때 index.js에서 시작하고 싶기 때문에 이에 관련하여 간단한 설정을 해볼 것입니다.

./webpack.config.js

웹팩 설정파일은 commonJS로 작성하는데, 기본적으로 객체를 넘겨주는 형태입니다.

그 안에 webpack에서 필요한 key 값을 아래처럼 정해놨습니다.
더 자세하게 알고 싶다면 Webpack 공식 홈페이지 참고

  • entry: 시작점 지정 (웹팩이 내부적으로 dependency 그래프를 만들 때의 시작점 파일)
  • output: 빌드되어 나오는 결과물이 return되는 곳
  • module: javascript 이외의 자원들을 javascript에 가져다 쓸 수 있도록 loader를 load 해주는 곳
  • plugins

지금은 우선적으로 index.js 로 Webpack 서버를 시작하고 싶다는 목표가 있으므로 아래처럼 간단하게 설정 해볼 것입니다.

./webpack.config.js

module.exports = {
	entry: {
		app: './src/index.js'
	}
}

그리고 실행했는데 아래처럼 에러가 나오네요...

ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import ReactDOM from 'react-dom';
| 
> ReactDOM.render(<App />, document.getElementById('root'));
|

우선, commonJS만을 읽을 수 있는 웹팩으로서는 아래처럼 생각할 수 있을 것입니다.

  • import, export 키워드가 뭐지?.. (예전의 webpack은 그랬겠지만 이 부분은 Webpack 4부터 인식가능하다고 함)
  • 이건 또 .... 뭐야?.. javascript에 <>이런게 있었나?

-> 어떻게 해결하지? : 그래서 존재하는게 babel 📌

Babel 설정

우선 패키지부터 설치해야합니다.

$ yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader
  • @babel/core: 핵심 dependency로, 주요 스크립트가 포함되어있습니다.
  • @babel/preset-env: babel 플러그인 설정들이 모아져있다. 즉, 모든 es6+문법을 es5로 컴파일링할 수 있도록 도와주는 dependency입니다.
  • @babel/preset-react: 리엑트의 jsx를 javascript code로 바꿔줍니다.
  • babel-loader: babel과 webpack을 같이 사용할 수 있게 해줍니다.

그리고 babel 이랑 의사소통할 수 있는 파일인 .babelrc 을 root에 만들어줍니다.

{
	"presets": [
		"@babel/preset-env",
		"@babel/preset-react"
	]
}

이해가 안된다면 아래처럼 생각해보면 되요!

"@babel/preset-env" 안에 모든 babel 플러그인 설정들이 있으니 다 사용하게 해줘! 그리고 "@babel/preset-react" 도 추가해뒀는데 react에서 사용하는 jsx 코드도 인식하게 해줘!

이제 webpack이 babel을 인식할 수 있도록 loader에 babel-loader를 추가해줘야합니다.

./webpack.config.js

module.exports = {
	entry: {
		app: './src/index.js'
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: 'babel-loader'
			}
		]
	},
	resolve: {
		extensions: ['.js', '.jsx']
	},
}
  • test: 어떤 값을 인식해야하는지 포맷을 알려주는 곳
  • exclude: /node_modules 은 제외하고 loading 해줘! 말해주는 곳
  • use: 어떤 패키지를 사용해서 로드하는지 알려주는 곳.

이렇게 하고 yarn start하면 원하는대로 나오지 않는다. 그 이유는 바로 html 파일을 로딩할 수 있게 해주는 플러그인을 설치하지 않았기때문!

html-webpack-plugin 설치

yarn add -D html-webpack-plugin
  • webpack.config.js 수정
const  path = require('path');
const  HtmlWebpackPlugin = require('html-webpack-plugin'); 
const  srcDir = path.resolve(__dirname, './src');
const  publicDir = path.resolve(__dirname, './public');

module.exports = {
	...,
	plugins: [
		new  HtmlWebpackPlugin({
			template:  publicDir + '/index.html',
			filename:  './index.html'
		}),
	]
};

그리고 실행해보기

$ yarn start

드디어 원하는 모습대로 나왔다~~!
image

마치며,,

👏👏👏👏👏 여기까지 개발서버 구축하는 것 완료했습니다.
다음 포스트는 typescript, 상대경로 설정하는 부분을 다루겠습니다.
전체 코드는 react-boilerplate-webpack-babel 에서 볼 수 있습니다.

profile
jinsunee
Stay hungry. Stay foolish.
이전 포스트

1. webpack, babel에 대하여

다음 포스트

3. typescript, 상대경로 설정하기

2개의 댓글

comment-user-thumbnail
Kim jayden
2021년 7월 13일

많이 도움됐어요 감사합니다

답글 달기
comment-user-thumbnail
블루라군
2022년 3월 19일

저 혹시 개발환경이 어떻게 되시나요? 해당 git의 clone을 해봤지만, 코드가 돌아가지 않아서 문의를 드려요.
현재 저는 Window 10 , WebStorm을 이용하고 있습니다.

그대로 코드를 복붙으로 해봤지만,
./src/index.js
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render( '' , document.getElementById('root'));
App 여기서
Module parse failed: Unexpected token (8:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

이런 에러가 나옵니다.

아마도 바벨쪽의 문제일 가능성이 높은가요? 하루종일 구글링도 해봤지만 뭔가 원하는결과는 안나옵니다. ㅠㅠ

답글 달기