Create React App Lite

☝🏼 Why React-Create-App-Lite

처음 React를 접했을 때 npx create-react-app my-app 커맨드를 입력하고 터미널에서 벌어지는 일들에 입이 쩍 벌어졌던 기억이 아직 생생합니다.
부트캠프 수료 중 Javascript로 모든 과제, 프로젝트를 진행했고 그 중 React를 다룰 때는 Create-React-App 이하 CRA을 사용했습니다.
항상 CRA의 구동 방식이 궁금했습니다.
어떻게 package.json에서 node start.js같은 명령어가 아닌 react-scripts start로 웹 페이지가 열리는지, Webpack을 사용하는 것으로 알고 있는데 도대체 Webpack에 관련된 설정은 어디에 숨겨져 있는 건지 궁금했습니다.
이렇게 Create-React-App-Lite 프로젝트가 시작되었습니다.
CRA의 경우 38.4kB의 Unpacked Size를 갖고 있지만 Create-React-App-Lite 이하 CRAL의 경우 28.5kB정도로 비교적 가볍습니다.
Install시 CRA는 331MB의 용량을, CRAL은 167MB로 절반의 용량을 갖고 있습니다. 설치 시간 또한 절반으로 줄였습니다.
Typescript와 관련된 코드들은 제외했고 Webpack Plugin또한 Javascript와 JSX파일만을, CSS와 CSS Module, SASS 그리고 CSS in JS를 적용할 수 있게 코드를 작성했고 이미지 파일들은 Webpack에 내장된 Asset Module사용으로 불필요한 File-loader의 사용을 피했습니다.
CRA는 React-Native, React-Native-Web, Typescript에도 대응할 수 있도록 만들어져 CRAL보다 용량이 크고 설치 시간이 느리지만 CRAL은 Javascript만을 목표로 하였기 때문에 가능한 프로젝트였습니다.
가볍다는 뜻의 Lite에 걸맞게 보다 적은 Dependencies와 용량, 설치 시간을 목표로 진행한 프로젝트였고 Webpack에 대해 깊이 탐구했고 Node.JS의 프로세스 내에서도 프로세스를 실행할 수 있게 해주는 기능인 Child Process에 대해서도 알게 됐습니다.
Github에 Issues탭과 Discussions탭의 사용으로 사용자의 피드백을 바탕으로 계속해서 업데이트 예정입니다.

✌🏼 Challenges faced in this project

해당 프로젝트를 진행하기로 마음먹은 후 가장 어려웠던 건 어떻게 react-scripts start가 작동하는지 알아내는 과정이었습니다. 프로젝트의 핵심이 저 명령어에 모두 들어있다고 해도 과언이 아니었고요.
저는 우선 Create-React-App 이하 CRA를 천천히 살펴보았습니다.
CRA의 react-scripts start 명령어가 eject후에는 node scripts/start.js로 바뀐다는 사실을 확인했습니다.
react-scripts에 모든 해답이 있다고 생각했고 Express를 사용해 서버를 구축할 때 사용했던 모듈인 Nodemon또한 node ...가 아닌 nodemon ...의 실행 방식이었던 것을 기억해냈습니다.
Nodemon을 실행할 때처럼 CRA역시 node ...이 아닌 모듈명 파일의 형식으로 build, start등을 실행시킴을 파악하고 react-scripts모듈과 모듈명 파일의 명령어가 어떻게 동작하는지 공부했습니다.
해답은 모듈 package.json파일의 bin속성에 있었습니다.
Executables즉 실행 가능한 로컬의 파일을 bin속성에 지정하면 상위 package.json의 node scripts를 통해 파일을 실행할 수 있었습니다.
이후 오랜 시간 모듈 하나하나의 기능과 작동원리들을 파악하고 start.js파일이 결국에는 Webpack Dev Server를 동작하는 스크립트임을 알게 됐습니다.
start.js파일에서 react-dev-utils의 chalk, clearConsole 등을 불러 사용하는 것을 확인, 이후 호출하는 하나하나의 모듈들을 파악하고 본 프로젝트에서의 필요 여부를 검증했습니다.
모든 흐름을 파악하고 나서야 본격적인 코딩을 시작했고 react-scripts-lite라는 모듈을 따로 만들어 그 안에 실행할 스크립트들을 숨겨두었습니다.
사용자에겐 불필요한 Webpack, Jest, Prettier, ESLint의 설정을 React-Scripts-Lite의 config폴더 안으로 옮겨 Create-React-App-Lite의 폴더구조를 단순화할 수 있었습니다.
또한 사용자가 원할 시 구현된 eject기능을 사용하여 언제든지 원하는 대로 설정을 변경할 수 있습니다.
이 eject구현 또한 어려운 과제 중 하나였는데 파일의 위치를 옮기면서 eject여부에 따라 설정의 경로들을 바꿔 줘야 했기 때문입니다.
File System모듈에 대한 이해가 필요했고 NodeJS내부 모듈 Readline의 사용으로 외부 라이브러리(CRA의 경우 Prompts) 없이 eject실행 여부를 재확인하는 콘솔을 출력했습니다.
결국 이 프로젝트의 핵심은 프로세스의 흐름과 NodeJS에 대한 보다 깊은 이해였습니다.
NodeJS의 프로세스 안에서 프로세스를 실행할 수 있게 해주는 Child_Process에 관해 처음 공부했고 서로 얽혀있는 파일들의 관계를 파악하고 필요 여부를 검증하면서 NodeJS에 말그대로 "Deep dive"했습니다.

Create React App Lite는

• npx create-react-app-lite <my-app> 을 통해 어디서나 설치할 수 있습니다
• node_modules에 설치되어있는 react-scripts-lite를 통해 작동합니다

Create React App Lite는 macOS를 기반으로 만들었습니다. 문제가 있다면, Issue를 남겨주세요. 궁금한점이 있다면 GitHub Discussions을 남겨주세요! |

Quick Overview

npx create-react-app-lite <my-app>
cd my-app
npm start

이후 http://localhost:3000 으로 접속해서 앱을 확인하세요

배포를 위한 준비가 끝나면 npm run build명령어로 번들링할 수 있습니다

Creating an App

npx create-react-app-lite <my-app>커맨드를 실행한 폴더 안에 my-app이라는 디렉토리를 생성합니다

my-app 디렉토리 안에는 아래와같은 구조의 초기 프로젝트가 생성되어있습니다

my-app
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── App.css
    │   ├── App.js
    │   ├── Count.js
    │   └── GlobalStyle.js
    ├── index.js
    └── test
        └── App.test.js

폴더 구조로 고민할 필요 없이 바로 사용자의 react-app을 만들수 있습니다

설치가 완료된다면 아래의 명령어로 프로젝트에 진입할 수 있습니다

cd my-app

생성된 프로젝트 안에서, 미리 설정된 몇가지 명령어를 실행할 수 있습니다

npm start

• 기본적으로 http://localhost:3000 으로 연결됩니다
• 포트를 변경하고싶다면 npm start뒤에 PORT=<원하는숫자>로 지정할 수 있습니다

npm test

• Jest를 기반으로 한 test를 실행하고 결과를 출력합니다
• src폴더 안의 <component>.(spec || test).js(x)을 찾아 테스트합니다

npm run build

• Build 폴더내에 배포 환경에서 사용할 번들링한 결과물을 출력합니다

npm run prettier & npm run lint

• 전체 파일에 걸친 코드 점검과 코드 정리를 실행합니다

npm run eject

• 숨겨진 모든 설정을 확인할 수 있습니다
• Webpack, Prettier, ESLint, Jest설정을 사용자의 필요에 맞게 변경할 수 있습니다

Tech Stacks

What’s Included?

• CSS, SASS, Styled-Components, CSS Module 모두 사용할 수 있습니다
• Jest를 적용한 Unit test를 할 수 있습니다
• 배포를 위해 JS, CSS, 이미지들을 번들링해줍니다
• Webpack-DevServer를 사용하여 파일의 변화에 즉각적으로 반응합니다
• eject를 통하여 사용자가 원하는대로 설정을 변경할 수 있습니다