본문 바로가기

Front-End/React

[React] 220416 학습일기

http://www.yes24.com/product/goods/97782392

 

초보자를 위한 리액트 200제 (React) - YES24

따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나

www.yes24.com


그동안 너무 정신없이 리액트를 배우다보니 기초가 와르르..

그래서 책을 샀다.

공부해보자.

 


1.

npm : node package manager

 

yarn: 페이스북에서 만든 패키지 관리 도구. npm에 비해 캐싱, 신뢰성 등이 개선됨.

 

 

2.

npm install -g yarn

으로 yarn을 설치해주었다.

 

여기서 -g는 무엇이냐? 


Q. npm install -g 랑 npm install 차이가 뭐야?

A.

npm install 명령은 프로젝트의 package.json 파일에 명시된 모듈들을 로컬로 설치합니다.

npm install -g 명령은 npm으로 전역으로 설치할 수 있는 모듈을 설치합니다. 이러한 모듈은 컴퓨터 전체에서 사용할 수 있으며, 일반적으로 시스템 또는 명령어 줄 도구와 같이 전역적으로 사용되는 모듈입니다.

예를 들어, nodemon과 같은 모듈을 전역으로 설치하면, 터미널에서 nodemon을 실행하여 파일 변경 사항을 자동으로 감지하고 서버를 재시작할 수 있습니다.

반면에, npm install 로컬로 모듈을 설치하면 해당 프로젝트에서만 사용할 있습니다. 이는 프로젝트에 필요한 종속성을 로컬로 유지하면서, 다른 프로젝트와 충돌하지 않도록 하는데 도움이 됩니다.

 


-g로 설치해야 모든 프로젝트에서 사용할 수 있는 것 같다.

 

 

그리고 나서

npm install -g create-react-app

을 했는데

이렇게 뜬다.

좀 찝찝해서 찾아봤는데 일단은 무시해도 되는 것 같다.

 

 

3.

Q. npm 과 npx의 차이는?

A.

npm과 npx는 모두 Node.js 패키지 매니저입니다.

npm은 Node.js 패키지 관리자로서, 프로젝트의 종속성을 관리하고 패키지를 설치하고 업데이트하는 데 사용됩니다. npm을 사용하여 설치된 패키지는 node_modules 폴더에 저장되며, package.json 파일에서 종속성을 관리합니다.

npx는 Node.js 패키지 실행 도구로서, 전역으로 설치하지 않고도 패키지를 실행할 수 있도록 도와줍니다. npx는 로컬로 설치된 패키지를 사용할 수 있으며, 패키지를 다운로드하고 실행할 수 있습니다. npx를 사용하면 일회성 명령을 실행하거나, 로컬로 설치된 패키지를 실행하거나, 다양한 버전의 패키지를 실행할 수 있습니다.

예를 들어, create-react-app은 프로젝트를 시작하는 데 사용되는 패키지입니다. npm으로 create-react-app을 전역으로 설치하면 어디에서든 create-react-app 명령을 실행할 수 있습니다. 하지만 npx를 사용하여 create-react-app을 실행하면 전역으로 설치하지 않고도 프로젝트를 시작할 수 있습니다. 또한 npx를 사용하면 항상 최신 버전의 create-react-app을 사용할 수 있습니다.

따라서, npm 패키지를 설치하고 관리하는 사용되며, npx 일회성 명령 또는 로컬로 설치된 패키지를 실행하는 사용됩니다.

 

 

4.

create-react-app client

요로케 생겼다.

 

VSCode로 client 폴더를 실행해서

yarn start

를 해주면 이렇게 react 서버가 실행된다.

'Front-End > React' 카테고리의 다른 글

[React] useMemo  (0) 2023.12.27
[React] Describing the UI  (0) 2023.06.05
[React] 230501 학습일기  (0) 2023.05.01
[React] 220423 학습일기  (0) 2023.04.24
[ReactJS] 코드 모음  (0) 2023.04.03