[Asac 웹풀스택] 리액트 설치 , 돔트리, 명령어 ,취약점

[Asac 웹풀스택] 리액트 설치 , 돔트리, 명령어 ,취약점 

 

[리액트 공부노트] 리액트 명령어 

 

npm start:
이 명령어를 실행하면 개발 서버가 시작됩니다. 개발 서버는 프로젝트를 브라우저에서 실시간으로 확인할 수 있는 환경을 제공합니다.

npm run build:
이 명령어를 실행하면 애플리케이션을 프로덕션용 정적 파일로 번들링합니다. 이렇게 번들링된 파일은 배포를 위해 사용됩니다.

npm test:
이 명령어를 실행하면 테스트 러너가 시작되어 프로젝트의 테스트를 실행합니다. 유닛 테스트 및 통합 테스트 등을 실행할 수 있습니다.

npm run eject:
이 명령어는 프로젝트에서 사용 중인 도구와 의존성을 프로젝트 디렉토리로 복사하고, 빌드 설정 및 스크립트를 조정하는 작업을 수행합니다. 주의: 이 작업을 실행하면 돌이킬 수 없는 변경이 발생할 수 있습니다.

마지막으로, npm notice 라인은 npm의 새로운 메이저 버전 (8.19.4에서 9.8.1)이 나왔다는 알림입니다. 해당 버전의 변경 내역은 제공된 링크를 통해 확인할 수 있습니다. 업데이트하려면 npm install -g npm@9.8.1 명령을 사용하면 됩니다.

[리액트 공부노트] npx랑 npm이랑 뭐가 다르지?

 

npm (Node Package Manager):
npm은 Node.js 패키지를 관리하고 배포하기 위한 패키지 매니저입니다. 개발자들은 npm을 사용하여 프로젝트에 필요한 패키지(라이브러리, 모듈 등)를 설치하고 관리할 수 있습니다. npm은 프로젝트의 종속성(dependencies)을 관리하고, 패키지를 설치하거나 업데이트하는 데 사용됩니다. 예를 들어, npm install package-name 명령을 사용하여 패키지를 설치할 수 있습니다.

npx:
npx는 npm 패키지를 실행하고 관리하기 위한 도구입니다. 주로 실행 가능한 스크립트, 명령행 도구, 라이브러리 등을 임시로 사용하고자 할 때 사용됩니다. npx를 사용하면 로컬에 설치하지 않고도 npm 패키지를 실행할 수 있습니다. 예를 들어, npx create-react-app my-app 명령을 사용하여 create-react-app 패키지를 설치하지 않고도 React 애플리케이션을 생성할 수 있습니다.

간단하게 말해서, npm은 패키지를 설치하고 관리하는 패키지 매니저이며, npx는 패키지를 임시로 실행하거나 사용하는 데 도움을 주는 도구입니다. npx를 사용하면 패키지를 설치하지 않고도 커맨드를 실행할 수 있어 편리한 경우가 많습니다.

 

 

[리액트 공부노트] 리액트 취약점 , 버전 명령어 npm audit fix --force

 

npm audit fix --force

강제 버전 검사하는 명령어 취약점 버전업그레이드 조언함

 

 

[리액트 공부노트]  node.js 설치

 

node.js가 곧 npm이다.

 

 

C:\asac_code\frontend>mkdir react-workspace

C:\asac_code\frontend>cd react-workspace

C:\asac_code\frontend\react-workspace>npx create-react-app todo-react-app

 

[리액트 공부노트] material icon/ui  설치하기 명령어

 

material-ui 패키지 설치


npm install @material-ui/core


npm install @material-ui/core --force: --force 플래그를 사용하여 설치 시도.
npm install @material-ui/core --legacy-peer-deps: --legacy-peer-deps 플래그를 사용하여 설치 시도.

 

대신성공 명령어 : npm install @material-ui/core --legacy-peer-deps: --legacy-peer-deps

 

 

성공명령어

npm install @material-ui/core@4.11.2 --legacy-peer-deps
npm install @material-ui/icons@4.11.2 --legacy-peer-deps

 

 

[리액트 공부노트] index 돔트리

 

 

[리액트 공부노트] index 돔트리