Skip to content

Latest commit

 

History

History
292 lines (224 loc) · 9.29 KB

README.md

File metadata and controls

292 lines (224 loc) · 9.29 KB

💻 리액트 커스텀 개발 환경 보일러 플레이트

  • 해당 저장소는 리액트 커스텀 개발 환경 보일러 플레이트 저장소로서, react, webpack, babel, eslint 등 리액트 프로젝트를 진행 할 때 기본적으로 셋팅해야되는 개발 환경을 구축한 저장소입니다.
  • 기본적으로 react v18, webpack v5, esbuild-loader v3 등 2023년 6월 기준 최신 버전으로 구축되어 있습니다.
  • README 문서 하단에는 참고 내용이라던가 개인적으로 더 추가하면 좋은 로더/플러그인 내용도 있으니 참고하면 좋을 것 같습니다.
  • 개선 할 내용이 있다면 issue 또는 Pull Request도 등록해주시면 감사드립니다.

📗 사용 절차

1. Repo Clone

git clone https://github.com/ssi02014/react-dev-env-boilerplate.git

2. Branch & Checkout & Pull

  • 해당 레포는 다양한 환경에 맞춰 브랜치가 구성되어 있다. 기호에 맞게 참고 or 사용하면 된다.
  • 만약, esbuild-loader 브랜치 코드를 확인하려면 아래의 절차를 진행한다.
git branch esbuild-loader

git checkout -m esbuild-loader 

git pull origin esbuild-loader

3. 패키지 설치

  • 해당 레포는 yarn 패키지 매니저를 기반으로 패키지를 관리하고 있다. 따라서 yarn으로 패키지를 설치하자.
yarn
or
yarn install

👨🏻‍💻 master Branch

  • 가장 기본적인 react, babel, typescript, eslint, prettier, jest, React Testing Library 셋팅 브랜치

셋팅 목록

  • react v18
  • typeScript
  • webpack v5
  • babel
  • eslint
  • prettier
  • jest
  • react testing library

👨🏻‍💻 esbuild-loader Branch

  • master Branch 셋팅에서 babel-loader대신 esbuild-loader를 적용해서 빌드 타임을 감소시킨 브랜치

셋팅 목록

  • react v18
  • typeScript
  • webpack v5
  • esbuild-loader
  • eslint
  • prettier

👨🏻‍💻 esbuild-jest Branch

  • esbuild-loader Branch 셋팅에서 jest, react testing library 테스트 환경 추가 브랜치
  • 테스트 환경을 위해 @babel/preset-typescript, @babel/preset-env, @babel/preset-react 및 babel 추가 셋팅

셋팅 목록

  • react v18
  • typeScript
  • webpack v5
  • esbuild-loader
  • eslint
  • prettier
  • jest
  • react testing library
    • jest를 위한 babel 일부 적용

🚀 그 외 보일러 플레이트 저장소

react-npm-deploy-boilerplate

  • react-npm-deploy-boilerplate
  • Design System와 같은 npm 오픈소스 배포에 최적화 보일러 플레이트 저장소
  • React, rollup, Typescript, Storybook 등으로 구성
  • github actions를 이용한 자동 빌드 및 배포 구현
  • Storybook을 github page로 배포함으로써 데모 페이지로서 활용

React 차세대 개발 툴 적용 보일러 플레이트 저장소

  • react-vite-berry-boilerplate
  • React, TypeScript, Vite, Yarn Berry로 구성한 리액트 프로젝트 보일러 플레이트 저장소
  • Vite를 이용한 리액트(+타입스크립트) 프로젝트 구성
  • Yarn Berry의 Plug’n’Play(PnP)와 Zero-Install 적용

🙋🏻 참고 문서

📄 1. esbuild-loader?

  • esbuild-loader는 멀티 스레드 기반으로 동작하는 Go언어로 작성된 로더이다. 그래서 싱글 스레드 기반인 자바스크립트로 만들어진 babel보다 언어가 동작하는 본질적인 차이때문에 퍼포먼스 측면에서 차이가 크다.
  • kakao esbuild-loader 문서

기존 babel-loader 빌드 타임


스크린샷 2023-03-12 오후 4 58 35


esbuild-loader 도입 후 빌드 타임


스크린샷 2023-03-12 오후 4 55 08


📄 2. @svgr/webpack

  • @svgr/webpack 패키지는 svg를 리액트 컴포넌트 형식으로 사용할 수 있게 변환해주는 웹팩 모듈이다.
  • https://react-svgr.com/

예제

import Star from './star.svg'

const Example = () => (
  <div>
    <Star />
  </div>
)
  • @svgr/webpack를 적용하면 위 예제처럼 svg를 import해서 컴포넌트로 형식으로 사용할 수 있다.

📄 3. Font Preload?

  • Create React App(CRA)로 만든 프로젝트는 font를 preload하려면 craco와 같은 라이브러리를 활용해서 preload-webpack-plugin, webpack-font-preload-plugin을 적용했어야 했다.
    • TMI: preload-webpack-plugin는 webpack5부터 호환되지 않아서 webpack-font-preload-plugin를 사용해야 함
  • 하지만, 해당 보일러 플레이트는 html-loader가 적용되어 있기 때문에 preload를 위한 플러그인을 설치하지 않아도 된다.
  • 실제 적용 방법은 폰트 파일들이 src/assets/fonts 경로에 있다고 가정하고, index.html파일을 아래처럼 작성하면 된다.
<head>
  <!-- head -->
  <link
    rel="preload"
    href="/src/assets/fonts/Pretendard-Medium.subset.woff"
    as="font"
    type="font/woff"
    crossorigin
  />
</head>
  • 현재 상태에서 build 해보고 확인해보면 제대로된 경로로 파일을 가져오는 것을 확인할 수 있다.

스크린샷_2023-04-19_오후_7 33 26


👍 그 외 추가하면 좋은 로더 및 플러그인

⭐️ 1. SASS(SCSS)

  • Sass는 Syntactically Awesome Style Sheets의 약자로, CSS의 확장된 문법을 제공하는 CSS 전처리기(preprocessor)다.
  • Sass는 빌드 시에 CSS 파일로 컴파일되야 한다. 따라서, webpack에서 Sass 파일을 읽고, CSS 파일로 컴파일하여 번들링하려면 sass-loader를 추가해야 합니다.

패키지 설치

yarn add -D sass sass-loader

webpack 셋팅

  • [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] 와 같이 배열을 넣었는데 여기서 순서가 중요하다.
  • 이는 배열 마지막 요소부터 로더가 적용되기 때문인데, sass-loader를 통해서 먼저 sass파일을 css로 컴파일 한 후, css-loader가 컴파일 된 css 파일을 모듈로 읽어들인 다음, MiniCssExtractPlugin.loader 가 별도의 파일로 추출된 css 파일을 로드하기 때문이다.
  • 배열 순서를 정확하게 작성하지 로더가 정상적으로 작동하지 않아 에러가 발생할 수 있으니..😱 순서를 꼭 맞춰주자!
module.exports = {
  module: {
    rules: [
      // ...webpack rules
      {
        test: /\.(sa|sc|c)ss$/i, // scss, sass, css 파일 매칭
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], // sass-loader 추가
      },
    ]
  }
}

scss파일 생성 후 적용

// style.scss
body {
  font-family: Pretendard;
  background-color: rgb(192, 249, 230);
}
// App.tsx
import './style.scss';
import './style2.css';

function App() { 
  // ...
}

export default App;

⭐️ 2. webpack-bundle-analyzer

스크린샷_2022-06-04_오후_11 39 30

  • webpack-bundle-analyzer는 webpack 번들링 결과를 시각화하여 번들링 크기를 확인할 수 있도록 도와주는 도구다.
  • webpack-bundle-analyzer는 webpack으로 번들링된 결과물을 시각적으로 파악하여 번들링 크기를 줄이는 데 도움을 줄 수 있다.
  • webpack-bundle-analyzer

패키지 설치

yarn add -D webpack-bundle-analyzer

webpack 셋팅

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    // webpack plugins...

    new BundleAnalyzerPlugin({
      analyzerMode: "static", // 분석 파일 html을 build폴더에 저장
      reportFilename: 'bundle-report.html', // 분석 파일 보고서 이름(자유롭게 지정)
      openAnalyzer: false, // 분석 파일을 실행 시 자동으로 열지 않는다.
      generateStatsFile: true, // 분석 파일을 json으로 저장한다.
      statsFilename: "bundle-report.json", // 분석 파일 json 파일 이름 (자유롭게 지정)
    })
  ]
}

package.json 셋팅

{
  // ...
  "scripts": {
    // ...
    "preanalyze": "yarn build:prod",
    "analyze": "webpack-bundle-analyzer ./build/bundle-report.json --default-sizes gzip",
  }
}

yarn analyze 실행

  • yarn analyze 실행 시 빌드 후 분석 진행
yarn analyze