[Do it 리액트 프로그래밍 정석] : 맥(mac) 리액트 개발환경 설치(정리X,두서X)

책을 보면서 맥에다가 리액트 설치하다가 책과 좀 다른 부분들이 있어서 정리 (책은 윈도우 기준...)

현재 내가 사용중인 도구 mac m1 인데 기본 shell이 zsh이다. (shell 종류도 bash, zsh 등 있음.. 정리 잘해주심...ㄱㅅ)

homebrew 설치하기 

Homebrew란, macOS 운영 체제에서 사용되는 패키지 관리자.

패키지 관리자는 소프트웨어나 라이브러리 등을 설치, 업데이트, 제거하는 프로그램을 관리하는 도구.

 

Command + space 단축키로 terminal 검색 후 커맨드 창에 아래 명령어들 입력

**아래 명령어 입력1

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

**아래 명령어 입력2

echo 'eval "$(/opt/home brew/bin/brew shellenv)"' >> /Users/kimnayoung/.zprofile

**아래 명령어 입력3

eval "$(/opt/homebrew/bin/brew shellenv)"

Homebrew 설치 완료 확인 

which brew 쳤을 때 경로 나오거나

brew —version 쳤을 떄 버전 정상으로 나오면 설치 완료 된 것임.

이렇게 home brew 설치 완료함. 

brew 명령어를 사용해서 node version manager를 설치함. 

1. brew를 통해서 nvm(node version manager) 설치하기 -> 지금 쉘 껐다가 켜면 특정 버전 적용이 풀리는데 이 명령어 때문인듯 참고1 /  참고2)

brew install nvm

2. nvm 디렉토리 생성 (이건 nvm 설명 잘해놓은 블로그 감사..)

mkdir ~/.nvm 

3. 환경변수 설정하기

bash 환경변수 파일은 

vi ~/.bash_profile

zsh 환경변수 파일은 

vi ~/.zshrc 

3. 위의 파일중 하나에다가 아래 설정 복붙  나는 vi ~/.zhhrc로 진행

# ~/.bash_profile 설정

export NVM_DIR="$HOME/.nvm"

[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm

[ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion"  # This loads nvm bash_completion

# ~/.zshrc 설정

export NVM_DIR=~/.nvm

source $(brew --prefix nvm)/nvm.sh

4. 적용하기(source 명령어) 

# bash 적용

source ~/.bash_profile

or

# zsh 적용

source ~/.zshrc

# 이 후에 책에 나오는 버전대로 노드제이에스 설치진행 버전까지 확인함 (아래 명령어로)

mvm install 10.10.0

nvm use 10.10.0

node-v

# yarn설치하고 리액트 앱을 생성해봄 

npm install -g yarn 

yarn create react-app <프로젝트명> --scripts-version 2.1.7

하지만 해당 에러 메시지가 뜨면서 설치가 프로젝트 생성이 안됨.... 

에러 내용 

error fs-extra@10.1.0: The engine "node" is incompatible with this module. Expected version ">=12". Got "10.10.0"

error fs-extra@10.1.0: 엔진 "node"가 이 모듈과 호환되지 않습니다. 예상 버전은 ">=12"입니다. "10.10.0"을 얻었습니다.

노드 버전을 12버전 이상으로 했더니 또 14버전 이상으로 올리래서 14버전 이상으로 올려서 사용하겠다고 바꿔줌.(해당 블로그 참고..ㄱㅅ LTS버전으로 그냥 바꿔줬는데 22였나...그랬음. )

아마 위에 brew명령어로 깔아놓았던 노드들의 버전이 충돌이나서 그런가 싶어서... 위의 링크한 블로그에서 알려주는대로 버전 다 바꾸고 리액트 앱 생성함. 버전 바꾼 후 결과적으로 프로젝트는 생성됨, 하지만 브라우저 화면에 리액트 자습서가 나와야하는데 localhost를 찾을 수 없습니다. 화면에 뜨고 터미널창을 보니 에러가 떠 있길래 에러내용 검색해서 찾음.. 찾은 내용 감사...

TIL_error:0308010c:digital envelope routines::unsupported

설정된 버전이 노드제이에스 버전이 17이상 이라서 해당 에러가 나는거 같았음. 위 블로그 내용대로 노드옵션을 아래와 같이 설정해줌. 

# for macOS, Linux or Windows Git Bash
export NODE_OPTIONS=--openssl-legacy-provider

설정해주고 프로젝트 경로로 가서 yarn start해줬더니 더이상 어떠한 에러도 없이 리액트 배우기 화면으로 잘 뜸. 

But, 실행 중이던 터미널 창을 종료 후 다시 shell을 실행하면 설정해줬던 노드제이에스 버전이 처음 지정했던 버전 10.10.0으로 돌아가 있는 것을 발견..... 근데 또 yarn start는 잘 됨...; >>> 그냥 노드 버전 고정시키는 명령어로 해결 되는 문제 였음. .

nvm alias default <버전명>

 

일단은 두잇 책에서 안내된 버전이 10.10.0이라서 해당 버전으로 고정해서 사용할거공...

노드제이에스 17버전 이상인 22.x.x버전 쓸 때yarn start 시에 로컬호스트 접속 에러 나는건 리액트 프로젝트 내의 package.json 파일을 명령어 부분에 export NODE_OPTIONS=--openssl-legacy-provider 를 아래와 같이 추가해주면 문제 없이 실행되는 것을 확인함.

  <<이상생략>>
  "scripts": {
    "start": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  <<이하생략>>

build,test,eject같은 명령어들도 마찬가지로 위 명령어 추가해주고 쓰면 에러 없이 쓸 수 있음.

 

yarn create react-app <프로젝트명> --scrips-version 2.7.1

위의 명령어 실행 시, 노출되었던 에러는 애초에 책에 소개된 노드제이에스10.10.0 버전이 지금 출시된 버전에 비해 너무 낮은 버전이라 나는 에러였던 것 같다고... 해당 글에서 찾음... 맞는것 같기도... 프로젝트 생성할 때 노출되는 에러 메시지에 버전 12이상으로 써야된다, 14 이상으로 써야된다 노출 됐는데.... 노드제이에스를 안정적인 최신 버전도 다운 받아주고 난 뒤에는(22이상...) 문제 없이 리액트 프로젝트가 잘 실행됐으니깐...