JS/React

React - CRA 세팅하기

shin96bc 2024. 3. 2. 21:57

먼저 React 를 셋팅하기전에 먼저 node.js 가 필요합니다.

명령어로 프로젝트 생성하기

  • 임의의 폴더를 하나 만들고 터미널을 켜서 그 폴더의 경로로 이동합니다.
  • 아래의 명령어를 입력합니다.
npx create-react-app 프로젝트명 

# ts를 사용하는 경우
npx create-react-app 프로젝트명 --template typescript

 

IntelliJ 사용

  • File -> new -> project
  • 아래의 사진처럼 세팅해줍니다.
    • 생성할 프로젝트의 이름
    • 리액트 프로젝트를 생성할 위치
    • 웹이면 React, 앱이면 React Native
    • node 의 위치를 지정
    • 아래의 명령어를 입력합니다.
    • npx create-react-app
    • 추가적으로 TypeScript 로 개발할거라면 5번아래의 Create TypeScript Project 를 체크해줍니다.
    • 프로젝트를 실행하는 명령어
    • npm start // 또는 yarn start // yarn 사용 권장// yarn 이 없다면 설치 npm install -g yarn

 

혹시나 50프로의 확률로 안될 때 해결책

  • window 의 경우에는 PowerShell 을 관리자 권한으로 실행해서 아래의 명령어를 입력합니다. (허가되지 않은 스크립트 어쩌구하는 에러가 떴을 때)
  • Set-ExecutionPolicy Unrestricted # y/n 가 뜨면 y 를 입력합니다
  • MacOs 의 경우에는 명령어 앞에 sudo를 붙여서 입력합니다. (맥북은 permission 어쩌구하는 권한 에러가 떴을 때)
  • sudo npx create-react-app 프로젝트 이름 # password 를 입력하라고 하면 맥북 비번을 입력하시면 됩니다.

프로젝트가 잘 생성이되면 완료입니다.

  • 터미널을 열어서 리액트 프로젝트 위치로 이동해서 npm start 명령어를 입력했을 때 리액트 기본화면이 뜨면 성공입니다.
  • React의 메인페이지인 App.js 파일에서 글자를 바꿨을 때 바뀌어야합니다.

'JS > React' 카테고리의 다른 글

React - Component  (0) 2024.03.04
React - State  (0) 2024.03.03
React - 기본 구성 & 문법  (0) 2024.03.02
React - Vite 세팅하기  (0) 2024.03.02
React란?  (0) 2024.03.02