[React] 1. 환경 설정

Do it! 리액트 프로그래밍 정석에 나온 내용을 기반으로 환경설정 도중 발생한 오류 수정기..

 

• NVM(Node Version Manager)로 NodeJs설치

    1. NVM(Node VersionManager) 설치

       설치 링크: github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

       설치된 버전 확인 명령: nvm -v

       이때 발생할 수 있는 에러는 아래와 같음

nvm could not be found or does not exist. Exiting

       설치 경로에 한국어가 들어가 있으면 nvm 명령이 제대로 먹지 않으니 주의...

 

    2. NodeJs 설치

       nvm install 8.10.0 -> 현업에서 가장 많이 사용하는 버전이라고 함

       (nvm install latest)

 

    3. nvm에 NodeJs 사용 설정

       nvm use 8.10.0

       (nvm use 15.6.0) 현시점 테스트 시 15.6.0이 최신 버전이었음

 

• yarn과 create-react-app설치

    1. yarn 설치 : npm install -g yarn

 

    2. create-react-app 설치

       create-react-app은 리액트 프로젝트에 필요한 패키지들을 묶어서 리액트 앱을 생성해주는 도구, 없으면 프로젝트에 필요한 패키지들을 직접 package.json에 추가해야 함

 

       설치 방법: yarn global add create-react-app

       (npm install -g create-react-app) 

       현업에서 8.10.0이 현업에서 가장 많이 사용되고 있다고 했는데 아래와 같은 에러가 발생함

The engin "node" is incompatible with this module. Expected version ">=10". Got "8.10.0"

       책 내용 깔끔하게 무시하고 npm 버전을 최신으로 깔아보기로 함(nvm install latest), 이번에는 동일 에러가 발생하지 않았는데 아래와 같은 또 다른 에러 발생

이 시스템에서 스크립트를 실행할수 없으므로 C:\Program Files\nodejs\yarn.ps1 파일을 로드할수 없습니다.

       이 에러는 PowerShell에서 yarn의 실행에 관한 권한이 없어서 발생한 거라서 관리자 권한으로 PowerShell 실행 후 Set-ExecutionPolicy RemoteSigned 명령어 입력하여 권한을 부여해주고 다시 yarn 명령 입력 시 정상 동작하는 것 확인 가능함

       이때 create-react-app을 설치할 때, 에러 없이 정상적으로 설치되었으나, 설치되어있는지 확인해 보기 위해 create-react-app명령을 작성했을 때 또 아래 같은 에러가 발생

'create-react-app' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할수 있는 프로그램이름으로 인식되지 않습니다.

       디렉터리들을 뒤져보아도 create-react-app이라는 프로그램이 제대로 설치가 된 것 같지 않아서 그냥 yarn이 아니라 npm으로 설치하면 정상적으로 설치가 되는 거 같음..(npm install -g create-react-app)

       -> 이렇게 할거면 뭐하러 npm 버전을 최신으로 했는지..

           결국 삽질한듯 하다..

 

    3. 앱 생성

       create-react-app test(react project name)

 

    4. 앱 구동

       cd test(생성된 react project로 이동

       yarn start 

       -> 잠시 기다리면 localhost:3000에 테스트 웹이 실행됨

 

 

이상으로 책에 나오는대로 환경 설정을 해봤는데 책에 나오는 실습 환경이 MacOS인지라 Windows에서 실습하기 위해서는 자잘한 오류들은 수정하면서 따라가야 할듯하다..