Create-React-App 없이 React 환경설정

C

참고한 사이트 : https://medium.com/javascript-in-plain-english/a-guide-to-creating-a-react-app-without-create-react-app-5337c5ac2ea0

Node

노드 공식 사이트에서 다운받고 설치하면 된다.

NPM

npm이 있어야 webpack, react, babel 등의 외부 라이브러리들을 쉽게 가져다 쓸 수 있고, 버전 관리도 쉬워진다. Node가 깔리면 자동으로 같이 깔리기 때문에 따로 설치할 필요는 없다.

프로젝트 시작

npm init

Webpack

코드를 모듈로 나눠서 작성하고 그거를 하나(?)로 묶어준다.

자세한 내용은 여기를 참고한다.

추가적으로 필요한것들

Webpack dev server

말 그대로 개발서버이다. 이 라이브러리를 사용하면 webpack을 사용한 프로젝트에 개발서버를 아주 쉽게 구축할 수 있다.

코드를 막 짜고 저장만 해도 알아서 (빠르게) 번들링하고 브라우저에 실시간으로 반영도 해준다.

babel-loader

js파일을 읽을때 babel에게 코드를 넘겨주는 역할을 한다.

css-loader

css파일을 읽는데 필요하다. 자세한 내용은 이곳을 참고.

mini-css-extract-plugin

css-loader로 읽은 css코드를 파일로 추출해낸다. 자세한 내용은 이곳을 참고.

html-webpack-plugin

html파일에 js코드를 집어넣고, js파일의 경로도 넣고 할때 필요하다. 즉, dynamic한 html파일을 생성해야 할때 필요하다. 자세한 내용은 이곳을 참고.

싹다 설치하기

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader mini-css-extract-plugin html-webpack-plugin

Babel

최신 js문법으로 짠 코드를 옛날 js코드로 변환해준다. 그래야 최신 문법을 아직 지원하지 않는 브라우저(ie)에서도 내 코드가 작동할것이다.

@babel/core

Node API를 통해서 JS코드 변환을 한다. 가장 핵심적인 부분.

@babel/preset-env

babel은 변환하려는 최신문법에 해당하는 plugin을 설치해 줘야지만, 그 문법을 사용했을때 옛날 코드로 바꿔준다. 예를들어서, 이곳을 보면 다양한 플러그인이 있다. 그 최신문법을 쓰기 위해서는 해당되는 플러그인을 설치해야한다. 그런데, 대충 중요한 플러그인들을 모아놓은 세트가 바로 preset-env이다. 그래서 이거를 설치해주면 앵간해서는 (일일이 플러그인을 설치 안해줘도) 최신문법을 편하게 써도 된다.

@babel/preset-react

react프로젝트를 할때 특히나 필요한 플러그인들이 모아져있는 preset이다. 대표적으로 JSX문법을 변환해주는 플러그인이 포함되어있다.

싹다 설치하기

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

React

react프로젝트니까 당연히 react를 설치해줘야한다.

npm install react

이거는 production code에 포함되어야 하는 라이브러리니까 --save-dev를 하지 않는다.

React DOM

이 라이브러리는 React Component들을 담는 React용 DOM을 제공한다. 우리가 만드는 모든 컴포넌트들은 이 DOM에 담기게 된다. 원래는 react라이브러리안에 들어있었으나 지금은 페이스북이 분리해서 관리하고 있다.

npm install react-dom

이것도 역시 production code에 포함되어야 하는 라이브러리니까 --save-dev를 하지 않는다.

자세한 내용은 이곳을 참고.

여기까지의 package.json의 모습

{
  "name": "hooks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open \"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-loader": "^8.2.1",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

저기 scripts부분의 start가 좀 의아할 수 있는데, 이 글을 참고하면 된다.

webpack.config.js

webpack설정파일을 작성해준다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const join = require('path').join;
module.exports = {
  entry: join(__dirname, '/src/index.js'),
  devtool: 'source-map',
  output: {
    filename: "main.js",
    path: join(__dirname, '/dist'),
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    },
    {
      test: /\.(scss|css)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader"]
    }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
    new HtmlWebpackPlugin({
      template: join(__dirname, '/src/index.html')
    })
  ],
};

babel.config.json

babel설정파일을 작성해준다

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

.gitignore

여기서 gitignore파일을 생성한다.

# Created by https://www.toptal.com/developers/gitignore/api/react
# Edit at https://www.toptal.com/developers/gitignore?templates=react
### react ###
.DS_*
*.log
logs
**/*.backup.*
**/*.back.*
node_modules
bower_components
*.sublime*
psd
thumb
sketch
# End of https://www.toptal.com/developers/gitignore/api/react

src폴더 생성

index.html, index.js, index.css, App.js 파일을 생성한다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=devide-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" conent="ie=edge">
  <title>Scratch React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

App.js

import React from 'react';
function App() {
  return (
    <div>Hello World!</div>
  );
}
export default App;

index.css

참고한 사이트 : https://medium.com/javascript-in-plain-english/a-guide-to-creating-a-react-app-without-create-react-app-5337c5ac2ea0

Node

노드 공식 사이트에서 다운받고 설치하면 된다.

NPM

npm이 있어야 webpack, react, babel 등의 외부 라이브러리들을 쉽게 가져다 쓸 수 있고, 버전 관리도 쉬워진다. Node가 깔리면 자동으로 같이 깔리기 때문에 따로 설치할 필요는 없다.

프로젝트 시작

npm init

Webpack

코드를 모듈로 나눠서 작성하고 그거를 하나(?)로 묶어준다.

자세한 내용은 여기를 참고한다.

추가적으로 필요한것들

Webpack dev server

말 그대로 개발서버이다. 이 라이브러리를 사용하면 webpack을 사용한 프로젝트에 개발서버를 아주 쉽게 구축할 수 있다.

코드를 막 짜고 저장만 해도 알아서 (빠르게) 번들링하고 브라우저에 실시간으로 반영도 해준다.

babel-loader

js파일을 읽을때 babel에게 코드를 넘겨주는 역할을 한다.

css-loader

css파일을 읽는데 필요하다. 자세한 내용은 이곳을 참고.

mini-css-extract-plugin

css-loader로 읽은 css코드를 파일로 추출해낸다. 자세한 내용은 이곳을 참고.

html-webpack-plugin

html파일에 js코드를 집어넣고, js파일의 경로도 넣고 할때 필요하다. 즉, dynamic한 html파일을 생성해야 할때 필요하다. 자세한 내용은 이곳을 참고.

싹다 설치하기

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader mini-css-extract-plugin html-webpack-plugin

Babel

최신 js문법으로 짠 코드를 옛날 js코드로 변환해준다. 그래야 최신 문법을 아직 지원하지 않는 브라우저(ie)에서도 내 코드가 작동할것이다.

@babel/core

Node API를 통해서 JS코드 변환을 한다. 가장 핵심적인 부분.

@babel/preset-env

babel은 변환하려는 최신문법에 해당하는 plugin을 설치해 줘야지만, 그 문법을 사용했을때 옛날 코드로 바꿔준다. 예를들어서, 이곳을 보면 다양한 플러그인이 있다. 그 최신문법을 쓰기 위해서는 해당되는 플러그인을 설치해야한다. 그런데, 대충 중요한 플러그인들을 모아놓은 세트가 바로 preset-env이다. 그래서 이거를 설치해주면 앵간해서는 (일일이 플러그인을 설치 안해줘도) 최신문법을 편하게 써도 된다.

@babel/preset-react

react프로젝트를 할때 특히나 필요한 플러그인들이 모아져있는 preset이다. 대표적으로 JSX문법을 변환해주는 플러그인이 포함되어있다.

싹다 설치하기

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

React

react프로젝트니까 당연히 react를 설치해줘야한다.

npm install react

이거는 production code에 포함되어야 하는 라이브러리니까 --save-dev를 하지 않는다.

React DOM

이 라이브러리는 React Component들을 담는 React용 DOM을 제공한다. 우리가 만드는 모든 컴포넌트들은 이 DOM에 담기게 된다. 원래는 react라이브러리안에 들어있었으나 지금은 페이스북이 분리해서 관리하고 있다.

npm install react-dom

이것도 역시 production code에 포함되어야 하는 라이브러리니까 --save-dev를 하지 않는다.

자세한 내용은 이곳을 참고.

여기까지의 package.json의 모습

{
  "name": "hooks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open \"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-loader": "^8.2.1",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

저기 scripts부분의 start가 좀 의아할 수 있는데, 이 글을 참고하면 된다.

webpack.config.js

webpack설정파일을 작성해준다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const join = require('path').join;
module.exports = {
  entry: join(__dirname, '/src/index.js'),
  devtool: 'source-map',
  output: {
    filename: "main.js",
    path: join(__dirname, '/dist'),
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    },
    {
      test: /\.(scss|css)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader"]
    }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
    new HtmlWebpackPlugin({
      template: join(__dirname, '/src/index.html')
    })
  ],
};

babel.config.json

babel설정파일을 작성해준다

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

.gitignore

여기서 gitignore파일을 생성한다.

# Created by https://www.toptal.com/developers/gitignore/api/react
# Edit at https://www.toptal.com/developers/gitignore?templates=react
### react ###
.DS_*
*.log
logs
**/*.backup.*
**/*.back.*
node_modules
bower_components
*.sublime*
psd
thumb
sketch
# End of https://www.toptal.com/developers/gitignore/api/react

src폴더 생성

index.html, index.js, index.css, App.js 파일을 생성한다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=devide-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" conent="ie=edge">
  <title>Scratch React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

App.js

import React from 'react';
function App() {
  return (
    <div>Hello World!</div>
  );
}
export default App;

index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Add Comment