두 달 간의 위코드 공부 기간이 끝나고 기업협업을 시작했다.

내가 온 기업에서는 아래의 기술 스택으로 업무를 진행한다.

React, React Native, Redux, Redux-saga, Axios, Styled component

본격적으로 코드를 짜기 전, 해당 기술 스택이 어떤 기능을 가지고 있는지 간단하게 정리하고자 한다.
(총 3개의 포스트로 이어지는 글입니다.)

React

리액트는 이전에 블로깅한 내용이 여럿 있어, 해당 링크를 첨부한다.

대망의 React Intro

React Router

State, Props (and Event)

React Lifecycle

React hooks: useState, useEffect

React Native

React Native는 모바일 앱을 위한 프레임워크로 페이스북에서 만들었다.

React와 전체적인 구성은 비슷하나, 기본으로 제공되는 컴포넌트가 아주 많다는 점과 Mono-repo라는 점이 react와 크게 다른 점 중 하나이다.

RN에서 제공되는 컴포넌트와 third-party-library를 잘 활용하면 활용할 수록 세세하게 앱을 만들 수 있다.

Run Native

RN의 개발자 사이트에서 환경설정을하는 방법에 대해 자세하게 설명해주고 있다.
(이 자세한 설명도 너무나 부족해서, 수없이 마주하는 에러들을 스택오버플로우와 해결해야지만 앱 화면을 볼 수 있다....)

Expo CLI 는 공부 혹은 연습용 설정이다.
설치는 비교적 쉬우나 실제 배포 시에 필요한 기능이 몇 가지 부족하다.
그래도 RN를 연습하기에는 충분히 기능을 갖고 있다.

React Native CLI는 실제 배포용으로 프로젝트를 시작할 때 필요한 설정이다.

개발 OS와 타켓 OS를 선택할 수 있으며, macOS를 사용하는 나는 타켓OS인 Android와 iOS 각각에 대한 설정을 해주었다.

설정 단계는 위 링크에 자세하게 나와있기 때문에 별도로 정리하지 않는다.

다만 iOS simulator를 돌리기 위해서는 Xcode의 버전과 macOS의 버전이 맞아야 하고(하나가 최신이면, 다른 하나도 최신이어야 함),
cocoapods을 프로젝트 파일에서 실행시키기 위해서는 pod install 후에 react-native run-ios을 해야 한다.
혹시 failed pod install 에러가 확인된다면, /usr/local/bin/pod install 이렇게 경로도 함께 지정해서 설치해주면 된다.

Navigation

React Navigation은 React에서 React-Router-Dom과 같은 역할을 하는 패키지이다. 휴대폰 상에서 스택 위아래, 왼오른쪽으로 이동할 수 있게 해주는 기능으로 작은 화면에서 여러가지 페이지(혹은 화면)를 보여주기에 아주 중요한 기능이다.

쉽지 않음..

React Native는 아직 버전이 1 미만으로, 여전히 불안정하고 이슈가 많은 상태이다. 따라서 설치부터 많은 것을 직접 진행해야 하고, 직접 진행하는 만큼 에러 메세지도 다양하게 나타난다. 에러 메세지는 다양하나, 한 방법으로 그 에러를 해결한 경우도 많지 않기 때문에 하나하나 직접 이슈를 해결해나가는 경우가 대부분이다.

그래도 설치를 하고 내가 진행하는 프로젝트를 직접 simulator와 내 휴대폰으로 돌려보니 신기하고 재밌다. HTML로 웹을 처음 만들었을 때 느낌과 비슷하다.

---

Debugger

React Native는 console 창이 없다.
대신 Debugger를 할 수 있는 라이브러리가 있다.

react-native-debugger

brew update && brew cask install react-native-debugger

redux-devtools

yarn add redux-devtools-extension

store 설정 파일 수정

import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(modules, composeWithDevTools(applyMiddleware()));

react-native-debugger-open

프로젝트를 시작할 때 디버거를 자동으로 켜준다.

yarn add react-native-debugger-open --save-dev

package.json 코드 수정

"scripts": {
  "postinstall": "rndebugger-open"
}

스크립트 명령어 실행

yarn postinstall