window에서 create-react-app 을 사용하여 React 시작하기

윈도우에서 React를 사용하기 위한 방법을 아라보자^^

 

우선 아래것들을 설치해야한다고 한다.

↓↓↓↓↓↓↓↓↓↓

Node.js / Yarn / 코드 에디터 / Git bash

 

1. Node.js 

Node.js 공식홈페이지 (https://nodejs.org/) 에서 다운

Node.js

 

2. Yarn 

Yarn도 공식 홈페이지 (https://classic.yarnpkg.com/) 에서 다운

Yarn

npm을 사용중이고 익숙하다면 굳이 설치할 필요는 없다는데 빠르다고 해서 일단 깔아봄ㅎㅎㅎ

 

3. 코드 에디터 

저는 Visual Studio Code를 사용합니다. https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

4. Git bash 

윈도우의 cmd, 리눅스의 terminal과 같은 역할을 하며 Git을 설치하면 자동으로 설치된다고 한다. (http://git-scm.com/)

Git

그런데 Git을 설치하려다가 Visual Studio Code 확장프로그램에 이런게 있길래 허겁지겁 이걸로 설치했다.ㅎㅎ

 

 

이제 React를 설치하기에 앞서 준비해야할 것들은 모두 준비가 되었습니다.

제대로 설치가 되었는지 버전을 확인해줍니다.

 

 

create-react-app 모듈 설치 

cmd창을 열고 아래와 같이 입력해주세요.

npm install --global create-react-app

별다른 문제 없이 잘 설치가 되었다면 좋았겠지만!!

'이 시스템에서 스크립트를 실행할 수 없으므로 ~~~~대충 리액트가 설치되는 경로~~~~파일을 로드할 수 없습니다. 블라블라블라' 에러가 떴다...아 왜...

 

바로 검색해보니 윈도우에서 권한 문제로 인해 발생하는 문제라하여 아래 명령어로 해결!!

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

다시 한번 create-react-app 모듈을 설치

 

여기서부터는 vs code를 열어 리액트 프로젝트를 진행할 폴더 경로에서 터미널창을 띄워서 진행하였다.

(begin-react는 프로젝트를 진행할 폴더의 이름)

create-react-app begin-react

이렇게 입력하면 아래처럼 뭐가 막 파바바바박 진행됨.

 

뭐가 막 파바바박 되다가 완료되면 아래와 같이 뜬다.

 

드디어 begin-react라는 폴더 안에서 React 프로젝트를 시작할 준비가 끝났다 ㅠㅠ

이제 설레는 마음으로 npm start 또는 yarn start라고 입력해주면?!

 

한 번에 떠주면 너무나도 감사한 썩쎄스풀리!!!라는 희망찬 메시지와 함께 loaclhost:3000으로 브라우저가 열리게된다.

꺅!!!

 

그리고 터미널에서 서버를 종료할땐 ctrl + c를 누르면 된다.