[ReactJS] Create React App(리액트 개발환경 설정)

리액트는 컴포넌트 단위로 모듈을 관리할수 있다는 장점이 있습니다.

버튼하나를 관리함에도 컴포넌트를 만들어놓고 재사용이 가능하다면 참 편리하겠죠??

코드를 작성할때도 편리하겠지만 수정에도 매우 편리한 면이 있을것입니다.

 

과거에는 Babel이나 Webpack을 하나하나 설치를 해주는 번거로움이 있었습니다.

하지만 이제는 create-react-app Command로 바로 시작할수 있게 되었습니다.

또한 바벨은 최신자바스크립트 문법을 지원하지 않는 부라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌수있게 변환시켜주는 역할을 합니다.

아주 예전에 웹사이트를 만들 때는 HTML, CSS, JavaScript파일 몇개로만 만들었었는데요.

이제는 규모가 커지면서 라이브러리나 프레임워크를 많이 쓰고있습니다.

그래서 이렇게 복잡하게 되어있는 구조들을 웹팩을 이용하여 묶어주고 있습니다.

 

리액트를 설치하기 위해서는 우선 

npx create-react-app .

명령을 통해 설치할수 있습니다.

저같은 경우에는 이미 설치가 되어있어서 에러가 발생했었는데요.

 

PS C:\Study_NodeJS_React\01_basic\client> npx create-react-app .

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).


Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

친절하게 두가지 방법중에 한가지를 선택하고 명령을 다시싱행하라고 이야기도 해주네요!

그래서 지우고 다시 설치를 했습니다.

 

PS C:\Study_NodeJS_React\01_basic\client> npm uninstall -g create-react-app
removed 67 packages in 0.894s
PS C:\Study_NodeJS_React\01_basic\client> npx create-react-app .
npx: 67개의 패키지를 8.179초만에 설치했습니다.

Creating a new React app in C:\Study_NodeJS_React\01_basic\client.

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


> core-js@3.20.3 postinstall C:\Study_NodeJS_React\01_basic\client\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js-pure@3.20.3 postinstall C:\Study_NodeJS_React\01_basic\client\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

+ cra-template@1.1.3
+ react@17.0.2
+ react-dom@17.0.2
+ react-scripts@5.0.0
added 1370 packages from 614 contributors in 125.309s

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


Installing template dependencies using npm...
npm WARN @apideck/better-ajv-errors@0.3.2 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself.
npm WARN fork-ts-checker-webpack-plugin@6.5.0 requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ web-vitals@2.1.4
+ @testing-library/user-event@13.5.0
+ @testing-library/jest-dom@5.16.1
+ @testing-library/react@12.1.2
added 33 packages from 81 contributors in 10.934s

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

Removing template package using npm...

npm WARN @apideck/better-ajv-errors@0.3.2 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself.
npm WARN fork-ts-checker-webpack-plugin@6.5.0 requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 1 package and audited 1403 packages in 6.437s

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

found 2 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Success! Created client at C:\Study_NodeJS_React\01_basic\client
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 C:\Study_NodeJS_React\01_basic\client
  npm start

Happy hacking!

설치하는데 시간이 상당히 걸립니다.

설치된게 또 어찌나 많은지... 스크린샷을 찍어서 올리려고했는데 한 화면에 들어오지도 않네요 ,,

역시 세로모니터를 써야하나..

리액트가 설치된후 구조입니다. 너무 친절하게 깃이그노어랑 리드미까지 생성해주었네요!

 

디렉터리의 구조를 보기전에 일단 실행먼저 시켜볼까요??

npm run start

해당 명령으로 리액트를 실행시킬수 있습니다.(경로주의)

실행이 잘 되네요!

 

어떻게 실핼될수 있을까요??

npx로 받아온 리액트의 package.json을 보면 이렇게 설정이 되어있는데요.

scripts부분의 start를 보시면 리액트를 시작하는 명령인것같습니다.

만약 start말고 다른 명령으로 실행시키고 싶으시다면 start대신 다른 단어로 바꾸어주면됩니다.

 

실행시에 나오는 화면은 App.js 부분이 랜더링 되어 나온 화면입니다.

만약 해당부분에서 일부분을 수정해서 다시 출력된 화면을 본다면 바뀌어서 나오게 됩니다.

 

index.js를 보면 App.js 부분이 해당 위치에 존재하게 되는건데요.

만약 이부분도 수정을 해볼까요??

바뀐대로 나오게 됩니다!

해당위치에 보여주고싶은 컴포넌트를 넣어주면 되겠네요!

 

또 index.js에 보면 document.getElementById('root')가 있는데요.

 

public - index.html파일로 가보겠습니다.

파일에 보면 id가 root인 div태그가 있는데 index.js에서는 해당 영역에 보여줄 것들을 정의해주는 것입니다.

 

 

그리고 위에서 웹팩에 대한 이야기를 잠깐 했었는데요.

웹팩은 src안에 있는부분만 관리를 해주고 public은 관리를 해주지 않습니다.

이미지파일이나 기타 파일을 app에 넣고 싶다면 src부분에 넣어야 웹팩의 관리를 받을 수 있습니다.

 

 

방금전 리액트를 설치할떄는 npm명령이 아니라 npx명령을 사용했었는데요.

npm은 node package maneger의 줄임말이며 npm으로 많은것을 할수 있는데 가장 대표적으로 레지스트리 저장소 역할을 합니다.

라이브러리를 설치하면 디펜던시에 담기게 되는데 이런 라이브러리들을 담고 있는 레지스트리 역할을 하기도 합니다.

 

어플리케이션을 킬때 npm run start와 같이 빌드를 해서 배포를 해야하는데 npm run build를 통해 빌드를 하게 되는데 이럴때도 npm을 사용하고 있습니다.

npm에 관한 것들 즉 이름이나 버전, 스크립트에 관한것들은 package.json파일에 정의가 되어있습니다.

 

npm을 사용할때 local로 다운받을때도 있고 global로 다운받을때도 있는데요.

npm install 모듈 -g

이처럼 -g 옵션을 붙이면 글로벌로 다운을 받게 되는데요.

글로벌로 다운을 받는다면 프로젝트 안에서만 다운받아지는게 아니라 컴퓨터 안에 다운을 받게 됩니다.

 

만약 -g옵션을 붙이지 않는다면 로컬에 다운받게되어 프로젝트 안에만 즉, node_modules 폴더안에 다운받아지게 됩니다.

 

원래는 create-react-app을 할때

npm install -g create-react-app

을 사용하여 global 디렉토리에 다운을 받았었는데 이제는 npx를 이용하여 그냥 create-reac-app을 이용할수 있습니다.

다운을 받지 않고 node 레지스터리에 있는것을 가져다 쓰는것인데요.

이렇게 사용할 경우 Disk space를 낭비하지 않을수 있고 항상 최신버전을 사용할수 있다는 큰 장점이 있습니다.