React - Create React App

Create React App이란?

React SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.

React로 개발을 시작하려면 JSX를 JS로 변환시켜주는 BABEL, CSS transpiler인 PostCSS, 다양한 패키지를 묶어주는 모듈 번들러인 Webpack까지 다양한 툴들이 사용된다. 모든 툴의 작동 원리를 알고있으면 좋겠지만 초급 개발자 입장에서 아직은 전부 이해하기 어렵다. 이때 Create React App을 사용하면 복잡한 개발 셋팅을 간단히 구성할 수 있다.

Create React App의 등장 배경

2010년대 초중반 주류였던 Angular는 하나의 프레임워크로서 정형화되고 체계화된 프론트엔드 개발 경험을 제공해서 많은 환영을 받았다. 하지만 프레임워크이기 때문에 기본적으로 필요한 코드의 양이 많고 배우는데 필요한 시간도 오래 걸렸으며 번들 사이즈가 커지면서 성능 문제도 점점 커지게 되었다.

이때 대체제로 Vue와 React가 거론되기 시작하였고 React가 주목받았던 이유는 라이브러리라는 점 때문이었다. 개발 시 기술 스택을 미리 가정하지 않고 불필요한 코드를 추가할 필요가 없었기 때문에 이러한 React의 자유도는 개발자들의 많은 관심을 받게 되었다.

하지만 리액트만 알아서는 개발하기가 어렵고 추가적으로 많은 라이브러리를 활용할 줄 알아야 하는데 React 개발진은 초급 개발자에게 React에 쉽게 접근할 수 있도록 create-react-app이라는 툴 체인을 개발하였다.

Create React App의 단점과 Webpack

React를 간단하게 시작하기 위해 create-react-app에서 사용되는 툴 목록은 매우 다양하다.

{
	// ... 
  "dependencies": {
    "@babel/core": "^7.16.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
    "@svgr/webpack": "^5.5.0",
    "babel-jest": "^27.4.2",
    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.8",
    "babel-preset-react-app": "^10.0.1",
    "bfj": "^7.0.2",
    "browserslist": "^4.18.1",
    "camelcase": "^6.2.1",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.2.0",
    "dotenv": "^10.0.0",
    "dotenv-expand": "^5.1.0",
    "eslint": "^8.3.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "fs-extra": "^10.0.0",
    "html-webpack-plugin": "^5.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.4.3",
    "jest-resolve": "^27.4.2",
    "jest-watch-typeahead": "^1.0.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss": "^8.4.4",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^6.2.1",
    "postcss-normalize": "^10.0.1",
    "postcss-preset-env": "^7.0.1",
    "prompts": "^2.4.2",
    "react-app-polyfill": "^3.0.0",
    "react-dev-utils": "^12.0.1",
    "react-refresh": "^0.11.0",
    "resolve": "^1.20.0",
    "resolve-url-loader": "^4.0.0",
    "sass-loader": "^12.3.0",
    "semver": "^7.3.5",
    "source-map-loader": "^3.0.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.2",
    "terser-webpack-plugin": "^5.2.5",
    "webpack": "^5.64.4",
    "webpack-dev-server": "^4.6.0",
    "webpack-manifest-plugin": "^4.0.2",
    "workbox-webpack-plugin": "^6.4.1"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  },
  "peerDependencies": {
    "react": ">= 16",
    "typescript": "^3.2.1 || ^4"
  },
  "peerDependenciesMeta": {
    "typescript": {
      "optional": true
    }
  }
}

사용자에게 최적의 번들을 제공하기 위한 개발자들은 이런 create-react-app의 거대한 라이브러리 목록을 줄이고자 Webpack을 설치하여 필요한 라이브러리를 하나씩 설정하게되었다.

리액트는 프론트엔드 라이브러리로서 최소한의 기능을 제공하고자 가볍게 만들어졌지만 시간이 지나면서 개발자의 다양한 니즈를 충족시키기 위해 더 많은 라이브러리를 필수적으로 사용해야만 했고 개발자가 필요한 여러 라이브러리를 골라서 번들링 할 수 있는 Webpack이 필요하게 되었다.

Create React App 시작하기

1. node.js와 npm 버전 확인

Create React App을 시작하기 위해선 node.js와 npm(Node Packaged Manager)이 필요하다.

// node.js 버전 확인
node -v
v16.18.0

// npm 버전 확인
npm -v
8.19.2

2. directory 생성

mkdir test

3. Create React App 실행

cd test
npx create-react-app { directory 이름 }

• Happy hacking!이 출력되었다면 정상적으로 설치가 되었다는 뜻이다.
• test 디렉토리에 refactoring이라는 React 디렉토리를 만듬으로써 React 프로젝트를 시작할 수 있다.

4. 디렉토리 구조

5. 애플리케이션 실행

npm start

• 브라우저가 실행되면서 http://localhost:3000에서 React 로고를 확인할 수 있다.
• src/App.js에서 코드를 변경하면 자동으로 브라우저에 반영된다.