Webpack 초기 구성

1. NPM 초기화

npm 초기화(initialization) 명령을 사용해 프로젝트를 초기 구성합니다. (package.json 생성)

NPM 초기화 명령

npm init -y

package.json

2. Webpack 설치 & 구성

webpack, webpack-cli 패키지를 설치한 후, webpack.config.js 파일을 만들어 구성합니다.

패키지 설치

npm i webpack webpack-cli -D

webpack.config.js

3. React, ReactDOM 설치

react, react-dom 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i react react-dom

4. 엔트리 파일 생성

엔트리 파일을 만든 후, React, ReactDOM 모듈을 불러와 간단한 React 코드를 작성합니다.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

// React 요소
const app = React.createElement(
  'div', 
  { className: 'app' }, 
  'React App 매뉴얼 구성'
);

// DOM 노드
const rootNode = document.getElementById('root');

// DOM 노드에 React 요소 렌더링
ReactDOM.render(app, rootNode);