React create-react-app

15 Nov 2022 •

React

•

javascript
react
npx
npm
template
cra-template
test
build
package-json
src
script
eject
polyfill
es6
exponentiation-operator
rest
spread
proposal-dynamic-import
proposal-class-public-fields
jsx
flow
typescript
browerslist
babel-loader
bundle

동생이 잘갔다. 온 친지들은 내가 동생인줄안다 히힛 좋아할거다. 안그러면 지는거같다. 어머니께서 가족들이 모인자리에서 “자식이 다 고만고만하면 걱정이 없지만, 하나는 잘살고 하나는 지지리도 궁상이면 걱정거리가 한가득”이라길래 왠지 찔렸다. 그래도 오랜만에 친지들과 어머니 아버지 지인들을 뵈서 좋았다. 좋다고 하자 아니면 지는거같다.

덤벼라 세상아 지지리 궁상맞을진 몰라도 다 박살내주지

1. create-react-app

원래 초기세팅이 오래걸린다. 그런걸로 보면 android는 매우 편하게 원하는 앱의 모양까지 초창기에 지정할 수 있다. 일반적으로 웹은 그런걸 본적이 없었는데 react는 지원하게 만들어놨다.(고마워 메타)

좀 더 들여다보자

2. 속성 시작

# path: 현재 경로에서 생성하고 싶으면 your-project-name, 그냥 거기 받고싶으면 .
$npx create-react-app {path}
# $cd your-project-name 경로에 생성하면 그경로로
$npm start

와아아아 설정이 한방에 끝.

3. template 지정

--template [template-name]옵션 추가로 템플릿을 입히고 시작할 수 있단다.

$npx create-react-app {path} --template [template-name]

사용자 설정 템플릿 지정방법

문서는 늘 옳다. 문서를 읽자.

npmjs: cra-template

남에건 늘 옳지만은 않지만 생산성만은 무시할수없다.

$npx create-cra-template

# 각자 사용법이 다르다. 역시 남에겐 ㄷㄷ 문서와는 ㄷㄷ

$npx create-react-app %PROJECT_NAME% --template npm-library

$cd %PROJECT_NAME%
$node ./prepare.js
# makes required package.json configuration

4. 기본 제공 명령

npm start: http://localhost:3000 지정 실행
npm test: 기본적으로 마지막 커밋 이후 변경된 파일과 관련된 테스트를 실행한다.
npm run build: 빌드를 하지 않으면 브라우저는 JSX를 모르기에 사용이 불가하다.

5. 폴더 구조

your-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

public/index.html페이지 템플릿
src/index.js js 진입점
src 내에서 webpack파일 처리

6. script

npm start
npm test
npm run build
npm run eject: 단일 빌드 종속성을 제거한다. 모든 구성파일과 전이적 종속성(webpack, Babel, ESLint 등) package.json 내를 재정렬하여 하는것이 낫다.
- 단방향적이다. 돌아갈수없음. 인생과 같네

7. 지원 브라우저 및 기능

7.1. 언어

IE 9, 10, 11 폴리필이 필요하다.

제안 단계

7.2. 지원 브라우저

browerslist구성이 파일에 포함된다. async/awit같은 언어 기능을 사용할 때 좋은 개발 환경을 제공하나 프로덕션 환경의 많은 브라우저와 호환성이 좋다. package.json > 0.2%

지원브라우저를 확인할 수 있다. build development start browserlist

"browerslist": {
  "production: [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

폴리필이 자동 포함되지 않으니, 지원하는 브라우저에 따라 필요한 언어 기능을 폴리필 해야한다.

편집 후 browerslist변경 사항이 즉시 적용되지 않는다. -> babel-loader package.json, 빠른 해결은 node_modules/.cache폴더 삭제 후 시도

react 세팅법이 다 나와있는거 같다.

참조

create-react-app: custom-templates
npmjs: cra-template
npmjs: accordproject/concerto-ui-core
npmjs: create-cra-template
create-react-app: running-tests
create-react-app: production-build
create-react-app: deployment
github: react-create-app/react-app-polifill
본문 참조(너무많아요)