React TutorialA01 프로젝트 생성과 단순 출력

 

 

 

준비

NodeJs 2022.11.18 - NodeJs 설치

Vsc 2020.07.03 - Vsc, VSCode(Visual Studio Code) 설치

 

Npx

Nodejs를 설치하고나면 npm명령어를 사용할 수 있다.

npx는 npm에 올라가있는 package를 바로 실행해서 설치시켜주는 도구다.

 

프로젝트 생성

cmd를 실행해 프로젝트를 만들 위치에 이동해서 아래 프로젝트 생성 명령어를 입력하면 자동으로 구성한다.

C:\Test>npx create-react-app testprj1

 

실행된 예제 화면

C:\Temp>npx create-react-app testprj1
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\Temp\testprj1.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1393 packages in 2m

209 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 56 packages in 8s

209 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1449 packages in 4s

209 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created testprj1 at C:\Temp\testprj1
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd testprj1
  npm start

Happy hacking!

C:\Temp>

 

프로젝트 실행

생성한 testprj1의 폴더를 Vsc로 연다.

터미널 창을 새로 열어서

npm start

를 입력하면 웹서비스가 실행되며 웹브라우저창이 자동으로 열리면서 기본 화면을 보여준다.

 

웹페이지 수정

app.js파일을 열어 수정하면 자동으로 화면이 갱신 된다.

 

 

기타1

"package.json"파일에 필요한 구성요소들이 정의되어 있다. 이 구성 정보를 기반으로 "node_modules"폴더를 언제든 재 구성할 수 있다. 그래서 공유시 용량이 많은 node_modules폴더를 제외해도 문제 없다.

 

기타2

앞에서 사용한 명령어

npm start

에 대한 구체적 설명.

 

package.json파일 속에 start에 대한 역할이 정의되어 있다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

npm build등이 기본적으로 구성되어 있다.