안녕하세요. J4J입니다.
이번 포스팅은 CRA 없이 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
개발환경 구축 방법
[ 1. package.json 생성 ]
$ npm init
npm init을 입력하게 되면 아래와 같은 부가정보들을 입력해줘야 합니다.
각 행마다 원하는 정보들을 입력해주면 되고 괄호로 덮여있는 부분은 아무것도 입력하지 않고 엔터를 입력할 경우 괄호에 해당하는 값으로 지정되는 것을 의미합니다.
package name: (init) react_init
version: (1.0.0)
description: react init description
entry point: (index.js) index.jsx
test command:
git repository:
keywords:
author: J4J
license: (ISC)
값을 입력하여 엔터를 누르면 다음과 같이 나오는데 다시 엔터를 눌러주시면 됩니다.
Is this OK? (yes)
[ 2. react 패키지 설치 ]
$ npm install react react-dom
[ 3. babel 설정 ]
우선 패키지를 설치해보도록 하겠습니다.
$ npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader
명령어에 -D를 붙여주는 이유는 babel은 webpack을 이용하여 파일들을 빌드할 때만 사용되기 때문에 운영단계에서는 필요하지 않고 개발단계에서만 필요하기 때문입니다.
명령어에 -D를 붙여줌으로 써 package.json에서 dependencies에 담기는 것이 아닌 devDependencies에 담기도록 해줍니다.
그리고 폴더 최상단에 .babelrc파일을 생성해주고 다음과 같이 입력해주면 됩니다.
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": []
}
[ 4. webpack 설정 ]
webpack도 패키지를 먼저 설치해보겠습니다.
$ npm install -D webpack@4.44.0 webpack-cli@3.3.12 html-webpack-plugin@4.4.0 webpack-dev-server@3.11.0
webpack도 babel과 마찬가지로 개발단계에서만 사용되기 때문에 -D를 붙여주면서 설치를 해주면 됩니다.
또한 저는 webpack을 설치할 때는 따로 버전을 지정해서 설치해주는데 그 이유는 최신 버전으로 설치하면 webpack 사용할 때 에러가 발생되고 있습니다.
이유는 정확히 모르겠지만 아직까지도 해결이 안 된 듯 보입니다.
※ 추가 → 이젠 webpack을 최신 버전으로 설치해도 정상적으로 동작이 가능합니다. 다만 최신 버전의 webpack은 webpack.config.js 파일을 작성하는 내용이 달라지니 여기를 참고해주시길 바랍니다.
그리고 폴더 최상단에 webpack.config.js파일을 생성해주고 다음과 같이 입력합니다.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 개발모드, development or production
mode: "development",
// entry를 기준으로 연관된 모든 파일들을 번들링
entry: "./src/index",
// 번들링 될 파일 확장자 등록
resolve: {
extensions: [".js", ".jsx"]
},
// 바벨과 같은 로더 등록
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: ['/node_modules/']
}
]
},
// 빌드 설정
output: {
path: path.resolve(__dirname, "deploy"), // 빌드되는 파일들이 만들어지는 위치, __dirname: 현재 디렉토리
filename: "bundle.js", // 번들파일 이름
},
// webpack 서버 설정
devServer: {
contentBase: path.join(__dirname, "deploy"), // 이 경로에 있는 파일이 변경될 때 다시 컴파일
port: 8088 // 서버 포트 지정
},
plugins: [
new HtmlWebpackPlugin({
// index.html에 output에서 만들어진 bundle.js를 적용하여, deploy에 새로운 html 파일 생성
template: `./public/index.html`
})
]
};
그리고 개발 서버를 시작할때나 또는 빌드를 할 때 webpack을 사용하기 위해 package.json에 다음과 같이 추가를 해줍니다.
{
...
"scripts": {
...
"dev": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js"
},
...
}
[ 5. 초기 파일들 생성 ]
가장 먼저 index.html을 생성해줍니다.
폴더 최상단에 public폴더를 생성해주고 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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
참고적으로 아래와 같이 html만 입력 후 ctrl+space를 눌러 자동완성을 통해 만든 뒤 <div id="root"></div>만 추가해주면 됩니다.
다음은 App.jsx파일입니다.
폴더 최상단에 src폴더를 생성해주고 src폴더 내부에 App.jsx파일을 생성해줍니다.
그리고 다음과 같이 코드를 입력해주면 됩니다.
import * as React from 'react';
const App = () => {
return (
<div>
<p>Hello, World!</p>
<p>Hello, React!</p>
</div>
)
}
export default App;
저는 함수형 컴포넌트를 사용하기 때문에 위와 같이 입력했지만 만약 클래스형 컴포넌트를 사용하실 경우는 코드가 달라지니 참고해주시면 됩니다.
다음으로 만들 파일은 index.jsx파일입니다.
방금 만들어둔 src폴더 내부에 index.jsx파일을 생성해주고 다음과 같이 입력해주면 됩니다.
import * as React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.querySelector('#root'));
서버 실행
위와 같이 모든 설정을 맞췄다면 다음과 같은 명령어를 이용하여 webpack서버를 실행시킬 수 있습니다.
$ npm run dev
그리고 조금 기다리면 다음과 같은 웹페이지 화면이 나오는 것을 확인할 수 있습니다.
파일 빌드
프로그래밍 된 파일들을 빌드하는 방법은 위와 같이 설정했다면 다음과 같습니다.
$npm run build
입력하고 조금만 기다리면 폴더 최상단에 deploy라는 폴더가 생기는 것을 확인할 수 있고 그 내부에는 bundle.js와 index.html 파일이 있는 것을 확인할 수 있습니다.
간단히 부연설명을 하자면 여기서 index.html은 SPA에 존재하는 단 하나의 페이지이고 bundle.js는 프로그래밍 된 jsx 등의 파일들이 webpack에 의해 번들링이 되어 하나의 번들 파일로 묶여 있는 것을 의미합니다.
서버가 실행되면 index.html이 실행되고 index.html내부에는 bundle.js를 불러오는 스크립트태그가 있기 때문에 프로그래밍한 결과물이 화면에 보이게 되는 것입니다.
파일 구성
이상으로 CRA없이 개발환경 구축하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > React' 카테고리의 다른 글
| [React] regeneratorRuntime is not defined 에러 (0) | 2021.07.17 |
|---|---|
| [React] Webpack Proxy설정을 이용하여 CORS 해결 (1) | 2021.07.17 |
| [React] 함수형 컴포넌트에서 Redux 사용하기 (0) | 2021.07.17 |
| [React] Flux와 상태관리, 그리고 Redux (0) | 2021.07.14 |
| [React] Router를 이용한 페이지 이동 (2) | 2021.07.13 |
댓글