📘 [Recat] React 시작하기

2025년 04월 01일 in Dev / Frontend on #React #Web

[Recat] React 시작하기

1. node.js 설치 Node.js — Node.js® 다운로드

 node -v
 npm -v 

설치 버전 확인

2. vscode 설치 Visual Studio Code - Code Editing. Redefined

• 추천 확장 프로그램:
  • ESLint: 코드 품질 유지
  • Prettier: 코드 자동 정렬
  • Auto Close Tag: 자동 태그 닫기 기능

3. React project 생성 및 구동

vscode를 실행하고 원하는 경로의 폴더에서 열어준다.

터미널 열기 View > Terminal’ 메뉴를 선택하거나 Ctrl + ` 키

# npx react 프로젝트 생성
npx create-react-app [프로젝트명]

# npm reeact 프로젝트 생성
npm init react-app .

# yarn 설치
npm install -g yarn
# yarn react 프로젝트 생성
yarn create react-app [프로젝트명]

npm과 npx는 node.js를 설치하면 사용가능 yarn은 별도로 설치후 프로젝트 생성 npm, npx, yarn 패키지를 관리해주는 도구들인데 각각의 역할과 특징이 있다. [Node.js] Node.js 생태계의 필수 도구 npm, npx, yarn 비교

명령어가 실행되면 프로젝트 생성에 필요한 패키지를 다운로드 해준다. package.json 생성 확인(package.json 파일은 프로젝트에 대한 정보를 갖고 있는 파일이다. 그리고 dependencies와 같은 속성을 활용하여 프로젝트에 의존된 라이브러리를 관리한다.) react 프로젝트를 생성해준다. 이제 프로젝트 구동을 해본다.

# npm npx 설치시
npm start
# yarn 설치시
yarn start

로컬 서버가 구동되면 localhost접속 해서 확인

[!NOTE] > vscode에서 npm 명령어가 먹히지 않을경우 FullyQualifiedErrorId : UnauthorizedAccess 오류 해결 방법 > 문제의 원인은 PowerShell의 Execution Policy 정책이 기본 설정값이 문제이다. 스크립트 실행이 불가하다. > 정책 설정값을 변경하면 해결된다.

관리자 모드로 Windows PowerShell 실행

    # 현재 권한 확인
    Get-ExecutionPolicy
    # 권한 설정
    Set-ExecutionPolicy RemoteSigned
	모두 예 선택
	# 현재 권한 확인
	Get-ExecutionPolicy

📑 Reference

---

• [JS] npm start와 npm run dev의 차이 - 코딩하는 경제학도
• [Node.js] Node.js 생태계의 필수 도구 npm, npx, yarn 비교
• 이미지 출저 Freepik | 올인원 AI 크리에이티브 툴

---