Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/heonys/webpack-react-enterprise

Complete A-Z React Setup for Enterprise-grade Application from Scratch
https://github.com/heonys/webpack-react-enterprise

chakra cypress emotion husky jest msw react react-oauth react-query recoil storybook tailwindcss testing-library typescript webpack

Last synced: 6 days ago
JSON representation

Complete A-Z React Setup for Enterprise-grade Application from Scratch

Awesome Lists containing this project

README 

        
# webpack-react-enterprise



### πŸš€ κ°œμš” 

"webpack-react-enterprise"λŠ” μ›ΉνŒ©μ„ μ‚¬μš©ν•˜μ—¬ React μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ΅¬μΆ•ν•˜κΈ° μœ„ν•œ μ €μž₯μ†Œμž…λ‹ˆλ‹€. Create React App ν˜Ήμ€ Viteκ³Ό 같은 λ²ˆλ“€λŸ¬λ₯Ό μ‚¬μš©ν•˜λ©΄ 생산성을 크게 ν–₯μƒμ‹œμΌœ μ£Όμ§€λ§Œ Webpack을 직접 μ„€μ •ν•˜κ³  Babel, TypeScript λ“± ν•„μš”ν•œ 도ꡬ듀을 직접 μ„€μΉ˜ν•˜λ©° ν”„λ‘œμ νŠΈλ₯Ό κ΅¬μ„±ν•˜λ©° μ½”λ“œ μŠ€ν”Œλ¦¬νŒ…, λ²ˆλ“€ μ΅œμ ν™” λ“± μ›ΉνŒ©μ„ 직접 닀루고 κ·Έ λ™μž‘ 원리와 μ„€μ • 방법에 λŒ€ν•œ 이해도λ₯Ό 높일 수 μžˆλŠ” 것을 λͺ©ν‘œλ‘œ ν•©λ‹ˆλ‹€. 이λ₯Ό 톡해 React ν”„λ‘œμ νŠΈμ— ν•„μš”ν•œ λͺ¨λ“  μš”μ†Œλ₯Ό μ™„μ „νžˆ μ œμ–΄ν•˜λ©΄μ„œ, 더 λ§Žμ€ μœ μ—°μ„±κ³Ό μ»€μŠ€ν„°λ§ˆμ΄μ§• κ°€λŠ₯성을 μ œκ³΅ν•©λ‹ˆλ‹€.



### 🎯 λͺ©ν‘œ

1. μ›ΉνŒ©μ„ μ‚¬μš©ν•˜μ—¬ 직접 React μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ΅¬μΆ•ν•˜λŠ” 방법을 μ΄ν•΄ν•˜κ³  읡히기

2. ν•„μš”ν•œ λͺ¨λ“  μš”μ†Œλ₯Ό κ°–μΆ˜ React μ• ν”Œλ¦¬μΌ€μ΄μ…˜ κ°œλ°œν•˜κΈ° 

3. μ›ΉνŒ© μ„€μ •, Babel, TypeScript λ“±μ˜ 도ꡬλ₯Ό 직접 μ„€μΉ˜ν•˜κ³  μ„€μ •ν•˜μ—¬ ν”„λ‘œμ νŠΈμ˜ μ»€μŠ€ν„°λ§ˆμ΄μ§• κ°€λŠ₯μ„± ν™•λ³΄ν•˜κΈ° 

4. enterprise μˆ˜μ€€μ˜ ν”„λ‘œμ νŠΈμ— ν•„μš”ν•œ κΈ°λŠ₯κ³Ό ꡬ쑰 κ΅¬ν˜„ν•˜κΈ° 



### πŸ” Features



- **[React](https://ko.legacy.reactjs.org/)**: UI 라이브러리 

- **[Typescript](https://www.typescriptlang.org/)**: νƒ€μž… μ•ˆμ „μ„±κ³Ό 개발 생산성 ν–₯상

- **[Tailwind](https://tailwindcss.com/), [Emotion](https://emotion.sh/docs/introduction)** λͺ¨λ‘ κ°€λŠ₯ν•œ μœ μ—°ν•œ μŠ€νƒ€μΌλ§ 지원  

- Emotion 기반의 **[Chakra-UI](https://chakra-ui.com/)** μ»΄ν¬λ„ŒνŠΈ 제곡 

- **[Eslint](https://eslint.org/)** 와 **[Prettier](https://prettier.io/)**: μΌκ΄€λœ μ½”λ“œ μŠ€νƒ€μΌ μœ μ§€

- **[Jest](https://jestjs.io/)**, **[Testing Library](https://testing-library.com/)**: μœ λ‹› ν…ŒμŠ€νŠΈμ™€ 톡합 ν…ŒμŠ€νŠΈ

- **[Cypress](https://www.cypress.io/)**: E2E ν…ŒμŠ€νŠΈ 

- **[Storybook](https://storybook.js.org/)**: μ»΄ν¬λ„ŒνŠΈ λ‹¨μœ„μ˜ λ¬Έμ„œν™” ν™˜κ²½ 제곡  

- **[MSW](https://mswjs.io/)**: λΈŒλΌμš°μ € APIλͺ¨ν‚Ή 및 ν…ŒμŠ€νŠΈ κ°•ν™” 

- **[Recoil](https://recoiljs.org/ko/)** κ³Ό **[React Query](https://tanstack.com/)** λ₯Ό ν†΅ν•œ μƒνƒœ 관리

- **[Zod](https://zod.dev/)**: 데이터 μœ νš¨μ„± 검사 

- **[react-hook-form](https://react-hook-form.com/)**: κ°•λ ₯ν•œ form 관리 

- **[i18next](https://www.i18next.com/)**: λ‹€κ΅­μ–΄ 지원 

- **[react-oauth](https://github.com/MomenSherif/react-oauth)**: ꡬ글 μ†Œμ…œλ‘œκ·ΈμΈ 지원  

- **[Commitizen](https://github.com/commitizen/cz-cli)**: μΌκ΄€λœ 컀밋 λ©”μ‹œμ§€ 관리

- **[react-helmet](https://github.com/nfl/react-helmet)**: 메타데이터λ₯Ό λ™μ μœΌλ‘œ 관리

- **[Husky](https://typicode.github.io/husky/)**, **[lint-staged](https://github.com/lint-staged/lint-staged)**: Git 훅을 μ΄μš©ν•œ 컀밋 κ·œμΉ™ κ°•μ œ

- **[Express](https://expressjs.com/)**: λΉŒλ“œλœ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ ν˜ΈμŠ€νŒ…μš© μ›Ήμ„œλ²„ 제곡



### πŸŽ‰ μ‹œμž‘ν•˜κΈ°



μ €μž₯μ†Œ 볡제 및 νŒ¨ν‚€μ§€ μ˜μ‘΄μ„± μ„€μΉ˜ 

```shell

git clone --depth=1 https://github.com/Heonys/webpack-react-enterprise.git my-project-name

cd my-project-name

yarn install

```



개발 λͺ¨λ“œμ—μ„œ μ‹œμž‘



```shell

yarn dev

```



λΈŒλΌμš°μ €μ—μ„œ `http://localhost:3000`을 μ—΄μ–΄ ν™•μΈν•˜μ„Έμš”



### πŸ“ƒ 슀크립트 



`package.json`μ—μ„œ λ‹€μŒκ³Ό 같은 μŠ€ν¬λ¦½νŠΈλ“€μ΄ μ‚¬μš©μ΄ κ°€λŠ₯ν•©λ‹ˆλ‹€ 



- `dev`: webpack 개발 μ„œλ²„ μ‹€ν–‰ 

- `build`: λ¦¬μ•‘νŠΈ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ λΉŒλ“œ 

- `serve`: λΉŒλ“œμ΄ν›„ production ν™˜κ²½μ—μ„œ μ‹€ν–‰

- `storybook`: storybook μ„œλ²„ μ‹œμž‘

- `build:storybook`: storybook μ„œλ²„ λΉŒλ“œ 

- `commit`: commitizen으둜 git commit

- `test`: ν…ŒμŠ€νŠΈ μ‹€ν–‰ 

- `test:coverage`: ν…ŒμŠ€νŠΈ 컀버리지 확인

- `test:e2e`: cypress μ‹€ν–‰ 

- `prepare`: νŒ¨ν‚€μ§€ μ„€μΉ˜μ‹œ huskyκ°€ μžλ™μœΌλ‘œ Git 훅을 μ„€μΉ˜

- `check-types`: tsc둜 νƒ€μž…μ²΄ν¬ 



### πŸ› οΈ ν”„λ‘œμ νŠΈ ꡬ쑰

```shell

.

β”œβ”€β”€ README.md                       # README file

β”œβ”€β”€ .husky                          # Husky configuration

β”œβ”€β”€ .storybook                      # Storybook configuration

β”œβ”€β”€ .yarn                           # Yarn package manager settings

β”œβ”€β”€ cypress                         # Cypress E2E test

β”œβ”€β”€ server                          # Express server folder 

β”œβ”€β”€ public                          # Public assets folder

β”œβ”€β”€ src

β”‚   β”œβ”€β”€ api                         # HTTP request 

β”‚   β”œβ”€β”€ atom                        # Recoil state management

β”‚   β”œβ”€β”€ components                  # React components

β”‚   β”œβ”€β”€ context                     # React context

β”‚   β”œβ”€β”€ hook                        # Custom hooks

β”‚   β”œβ”€β”€ i18n                        # i18next configuration

β”‚   β”œβ”€β”€ mocks                       # MSW configuration

β”‚   β”œβ”€β”€ pages                       # Page component

β”‚   β”œβ”€β”€ routes                      # React routing 

β”‚   β”œβ”€β”€ stories                     # Storybook story 

β”‚   β”œβ”€β”€ test                        # Unit & Integration test

β”‚   β”œβ”€β”€ types                       # Type definitions

β”‚   └── util                        # Utility function

```



### 🌐 i18n



### πŸ“’ express 



### πŸ“ commitizen



### βš™οΈ ν™˜κ²½ λ³€μˆ˜



### 🎲 MSW 



### πŸ“– Storybook 



### πŸ§ͺ ν…ŒμŠ€νŠΈ



- **λ‹¨μœ„ ν…ŒμŠ€νŠΈ 및 ν†΅ν•©ν…ŒμŠ€νŠΈ**: `yarn test`을 ν†΅ν•œ Jest μ‹€ν–‰ 

- **End-to-end tests**: `yarn e2e`을 ν†΅ν•œ Cypress μ‹€ν–‰