천천히 알아보는 코딩공부

React Babel 바벨 프로젝트 생성 본문

React/기초

React Babel 바벨 프로젝트 생성

고기고기물고기 2022. 7. 4. 17:40

프로젝트 생성

 

프로젝트 생성 하는 위치에 들어가서 해당 명령어 실행

 

yarn init -y
혹은
npm init -y

- 기본 값 세팅

 

yarn init
혹은
npm init

- 프로젝트 생성하면서 세팅

 

 

※ yarn = npm

 

 

1. react, react-dom 설치

yarn add react
yarn add react-dom
 

[error] npm/yarn 오류 - error An unexpected error occurred

npm/yarn 오류 내용 파트너사 분들 업무 세팅을 도와드리다가, npm, yarn 세팅하면서 아래와 같은 오류 메시지가 발생했다. ssl 이슈인듯하다. 오류 메시지 해결방법 npm yarn 참고자료 https://rios.tistory.co

velog.io

 

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
npm add start

 

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

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

 

 

출처 : https://velog.io/@jinsunee/2.-react-webpack-babel%EB%A1%9C-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

저작자표시

'React > 기초' 카테고리의 다른 글

[React] Webpack 이미지 불러오기  (0) 2022.07.06
[React] Webpack CSS 설정 추가하기  (0) 2022.07.05
react-bootstrap 설치 방법  (0) 2022.07.05
[React] Component  (0) 2022.07.05
vscode 로 React 환경구성하기  (0) 2022.07.01
'React/기초' Related Articles more
Comments