안녕하세요. J4J입니다.
이번 포스팅은 CRA 사용하지 않고 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
개발환경 세팅 방법
[ 1. 작업할 폴더 생성 및 이동 ]
보통 React를 이용해 개발할 때는 대부분의 사용자들이 VSCode를 IDE로 선택합니다.
VSCode를 사용하시는 분들은 터미널을 이용하여 다음과 같이 간단하게 폴더 생성 및 이동을 해주시면 됩니다.
$ mkdir { 폴더 명 } // ex) mkdir init
$ cd { 폴더 명 } // ex) cd init
[ 2. package.json 생성 ]
$ npm init
명령어를 입력할 경우 다음과 같이 추가 정보를 입력해야 되는데 필요한 부분만 입력해주시면 되고 또한 괄호가 있는 곳은 입력을 하지 않을 경우 괄호 안의 내용들이 default값으로 설정됩니다.
package name: (init)
version: (1.0.0)
description: input description
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
입력이 완료되면 다음과 같이 문구가 하나 나오는데 엔터를 눌러주시면 됩니다.
Is this OK? (yes)
[ 3. React 패키지 설치 ]
React를 이용해 개발할 수 있도록 도와주는 패키지들을 다음과 같이 설치해주시면 됩니다.
$ npm install react react-dom
[ 4. babel 패키지 설치 및 설정 ]
트랜스 파일러의 역할을 해주는 babel의 패키지들을 다음과 같이 설치해주시면 됩니다.
$ npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader
또한 추가적인 설정 파일을 생성해줘야 합니다.
폴더 최상단에 .babelrc 파일을 생성해주고 다음과 같이 입력해주시면 됩니다.
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": []
}
[ 5. webpack 패키지 설치 및 설정 ]
모듈 번들러의 역할을 해주는 webpack의 패키지들을 다음과 같이 설치해주시면 됩니다.
$ npm install -D webpack webpack-cli html-webpack-plugin webpack-dev-server
또한 webpack도 babel과 마찬가지로 추가 설정 파일을 생성해줘야 합니다.
폴더 최상단에 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?$/,
use: "babel-loader",
exclude: ['/node_modules/']
}
]
},
// 빌드 설정
output: {
path: path.resolve(__dirname, "build"), // 빌드되는 파일들이 만들어지는 위치, __dirname: 현재 디렉토리
filename: "bundle.js", // 번들파일 이름
},
// webpack 서버 설정
devServer: {
static: path.join(__dirname, "build"), // 이 경로에 있는 파일이 변경될 때 다시 컴파일
port: 8088 // 서버 포트 지정
},
plugins: [
new HtmlWebpackPlugin({
// index.html에 output에서 만들어진 bundle.js를 적용하여, build에 새로운 html 파일 생성
template: `./public/index.html`
})
]
};
[ 6. package.json 수정 ]
위에서 설정한 webpack을 이용하여 작성된 코드들을 실행시킬 수 있도록 다음과 같이 package.json의 scripts부분을 수정해주셔야 합니다.
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js"
},
}
[ 7. 초기 파일 구성 ]
초기 파일들은 index.html, App.jsx, index.jsx로 총 3개의 파일을 생성해줘야 합니다.
- index.html
폴더 최상단에 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>
- App.jsx
폴더 최상단에 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
App.jsx와 동일한 위치에 index.jsx를 생성해줍니다.
그리고 내용은 다음과 같이 작성해주시면 됩니다.
import * as React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.querySelector('#root'));
서버 실행
위의 모든 설정이 완료되었다면 다음 명령어를 이용하여 작성된 코드들을 확인해줄 수 있습니다.
$ npm run dev
설정대로 따라했다면 다음과 같이 화면이 나와야 정상입니다.
빌드
작성된 파일들을 배포하기 위해 빌드할 때는 다음 명령어를 이용해주시면 됩니다.
$ npm run build
그러면 폴더 최상단에 build라는 폴더가 새롭게 하나 생성되고 그 내부에 다음과 같이 2개의 파일이 생성되는 것을 확인할 수 있습니다.
파일 구성
이상으로 CRA 사용하지 않고 개발환경 구축하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > React' 카테고리의 다른 글
| [React] StyledComponents와 Emotion을 비교해보기 (1) - styled (0) | 2022.02.21 |
|---|---|
| [React] CRA 사용하지 않고 타입 스크립트 개발환경 세팅하기 (0) | 2022.02.16 |
| [React] Polyfill을 이용하여 IE에서도 동작되게 하기 (0) | 2022.01.04 |
| [React] Vendor Prefix (공급업체 접두사) 설정 (0) | 2022.01.02 |
| [React] Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내기 (0) | 2021.12.28 |
댓글