✅CRA(Create React App)
React 프로젝트를 시작할 때 필요한 개발 환경을 세팅해주는 도구로 React에서 제공해주고 있다.
모듈 번들러나 Babel 등 설정을 따로 하지 않고 아주 간편하게 이용할 수 있지만
추가적인 설정을 해야할 때는 CRA가 오히려 번거로울 수 있다.
💻세팅하기
1. 리액트 프로젝트를 위한 폴더 생성하기
이건 쉬우니까 패스!
2. 본격적으로 프로젝트 설정하기
1) 프로젝트 초기화하기
npm init // 혹은 npm init -y
위의 명령어로 package.json이 생성된다.
package.json : 설치한 라이브러리 목록을 보여주는 파일
2) 기본적인 dependency 설치하기
npm i react react-dom react-router-dom
- react : 리액트 자바스크립트 라이브러리
- react-dom : DOM element를 관리하기 위한 패키지
- react-router-dom : 리액트 라우터의 DOM 바인딩을 포함하는 라이브러리
위의 명령어로 node_modules 디렉토리가 생성되고 package.json에도 dependency가 추가된다.
DOM : Document Object Model, 웹 페이지를 이루는 요소(태그 등)를 JS가 이용할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델. 즉, DOM은 HTML, XML 등의 문서와 JS를 이어준다. 특히 리액트는 virtual DOM을 이용함.
바인딩 : 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위
node_modules : 라이브러리들을 모아높은 폴더
3) (선택사항) 타입스크립트 설정하기
npm i -D typescript @types/react @types/react-dom
tsc --init // ts가 전역으로 설치된 경우
node_moduels/.bin/tsc --init // ts가 해당 프로젝트에만 설치되어 있는 경우위의 명령어로 tsconfig.json 파일이 생성된다. 필요없는 부분은 제거하고 사용하면 된다.
tsconfig.json : 해당 프로젝트를 컴파일 하기 위해 필요한 루트 파일들과 각종 컴파일러 옵션들을 설정한다. (JS의 jsconfig.json과 유사)
4) Webpack 설정
Webpack은 프로젝트 내의 모든 자바스크립트 파일들을 번들링하고 브라우저에서 돌아가도록 필요한 자원들을 준비해준다.
npm i -D webpack-cli webpack-dev-server html-webpack-plugin
npm i -D ts-loader // ts를 사용하는 경우에만- webpack : 번들러
- webpack-cli : 웹팩 cli(command line interface) 텍스트 터미널을 통해 사용자와 컴퓨터가 상호작용하는 방식
- webpack-dev-server : 개발 도중 변경사항을 확인할 수 있다.
- html-webpack-plugin : 생성된 html 파일에 필요한 플러그인
- ts-loader : 타입스크립트 코드를 자바스크립트 코드로 변환해주는 역할
5) Babel 설정
Babel은 자바스크립트 컴파일러이다. 현재 모든 브라우저가 ES6를 지원하지 않기 때문에 ES6를 지원하지 않기 때문에 ES6를 ES5로 변환시킬 필요가 있는데, Babel이 바로 그 역할을 해준다.
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i -D @babel/preset-typescript- @babel/preset-env : ECMAScript2015+를 변환할 때 사용
- @babel/preset-react : JSX로 작성된 코드들을 createElement 함수를 이용한 코드로 변환해주는 바벨 플러그인
- @babel/preset-typescript : 타입스크립트를 변환하기 위한 프리셋
6) Webpack.config.js 설정
/* webpack.config.js */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const prod = process.env.NODE_ENV === 'production';
module.exports = {
mode: prod ? 'production' : 'development',
devtool: prod ? 'hidden-source-map' : 'eval',
entry: './src/index.tsx',
devServer: {
port: 3000,
inline: true,
hot: true,
historyApiFallback: true,
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /(node_modules)/,
use: {
loader: ['babel-loader', 'ts-loader'],
options: {
presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
}
}
},
],
},
output: {
publicPath: "/",
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
},
plugins: [
new webpack.ProvidePlugin({
React: 'react',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new webpack.HotModuleReplacementPlugin(),
],
};7) 명령어 설정
npm start, yarn start 처럼 react 서버를 실행시킬 때 사용하는 명령어를 커스텀해야한다.
/* package.json */
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve --mode development --open --hot",
"build": "webpack --mode production",
"prestart": "npm build",
"start": "webpack --mode development"
},위와 같이 항목을 추가시키면 된다. 프로젝트를 시작할 때는 아래의 명령어를 입력하면 된다.
npm run dev
8) 프로젝트 구성요소 만들기
src 폴더, plublic 폴더를 만들자.
- src 폴더 : 소스코드들을 보관하는 폴더
- public 폴더 : static 파일들을 보관한 폴더
/* App.tsx */
import React from 'react';
const App = () => <>Test</>;
export default App;/* index.html */
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>/* index.tsx */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);