mac+intellij 에서 리액트 시작하기...

1. NVM(Node Version Manager) 설치

sdkman 과 비슷하게 node 버전을 관리해주는 툴이다.

설치는 아래 공식 github 에 나온 방법을 참고하면 된다.

https://github.com/nvm-sh/nvm

nvm-sh/nvm

그런데 실제로 설치해도 아래 명령어가 인식되지 않는 경우가 있다.

nvm --version

 

 

환경변수가 적용되지 않았기 때문인데 이는 아래를 참고하도록 한다.

findmypiece.tistory.com/12

맥북에서 환경변수, PATH 가 자꾸 초기화 될 때..

 

2. Node.js 설치

아래 명령으로 최신버전 Node 를 설치한다.

Node를 설치하면 기본적으로 npm이 함께 설치된다.

npm 은 Node의 패키지 관리도구 이다.

리액트 역시 하나의 패키지이다.

nvm install --lts

리액트 프로젝트를 만들 때 반드시 Node.js 가 먼저 설치되어 있어야 한다.
이는 자바스크립트 런타임으로 웹브라우저 환경이 아닌 곳에서도 자바스크립트를 사용할 수 있게 해준다.
어차피 리액트 어플리케이션이 웹브라우저에서 실행 될 것이기 때문에 Node.js 와 직접적인 연관은 없지만
프로젝트를 개발하는데 필요한 주요 도구들이 Node.js 를 사용하기 때문에 필요하다.

 - 리액트를 다루는 기술

 

3. yarn 설치

npm 을 대체할 수 있는 도구로 npm 보다 더 빠르고 더 많은 부가기능을 제공한다.

yarn 은 공식 github가 없는지 책에서도 homebrew를 사용해서 아래와 같이 설치한다.

brew update
brew install yarn
yarn config set prefix ~/.yarn

그런데 brew install 시 아래와 같은 에러가 발생했다.

Error:
  homebrew-core is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
This command may take a few minutes to run due to the large size of the repository.
This restriction has been made on GitHub's request because updating shallow
clones is an extremely expensive operation due to the tree layout and traffic of
Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you
automatically to avoid repeatedly performing an expensive unshallow operation in
CI systems (which should instead be fixed to not use shallow clones). Sorry for
the inconvenience!
Error: The following directories are not writable by your user:
/usr/local/share/man/man7

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/share/man/man7

And make sure that your user has write permission.
  chmod u+w /usr/local/share/man/man7

뭔말인지는 모르겠지만 출력된 안내데로 아래 명령을 수행하면 된다고 해서 그렇게 했다.

git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow

그리고 다시 brew install 를 했는데 또 아래 오류 발생

Error: The following directories are not writable by your user:
/usr/local/share/man/man7

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/share/man/man7

And make sure that your user has write permission.
  chmod u+w /usr/local/share/man/man7

역시 안내에 나온데로 퍼미션을 추가했다.

sudo chown -R $(whoami) /usr/local/share/man/man7
chmod u+w /usr/local/share/man/man7

그리고 다시 brew install 하니 성공

아래명령으로 설치된 버전을 확인해보자.

yarn --version

 

4. 리액트 프로젝트 생성

원래 create-react-app 으로 만들어도 되는데

intellij 를 사용한다면 아래와 같이 만들면 된다.

생성이 완료되면 아래와 같이 .gitignore, README.md 파일까지 추가되어 프로젝트 디렉토리가 생성된다.

프로젝트 root 디렉토리로 이동해서 아래 명령으로 리액트 로컬서버를 구동시켜 보자.

조금 기다리면 브라우저에서 자동으로 리액트 페이지가 띄워질 것이다.

yarn start