React 환경설정(VS Code)

React 설치

설치 프로그램

• Node.js
• Visual Studio Code
• Create-React-App
  • 리액트 프로젝트 생성 도구
  • CRA 사용하면 간편하게 리액트 개발 환경 구축
  • 자동으로 다수의 패키지들 설치되고 Webpack 및 Babel 설정도 자동으로 설정
  • (나중에 번들링 옵션 변경 가능)
  • 초기 단계에서 Webpack과 Babel 직접 설정할 일 없음!!

Node.js / NPM 설치

• https://nodejs.org/en/
• 16.13.1 LTS 다운로드
• node-v16.13.1-x64.msi
• 기본 설치
• cmd (명렁 프롬프트) 창에서 버전 확인
  • node -v
  • npm -v

Visual Studio Code(VS Code) 설치

• https://code.visualstudio.com/download
• VSCodeUserSetup-x64-1.63.2.exe
• OS 맞춰서 다운로드
• 기본 설치 / 모두 선택 후 체크
• 설치 후 시작 시 한국어 언어 팩 설치 (필요에 따라)

React 설치

• cmd (명령 프롬프트) 창에서 npm create-react-app으로 설치 권장

npm

• 프로그램을 설치하는 프로그램
• 전역설치

npx

• 전역설치 대신 패키지를 실행하도록 npm에서 사용하는 패키지 러너
• create-react-app이라는 프로그램을 임시로 한 번 실행하고 지운다는 개념
• 장점
  • 컴퓨터 공간을 낭비하지 않고 설치 실행 때마다 새로 다운로드 하기 때문에 항상 최신 상태 (최신 버전의 React 사용)
  • 설치 시 패키지가 너무 많이 설치되는 것을 방지할 수 있음

프로젝트 생성

1. 작업폴더 생성

• 원하는 디렉토리 위치에 가서 프로젝트를 생성해야 함!!
• 한글경로가 포함되지 않도록 디렉토리 생성
  • C:\reactWorkspace\

2. 프로젝트 생성

• VSCode : 터미널 > 새 터미널 (Ctrl + Shift + `)

• 프로젝트 이름 : my-app (원하는 이름)

• npx create-react-app my-app // my-app이라는 프로젝트 폴더가 생성됨

• my-app (생성한 폴더)로 이동

  • cd my-app

• cmd에 npm start 누르면 프로젝트가 웹 브라우저로 실행

  • 경로: C:\reactWorkspace\my-app\

• http://localhost:3030/ 에 화면 출력됨

3. 프로젝트 종료

• Ctrl + C