React 프로젝트 생성

토이 프로젝트를 진행하려고 오랜만에 React 프로젝트를 만들어 보았다!

 

1. node 설치

먼저 맞는 사양의 node를 설치한다.

그 다음 잘 설치되었는지 노드의 버전 확인!

node --version

https://nodejs.org/ko/download/

다운로드 | Node.js

 

 

 

2. yarn 설치

개발에 yarn을 사용할 것이므로 yarn을 설치해주었다.

npm install -g yarn

yarn --version

yarn 버전을 확인해보려고 yarn을 실행하면 이 시스템에서는 스크립트를 실행할 수 없으므로... 라는 오류가 뜬다.

시스템의 설정에서 스크립트를 실행할 수 있는 권한이 부여되어있지 않은 상태라서 해당 작업 명령을 수행할 수 없어서 발생하는 오류라고 한다.

 

 

그렇다면 권한을 부여해보자.

파워쉘을 관리자 권한으로 실행하여 아래의 명령 실행

Set-ExecutionPolicy RemoteSigned

 

그럼 yarn이 정상적으로 실행된다.

 

참고 : https://hellcoding.tistory.com/entry/VSCode-%EC%98%A4%EB%A5%98-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C

VSCode 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로 ...

 

 

 

 

3. create-react-app

마지막으로 npx create-react-app 으로 shop-front라는 프로젝트를 생성해 주었다.

npx create-react-app shop-front

 

 

 

 

 

4. 프로젝트 실행

생성된 shop-front로 이동해서 실행해 주자

yarn start

 

localhost:3000으로 접속하면 (리액트의 기본 포트는 3000이다!) 리액트 화면이 정상적으로 보이는 것을 확인할 수 있다.