React : 개발환경 구축

✅ 운영체제 : Windows 11

---

🖥️ React 프로젝트 생성

📑 참고 자료
React 공식문서_새로운 React 앱 만들기
코딩애플_리액트 React 설치와 개발환경 셋팅 (2022 ver)
Create React App 공식 Github
Create React App 공식 문서
Create React App 공식 문서_Getting Started

Create React App

🔸 npm 설치 및 실행

npm init react-app my-app

cd my-app
npm start

🔸 npx 설치 및 실행

• Node.js 13버전 이하는 사용 불가 ▶ 상위(최신) 버전 설치
• npm 5.6 혹은 상위 버전 필요

npx create-react-app my-app

cd my-app
npm start

🔸 yarn 설치 및 실행

yarn create react-app my-app

cd my-app
yarn start

npm? npx? yarn?

📑 참고 자료
[Node] npm vs npx vs yarn
류시명_npm, npx, yarn 구분하기

🔶 npm

• 자바스크립트를 위한 패키지 관리자 ▶ Node.js와 함께 설치
• 모듈이 업데이트 되었는지 안되었는지 확인 불가능
• 업데이트를 진행했을 때 변동사항이 생겨 다른 프로젝트에도 영향을 끼칠 수 있음
• create-react-app은 보일러 플레이드에 치명적

🔶 npx

• npm 5.2버전부터, npx 기본 패키지로 제공
• npm, yarn을 글로벌 패키지(-g)로 설치하지 않고도 명령을 사용할 수 있게 해주는 패키지 실행자
• create-react-app같은 보일러 플레이트 모듈에 효과적
• npx를 통해 설치하면 매번 최신 버전만을 가져와 설치해 줌 ▶ 항상 최신 버전!

🔶 yarn

• 개선된 npm ▶ 성능과 보안 문제 해결
• 안전하고 안정적임
• 버전을 어디에서나 같게 만들어 버그를 줄임으로써 보안을 높임
• npm보다 점유율이 낮아 npm에 비해 자료와 문서가 적음

npm	npx	yarn
기본적, 보편적인 Node.js package manger로 다양한 레퍼런스 많음	npm의 실행도구로 패키지를 다운 박지 않고 실행만 할 수 있음	npm과 마찬가지로 Node.js package manager이지만, npm보다 보안이 뛰어남 (단, 덜 보편적이어서 레퍼런스가 적음)

---

🍎 수정 및 추가

🗓️ 2022.02.21

• 썸네일 사진 변경

🗓️ 2022.05.08

• 글 전체 수정 ✨2022.ver✨

🗓️ 2022.05.10

• 오타 수정

🗓️ 2022.05.11

• npm, yarn 설치 방법 추가