(react) create react app

폴더 구조와 파일

npx create-react-app으로 설치를 하게되면 아래와 같은 폴더 및 파일이 만들어짐.

 

 

이때 다음 파일은 이름을 수정하면 절대절대 노노노~

• public/index.html
  : 페이지 템플릿임.
• src/index.js
  : 자바스크립트의 시작점임.

위 2개 파일 이외에 다른 파일은 삭제 또는 변경 가능하며, src폴더 내에 폴더 생성 등이 가능하며, webpack에서 처리 가능하도록 js나 css는 src내부에 위치시켜야 함.

 

 

https://create-react-app.dev/docs/folder-structure/

Folder Structure | Create React App

 

 

 

NPX

• NPX는 Node Package Execute의 뜻으로 npx는 npm 패키지를 실행하는 것
• npm은 패키지 매니저를 담당한다면, npx는 실행을 담당.
• 사용 예로 npx create-react-app [패키지 이름] 과 같이 명령을 내리면 로컬이나 글로벌에 create-react-app패키지가 있는지 찾아보고 없으면 원격에서 찾아 다운로드 후 실행함. 이때 [패키지 이름]으로 react 프로젝트가 세팅되며 이후 명령어 실행이 종료되면 create-react-app패키지는 다시 삭제됨.

npm	npx
패키지 설치 및 관리	패키지 실행
로컬, 글로벌	로컬, 글로벌 찾은 후 없으면 다운로드
설치 버전 그대로 사용	최신 버전 사용
프로젝트에 필요한 패키지 설치 시	일회성으로 패키지 실행 시

 

 

 

https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b

Introducing npx: an npm package runner

 

https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm

Difference between npx and npm?