react 설정 하기 (리액트 환경 구축하기)

❔ React란?

React는 UI를 더 쉽게 만들기 위한 JS 라이브러리라고 한다
단순히 UI를 쉽게 만들기 위해서 개발된 라이브러리.

그리고 '복잡한 태그들(태그들의 조합)을 사용자 정의 태그로 묶어서 다른 파일에서 사용하면 편하지 않을까?'

라는 생각에서 나온 개념이 바로 React라고 합니다

• 사용자 정의 태그 'Component'
  : React에서는 사용자 정의 태그를 'Component'라고 부릅니다
• Component 사용의 장점
  : 가독성↑ / 재사용성↑ / 유지보수가 용이 / 코드 복잡도↓

• Toolchains
  : 개발자의 목표에 따라 필요한 개발환경, 도구 이런 것들을 모아서 한 번에 제공해주는 도구를 "Toolchain"이라고 부른다.
• npm
  : npm은 JavaScript 런타임 환경 Node.js 의 기본 패키지 관리자이다.(앱 스토어같은!)
• npx
  : npm과 비슷한 역할을 하지만 임시적으로 설치하고 프로그램이 알아서 삭제시킴, 사용할 때마다 설치를 해야한다. (일회용 설치 같은!)
• -> 사용하는 이유 : 최신버전 사용

 

🤗 React 개발환경 구축 하기

1. npm을 다운받기 위해서 node.js를 다운
2. 다운로드 후 cmd창에서 'npm -v'로 npm 설치 및 버전 확인
3. 설치 완료 후 'create-react-app -V' 설치 및 버전 확인

node.js 설치하기 18버전

npm install -g create-react-app

→  npx create-react-app . —version

→  버전확인 후

→  cd documents → npx create-react-app reactsite01(폴더명)

→ npx npm install -g npm@10.2.0 (버전입력) *에러나올시

1. React 환경 구축을 하고싶은 폴터로 이동해서 'create-react-app .' 명령어 실행

😯 실행하기

→ cd documents

→ cd reactsite01(폴더명)

→ npm start

→ code ./

** 사용시 안되는 이유중 하나는 버전이 안맞아서! * 버전확인 *

→  'npm run start'