anyenv, nodenv에서 React(Type Script) 환경 구성 복사 가능

개요

n번 프라이입니다. 하지만 anyenv, nodenv에서 React(Type Script) 환경을 만드는 명령을 요약한 것입니다.
새로운 PC나 EC2에서는 Docker를 넣지 않은 상태에서 사용하는 경우가 많아 기사를 썼다.
맥OS, 리눅스를 대상으로 글을 읽지 않아도 위에서 복사하면 환경을 구축할 수 있다.

설치 단계

사용한 조개껍질은 zsh로 가정합니다.

anyenv 설치

git clone https://github.com/anyenv/anyenv ~/.anyenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
exec $SHELL -l
anyenv install --init

nodenv 설치

anyenv install nodenv
exec $SHELL -l

andenv-update 설치

mkdir -p $(anyenv root)/plugins
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
mkdir -p "$(nodenv root)"/plugins

nodenv default-package 설치 및 편집

git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
touch $(nodenv root)/default-packages
echo "yarn\ntypescript\nts-node\ntypesync" >> $(nodenv root)/default-packages

node.js14.17.0 설치

집필 기간(2021년 6월 11일)에 최신 LTCS 14.17.0을 설치한다.

nodenv install 14.17.0
nodenv global 14.17.0

동작 확인

React 시작

npx create-react-app react-example --template typescript
cd react-example
yarn start

브라우저가 시작되면 다음 화면이 나타납니다.

해설

anyenv 설치

git clone https://github.com/anyenv/anyenv ~/.anyenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
exec $SHELL -l
anyenv install --init

nodenv 설치

anyenv install nodenv
exec $SHELL -l

andenv-update 설치

anyenv-update install를 anyenv의plugens에 넣습니다.
anyenv-update를 사용하면 install의 env들도 업데이트되기 때문에 편리합니다.

mkdir -p $(anyenv root)/plugins
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
mkdir -p "$(nodenv root)"/plugins
git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
touch $(nodenv root)/default-packages

nodenv default-packages 설치 및 편집

nodenv default-packages는 nodenv node입니다.js 환경이 설치되었을 때 자동install$(nodenv root)/default-packages에 기술된 패키지 nodenv의pluggin입니다.

git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
touch $(nodenv root)/default-packages
echo "yarn\ntypescript\nts-node\ntypesync" >> $(nodenv root)/default-packages

다음 명령을 사용하여 패키지를 지정합니다.

echo "yarn\ntypescript\nts-note\ntypesync" >> $(nodenv root)/default-packages

내용은 아래에 상세하게 설명하지 않지만 필요한 것(typescript,ts-node)과 있으면 편리한 것(typesync,yarn)을 기술하였다.

yarn
typescript
ts-node
typesync

node.js14.17.0 설치

nodenv install 14.17.0
nodenv global 14.17.0

nodenv install 14.17.0 명령에 지정된 node.js 버전이 설치되어 있습니다.
명령에 지정된 node입니다.js 버전을 기본값으로 설정합니다.nodenv global 14.17.0에서 현재 설정된 node입니다.js 버전을 확인할 수 있습니다.

React 시작

npx create-react-app react-example --template typescript
cd react-example
yarn start

nodenv global는 글로벌 설치가 없는 명령을 실행할 때 설치하고 완료한 후 삭제하는 명령입니다.
이 예에서는 명령이 일치합니다npx コマンド.create-react-app는 create-react-app プロジェクト名 --template typescript에서 React 응용을 시작하는 명령입니다.
typescript 사용은 プロジェクト名에 지정되어 있습니다.
지정하지 않으면 자바스크립트로 만듭니다.