리액트 네이티브 공부하기(0)

프로젝트가 끝나고 좀 해이해진 것도 있고, 사실 리팩토링이 필요하단 건 알고 있지만 네이티브 이용해서 프로젝트를 하자는 말이 나와 네이티브는 못참지!란 마인드로 프로젝트를 시작하게 되었다. 프로젝트 기간동안 하루에 많아봐야 2~3시간 잤어서 이번에는  좀 여유있게 작업해야겠다는 생각으로 시작했는데... 왜 인간의 욕심은 끝이 없고, 같은 실수를 반복하는 것인가....ㅎㅎ

 

생각보다 스코프도 커지고, 디자이너님까지 컨택되어 프론트 4명, 백엔드3명, 디자이너 1명이라는 대규모 프로젝트를 하게 되었다. 분명 잠은 재워준다 설득당해서 들어온 건데...(사기가 분명함🥲) 

 

네이티브를 사용하기로 해서 공부할 겸 오랜만에 블로그 작성 중!! 프로젝트 관련된 포스팅은 천천히(?) 써 갈 예정! 말도 많고 탈도 많았던 우리팀이었지만 결과적으로 마음에 드는 프로젝트를 완성해서 기쁘다! 라직 리팩토링을 해야 하지만..ㅎㅎ 모자란 팀장이었지만 따라와 준 팀원들께 감사하고! 많이 울고 웃고 많이 배울 수 있는 시간이어서 좋았습니다!

 

어쨌든 리액트 네이티브는 노마드 코더에서 무료로 수강할 수 있는 왕초보를 위한 React Native 101를 참고해서 수강하고 포스팅 할 계획이므로 저작권에 위배되면 알려주세용!

 

 

 

 

리액트 네이티브 같은 경우는 이런 구조로 되어 있는데 JavaScript, Markup/Styling은 코드를 작성하는 것, 그리고 나머지 부분 같은 경우가 앱을 만들 때 필요한 부분이다. 이 부분은 안드로이드냐 ios이냐에 따라 설치해야 하는 것들이 있지만 지금은 아직 배우는 과정이고, 완선된 프레임만 봐도 충분한 상황이기 때문에 컴파일하지 않고  expo라는 어플리케이션을 설치하면 됨!!

 

1. Expo CLI 설치

npm install --global expo-cli

 

혹시 에러가 있다면 아래와 같이 설치!

sudo npm install --global expo-cli

2. Watchman 설치(Mac용)

 

brew update
brew install watchman

 

 

 

3. expo가입하기

https://expo.dev/

Expo

 

 

 

4. 핸드폰에서 expo 설치 한 후 로그인하기

 

 

 

 

리액트 네이티브는 폰 안에 있는 브라우저가 아니다! 단지 안드로이드와 ios에 말을 걸어주는 통역가일 뿐이라는 것을 다시 상기하며 시작해보자! 따라서 네이티브 코드를 사용하면 안드로이드나 ios의 앱으로 변환해주는 과정을 거치지  않아도 되기때문에 매력적이라 할 수 있다.

 

 

우리가 작성해야 하는 부분은 저 javascript부분! 

리액트 네이티브가 동작하는 방식을 살펴보면

(1) 이벤트가 생기면 이던 native(ios, 안드로이드)에 기록이 되고, (2) 이런 기록을 수집하여 화면을 통제한다. 이로 인해 사용자가 화면을 누르는지(이벤트) 아닌지 확인 할 수 있다. (3)이벤트가 발생하면 bridge를 통해 javascript에 전달한다. (4)코드를 실행시키면 (5)화면이 바뀌고 (6) 응답을 받아 (7)리액트 네이티브는 네이티브 운영체제에 메세지를 보내 (8)UI를 업데이트 한다.