J.BF Story

[React Native] 환경 세팅 본문

FrontEnd/React Native

[React Native] 환경 세팅

J.BF 2022. 3. 29. 00:01
OS: MacOS 11.3.1
NVM: 0.39.1
Node.js: 16.14.2 (LTS)
Expo: 5.3.0

 

NVM 

1. NVM 설치

brew install nvm

 

더보기
더보기

Running `brew update --preinstall`...

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:

  https://github.com/Homebrew/brew#donations

==> Auto-updated Homebrew!

Updated 1 tap (homebrew/core).

==> New Formulae

acl                        inih                       postgraphile

bvm                        koka                       rslint

epinio                     kubekey                    shadowsocks-rust

flyctl                     ltex-ls                    stylish-haskell

fortran-language-server    melody                     testkube

fourmolu                   nickel                     trivy

go@1.17                    observerward               wasm-tools

==> Updated Formulae

Updated 889 formulae.

==> Deleted Formulae

gstreamermm                              mozilla-addon-sdk

 

==> Downloading https://ghcr.io/v2/homebrew/core/nvm/manifests/0.39.1_1

######################################################################## 100.0%

==> Downloading https://ghcr.io/v2/homebrew/core/nvm/blobs/sha256:6e14c8a2bf9421

==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sh

######################################################################## 100.0%

==> Pouring nvm--0.39.1_1.all.bottle.tar.gz

==> Caveats

Please note that upstream has asked us to make explicit managing

nvm via Homebrew is unsupported by them and you should check any

problems against the standard nvm install method prior to reporting.

 

You should create NVM's working directory if it doesn't exist:

 

  mkdir ~/.nvm

 

Add the following to ~/.zshrc or your desired shell

configuration file:

 

  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.d/nvm" ] && \. "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

 

You can set $NVM_DIR to any location, but leaving it unchanged from

/usr/local/opt/nvm will destroy any nvm-installed Node installations

upon upgrade/reinstall.

 

Type `nvm help` for further information.

==> Summary

🍺  /usr/local/Cellar/nvm/0.39.1_1: 9 files, 184.1KB

==> Running `brew cleanup nvm`...

Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.

Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

2. NVM 설치 확인

nvm --version
💡 Err: nvm command not found
해결: 환경 변수 등록
1. nvm 디렉터리 생성
mkdir ~/.nvm

2. 설정 스크립트 작성
쉘에 따라 다음과같은 스크립트 파일을 생성하여 작성
- bash: ~/.bashrc
- zsh: ~/.zshrc
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.d/nvm" ] && \. "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

3. 터미널 재실행 or 설정 스크립트 수동 실행
source ~/.zshrc​

 

 

Node.js

1. Node.js 버전 리스트 확인

nvm ls-remote​
더보기
더보기

        v0.1.14

        v0.1.15

        v0.1.16

        v0.1.17

        v0.1.18

        v0.1.19

        v0.1.20

        v0.1.21

        v0.1.22

        v0.1.23

...

       v16.13.0   (LTS: Gallium)

       v16.13.1   (LTS: Gallium)

       v16.13.2   (LTS: Gallium)

       v16.14.0   (LTS: Gallium)

       v16.14.1   (LTS: Gallium)

       v16.14.2   (Latest LTS: Gallium)

        v17.0.0

        v17.0.1

        v17.1.0

        v17.2.0

        v17.3.0

        v17.3.1

        v17.4.0

        v17.5.0

        v17.6.0

        v17.7.0

        v17.7.1

        v17.7.2

        v17.8.0

2. Node.js 설치

javascript 런타임

nvm install v16.14.2 # LTS
더보기
더보기

Downloading and installing node v16.14.2...

Downloading https://nodejs.org/dist/v16.14.2/node-v16.14.2-darwin-x64.tar.xz...

##################################################################################################################################### 100.0%

Computing checksum with shasum -a 256

Checksums matched!

Now using node v16.14.2 (npm v8.5.0)

Creating default alias: default -> v16.14.2

3. Node.js 설치 확인

node -v # v16.14.2
nvm ls
더보기
더보기

->     v16.14.2

default -> v16.14.2

iojs -> N/A (default)

unstable -> N/A (default)

node -> stable (-> v16.14.2) (default)

stable -> 16.14 (-> v16.14.2) (default)

lts/* -> lts/gallium (-> v16.14.2)

lts/argon -> v4.9.1 (-> N/A)

lts/boron -> v6.17.1 (-> N/A)

lts/carbon -> v8.17.0 (-> N/A)

lts/dubnium -> v10.24.1 (-> N/A)

lts/erbium -> v12.22.11 (-> N/A)

lts/fermium -> v14.19.1 (-> N/A)

lts/gallium -> v16.14.2

 

Expo

보편적인 React 애플리케이션을 위한 프레임워크

1. Expo 설치

npm install -g expo-cli

* -g: global (현재 디렉터리가 아닌 모든 디렉터리에서 패키지 실행 가능)

2. Expo 설치

expo -V

 

React Native 환경 설정

1. 프로젝트 생성

expo init [프로젝트명]

2. 프로젝트 실행

cd [프로젝트명]
npm start

 

기타

Expo 앱 설치 (구글스토어)

실제 프로젝트를 편하게 앱으로 구동할 수 있음

Comments