[React] React 시작하기

npm install -g create-react-app
npx create-react-app my-app

cd my-app
npm start

• node_modules/ : 프로젝트에 사용되는 외부 라이브러리와 모듈이 저장되는 폴더입니다. 이러한 라이브러리와 모듈은 npm install 명령어를 통해 설치되며, package.json 파일에 명시됩니다.
• public/ : 정적 파일들이 저장되는 폴더로, HTML, 이미지, 아이콘 등이 포함됩니다. 주요 파일로는 index.html이 있으며, 이는 리액트 앱의 기본 템플릿으로 사용됩니다.
• src/: 애플리케이션의 소스 코드가 저장되는 폴더입니다. 이 폴더에는 컴포넌트, 스타일, 이미지 등의 파일이 포함됩니다. 주요 파일들은 다음과 같습니다.
  • index.js : 리액트 앱의 진입점입니다. ReactDOM.render()를 사용하여 App 컴포넌트를 index.html에 렌더링합니다.
  • App.js : 애플리케이션의 메인 컴포넌트입니다. 이 컴포넌트에서 다른 컴포넌트들을 불러와 렌더링합니다.
  • App.css : App 컴포넌트의 스타일을 정의하는 CSS 파일입니다.
  • App.test.js : App 컴포넌트에 대한 테스트 코드가 저장되는 파일입니다.
  • serviceWorker.js : Progressive Web App(PWA) 기능을 구현하는데 사용되는 서비스 워커 파일입니다. 이 파일을 수정하여 오프라인 경험, 백그라운드 동기화 등의 기능을 구현할 수 있습니다.
• package.json : 프로젝트의 메타데이터와 의존성을 담고 있는 파일입니다. 프로젝트에 사용되는 라이브러리, 모듈, 스크립트 등이 이 파일에 명시됩니다.

 

* npm vs npx

• npm 은 노드 패키지 관리자를 뜻한다.
• node.js를 설치하면 시스템에 설치된다.
• Node 프로젝트의 필수 패키지 및 모듈은 npm을 사용하여 설치된다.
• 패키지에는 모듈에 필요한 모든 파일이 포함되어 있다.
• npm 5.2.0 버전 이상부터 npm을 설치하면 자동으로 npx 가 설치된다.
• 즉, 새로운 패키지 관리 모듈이 아닌, npm의 5.2.0버전부터 새로 추가된 도구이다. 따라서 npm과 비교대상이 아니라, npm을 좀 더 편하게 사용하기 위해 npm 제공해주는 하나의 도구이다.
• 패키지를 설치하지 않고도 npm 레지스트리에서 원하는 패키지를 실행(Excute) 할 수 있다.
• 실행 즉, npm package runner 로써 npx는 일회용 패키지 로써 사용된다.