☝🏼 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
를 통하여 사용자가 원하는대로 설정을 변경할 수 있습니다