[React] React.js 시작하기

React란?

• JavaScript library for building user interfaces
• 인터렉티브한 UI 제작을 위한 자바스크립트 라이브러리
• 웹과 모바일을 하나의 언어로 만들 수 있음
• 페이스북에서 시작해서 현재 오픈소스

장점

• 컴포넌트 기반 : 독립된 UI 구성요소
• Virtual DOM : 변경된 부분만 업데이트 -> 빠른 속도
• 페이스북에서 전문 개발 팀이 관리
• JSX : JS + HTML

개발 환경

• Mac OS M1
• Xcode
• Vscode
• Back-end : ASP.NET Core
• Front-end : React.js

설치

1. Xcode 설치

애플 디바이스에서 돌아가는 앱들을 개발할 때 사용하는 ide

2. iTerm2 설치

M1에서 쉽게 React-Native를 setup하기 위해 설치

https://iterm2.com/

iTerm > 우클릭 > 정보가져오기 > Rosetta를 사용하여 열기 체크

3. oh-my-zsh 설치

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

4. Homebrew

다양한 도구를 설치할 수 있는 패키지 매니저

https://brew.sh/index_ko

iTerm2에 설치

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

아래 명령어로 잘 설치 되었는지 확인

brew --version 

5. node, cocoapod, watchman, ffi 설치

iTerm2에 설치, 확인

• node 설치

brew install node
node -v
npm -v 

• watchman 설치

특정 폴더나 파일을 감시해서 변경 시, 특정 동작을 하는 역할로 react-native에서 코드 수정 시 바로 적용할 수 있도록 도와줌

brew install watchman
watchman --version

• cocoapods 설치

sudo gem install cocoapods
pod --version

• ffi 설치

sudo gem install ffi

zshrc 열고

open ~/.zshrc

맨 마지막 줄에 추가하여 환경변수 설정

export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH

6. Xcode 설정

Xcode > 우클릭 > 정보가져오기 > Rosetta를 사용하여 열기 체크

Xcode > Preferences

• Accounts > 자기 iCloud 계정
• Locations > Command Line Tools > Xcode.xx.x 선택

• Components > 자기 iCloud 계정

7. React-Native 설치

• 원하는 디렉토리에 아래 명령어를 입력하여 설치

npm install -g react-native-cli

이 과정에서, MAC 터미널에서 npm install 사용 시 권한 오류가 발생했다.

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hyeonjiwon/.npm/_logs/2022-03-02T10_36_12_056Z-debug.log

앞에 sudo 명령어를 붙여주니 정상적으로 설치가 되었다.

sudo npm install -g react-native-cli

• 아래 명령어로 버전 확인

  ➜  ~ react-native --version
  react-native-cli: 2.0.1
  react-native: n/a - not inside a React Native project directory
  

• react-native 프로젝트 생성

  react-native init 프로젝트명
  

• PodFile 열고, ios 버전 11.0으로 변경

  open 프로젝트명/ios/PodFile