[TIL] 2022.02.16- React native / redux

 

오늘 오전까지 리액트네이티브 디버그 구축까지 마무리해야해서

지난 프로젝트와 리덕스에 대해 다시 학습했다

항해 때 리덕스 환경에서 주로 사용했던 immer와 createAction패턴에 익숙해져있어서

RN에서 회사는 어떻게 쓰이는지 궁금했고 마침 이에 대한 주제로

오전 스크럼에서 리덕스 툴킷에 대해서도 언급이 되었다. 현

재 immer사용이 힘든 RN환경에서 리덕스 툴킷은 꽤나 유용할것같아

시간내서 학습하고 정리해봐야겠다.

 

오후에는 처음으로 회사의 앱과 웹환경의 소스코드를 보고 익숙한듯 낯선코드들에 한참 몰입해있었다. 웹위주로 확인하면서 간만에 보는 코드들이 반가움도 잠시 개인적이고 주관적인 QA를 통해 웹환경 몇가지이슈사항을 체크해두었고 업무에 투입되면 어떻게 해결할수 있을까 고민해봤다.회사분위기도 너무 좋고, 개발체계도 잘 잡혀있어서  나만 잘하면 될것같다!

 

오늘 한일

• 내비게이션 스택및 탭 부분 이해 및 구현
• RN 디버그 환경 구축
• RN 공식문서 + 리액트 네이티브 다루는 기술 기반 학습
  
• 회사 소스코드 확인

오늘 배운것

• 리액트 네이티브 - 리덕스 디버그환경 구현
  
  

  yarn add redux react-redux
  
  yarn add redux-devtools-extension
  
  yarn add redux-logger

  
  

  brew install --cask react-native-debugger

  https://tagilog.tistory.com/1014
  
• error:  command PhaseScriptExecution failed with a nonzero exit code permission denied
  
  vscode에서 yarn iOS 또는 yarn android 로 진행시에 진행이 잘 되는데, xcode를 별도로 실행하면 빌드가 되질 않았다. 다른분들의 에러해결은 보통 경로 설정 문제였는데 내경우 pod라이브러리 재설치, Xcode>product>클린빌드형태로 해결했다. 
  
  
  
• 맥환경 화면분할
  
  윈도우에서 화면분할이 win+방향키형태로 비교적 손쉽게 사용했는데, 맥은 기본세팅이 없어 따로 spectacle을 설치 해줌
  https://dailylog2020.tistory.com/10
   
• tab navigation
  
  대부분의 모바일 어플리케이션은 tab based navigation임.
  이건 하단의 화면이나 헤더아래 navbar처럼 누를수 있게 구성해 줌
  기본구성외에 커스터마이징을 하고 싶다면 navigator부분에 screen마다 options들을 추가하면 다르게 보여줌
  

  yarn add @react-navigation/bottom-tabs

  
  
  • tabBarIcon
    • bottom tab navigator에서 지원되는 옵션
    • tabBarIcon은 focused state, color, size params가 제공되는 기능으로 tabBarIcon에 전달되는 color는 focused state에 따라 활성 또는 비활성됨
    • size는 tab bar에 필요한 아이콘의 크기이다.
  • tabBarOptions
    • 구성은 tabBarOptions, activeTintColor, inactiveTintColor가 표시.
• 소스트리와 bitBucket
  
  이전에도 터미널에서 깃을 진행했는데 회사에서 소스트리를 적극 권장하셨다. bitBucket와 궁합도 좋은것 같다!

 

• Pod install과 pod update 차이
  
  https://blog.yagom.net/534/
  
  
• 버튼 클릭시 해당버튼 활성화(언더라인등)
  
  기존 프로젝트 진행시 active라는 별도의 key밸류를 원본배열에 추가하여 유저패턴에 대한 상태관리를 했는데
  회사 소스코드를 보니 다르게 구현해서 신기했다.
  
  

리액트 네이티브 디버거 설치하기

CocoaPods 설치 및 Pod 설치 - yagom's blog

[무료] 맥북 화면분할/창분할 필수앱 "Spectacle"로 작업을 편하게 하자!

 

 

 

내일 할일

• 회사 소스코드 이해(웹,앱)
• 내비게이션 스택및 탭 부분 이해 및 구현
• 공식문서 + 리액트 네이티브 다루는 기술 기반 학습