[react] CDN, create-react-app 두가지 방법으로 사용하기

Use React, ReactDOM Library with CDN

CDN을 통한 리액트 라이브러리 사용

 

https://reactjs.org/docs/cdn-links.html     -  영어

https://ko.reactjs.org/docs/cdn-links.html       -  한글

CDN 링크 – React

CDN Links – React

 

 

---

CRA

https://create-react-app.dev

Create React App

 

 

터미널에 작성

npx create-react-app tic-tac-toe(프로젝트 이름)   

npx create-react-app 프로젝트 이름

 

npx?

npm 5.2.0 이상부터 함께 설치된 커맨드라인 명령어

 

 npx 가 필요했을까요??

• 프로젝트의 로컬에 설치된 패키지의 실행 커맨드를 사용하려면,
  • package.json 의 npm scripts 에 명령어를 추가하여 사용해야 했다.
  • npx 로 바로 실행 가능
• 전역으로 실행하고 싶은 패키지가 있을 경우,
  • npm i -g 를 이용하여, 전역에 꼭 설치해서 사용해야 가능했다.
  • npx 로 최신 버전의 패키지를 받아 바로 실행 가능 

 

 

package.json 파일을 확인해보자

 

{
  "name": "tic-tac-toe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

• 리액트 핵심 모듈
  • "react": "^16.13.1"
  • "react-dom": "^16.13.1"
• cra를 사용하는데 필요한 모듈
  • "react-scripts": "3.4.1"
• ​Test를 도와주는 유틸 모듈
  • "@testing-library/jest-dom": "^4.2.4"
  • "@testing-library/react": "^9.5.0"
  • "@testing-library/user-event": "^7.2.1"

 

• npm start
  • react-scripts start
  • Starting the development server...

개발용 서버를 띄운다. 소스 코드가 수정되었을때, 다시 컴파일 하고 웹페이지를 새로고침한다.

 

 

• npm run build
  • react-scripts build
  • Creating an optimized production build...​

 

npm install serve -g
serve -s build

• serve라는 패키지를 전역으로 설치합니다.
• serve 명령어를 -s 옵션으로 build 폴더를 지정하여 실행합니다.
  • ​-s 옵션은 어떤 라우팅으로 요청해도 index.html 을 응답하도록 합니다.

 

 

 

• ​npm test
  • ​react-scripts test
  • Jest 를 통해 test code 를 실행합니다.

 

 

 

• ​npm run eject     ->       ​react-scripts eject  

    -> eject를 이용하면, cra로 만든 프로젝트에서 cra를 제거한다. 이는 돌이킬 수 없기 때문에 결정하기 전에 신중해야 함. 보통 cra내에서 해결이 안 되는 설정을 추가해야 할 때 한다.

 

최근에는 cra내에 여러가지 기능들을 할수 있도록 도와주고 있어서 굳이 eject를 하지 않아도

해결이 되는 경우들이 있다 확인 잘해보자

 

돌이킬 수 없기 때문에 다시 한번 진행여부를 확인한다.

 

 

 

 

 

---

 

---

https://slides.com/woongjae/react2021#/13/17   패스트캠퍼스 react 수강, 공부중

React 2021

•