[TIL] 2022.02.15 - React-native

파도파도 끝이없다.

아무리 프론트만 해왔다고 하더라도 너무너무 부족한 내 모습에 부끄러웠다.

특히 오전에 알수없는 개발환경에러에 CTO님이 해결하는 모습을 넋놓고 보고있을 수 밖에 없었다..

프론트엔드 개발자이전에 개발자가 되어야 한다는 점을 간과해서는 안될것 같아

지금은 편식하지 말고 이것저것

덤벼보는게 맞는듯하다.

리액트 네이티브가 리액트를 배웠다면 손쉽게 접근할수 있다는 이야기만 계속 듣고있어서

공식문서도 가볍게 씹어먹을거라 생각했지만 쉽지않아

같이 입사한 동기분의 조언을 받아 책을 참고하여 학습하고 있다.

오늘 기획회의에 회사 개발일정을 보니 이번년도는 그냥 순삭각이다.ㄷㄷㄷㄷ

변화를 즐기자!

 

오늘 한일

• 내비게이션바 공식튜토리얼 관련 이해 및 구현 : 공식문서를 참고하여  리액트 네비게이션 스택 및 탭 구현까지 진행하였다.
• node 에러 처리 마무리 : METRO가 구동이 되지않고 node도 잘 설치되어있는데 없다고 하는 에러는 결국 삭제후 재설치로 해결했다. 설치순서, 버전, 설치후 실행 유무등 구동이 안되는 변수는 생각보다 많은것같다.
  

오늘 배운것

• 자주 사용되는 리눅스 명령어 숙지
  
  터미널사용이 익숙하지 않다보니 이해나 개발속도가 더뎌서 자주사용되는 명령어를 찾아봤다.
  https://gomguard.tistory.com/73

 

• error: Can't find the 'node' binary to build the React Native bundle.
  
  프로젝트 생성후 yarn iOS 또는 yarn android 명령 시 metro구동이 안됨
  nvm으로 노드 설치하는가 또는 brew로 노드를 설치하는가에 따라 구동이 되고 안되고 차이가 나는데, 초기에 어떤 순서대로 무엇을 설치했냐에 따라서 작동유무가 차이가 났음.
  회사는 node 14버전으로 프로젝트 진행하기에 Brew search node로 맞는 버전을 찾고 재설치후 해결됨.
  https://shanepark.tistory.com/45
  
  
• 공식문서와 책을 참고하여 리액트네이티브 학습
  https://reactnative.dev/docs/getting-started
  

  1.npx react-native init ReactNavigation
  
  2.생성된 프로젝트 vscode에서 열기
  
  3.yarn add @react-navigation/native
  
  4.yarn add react-native-screens react-native-safe-area-context
  
  5.맥의경우 cd iOS > pod install
  
  6.yarn add @react-navigation/native-stack
  
  7.yarn iOS yarn android 실행
  
  8.혹시 안되면 다 껏다 켜보고 그래도 안되면 xcode와 androidstudio 따로 실행해볼것
  
  9.하단내비게이터 yarn add @react-navigation/bottom-tabs 
  cd iOS
  pod install
  const Tab = createBottomTabNavigator();

   
•  Moving between screens
  
  navigate(routeName) 와 push(routeName) 는 유사하게 동작하지만 다르구조를 가지고 있었다.
  Push의 경우 이전스택이 계속 누적되 뒤로가면 바로전 페이지로이동되었지만,
  Navigate 의 경우 뒤로가면 화면이 쌓이는 것이 아니고
  새로 이동할 화면이 현재화면과 같을 경우 화면을 쌓지 않고 파라미터만 변경되었다.
  
  ※navigate함수는 route가 있으면 해당 route로 이동하고 없으면 스택에 넣으니까 무조건 스택에 넣는 구조를 만드려면 navigate가아니라 push를 이용하면 될듯.
• 뒤로가기
  
  뒤로가기를 하고싶을때는 navigation.pop()
  첫번째로 돌아가고 싶을때는 navigation.popToTop()함수 호출
  
  
  
• 헤더 커스터마이징
  
  두가지 방법 존재
  1. Stack.screen의 props로 설정하는것
  2. Use effect hook 사용
  

  2. useEffect(() => {
  
  navigation.setOptions({title: '홈'});
  
  }, [navigation]);

• 헤더가 없는 컴포넌트를 만들었는데 기기밖으로 내용이 나가는경우
  
  <SafeAreaView> 적용할 경우 잘나타남
  
• Nesting Navigator
  https://reactnavigation.org/docs/nesting-navigators/
  
  스택 네비게이터와 탭 네비게이터를 중첩해서 코드를 구현하려 했지만
  another navigator is already registered for this container 라는 오류와 함께 작동되지 않았다.
  nesting을 이해하고 구조를 잡아야 구동되는것 같아서 조금더 학습이 필요하다.
  

 

Introduction · React Native

https://reactnavigation.org/docs/nesting-navigators/

Mac 에 brew 설치하기 및 warning: /opt/homebrew/bin is not in your path. 에러 해결

02. 꼭 알아야 할 리눅스 기본 명령어 10가지

 

 

내일 할일

• 리액트 네이티브 리덕스 개발 디버깅 환경 구현 확인
• 내비게이션 스택및 탭 부분 이해 및 구현
• 콘핀 기술블로그 초기개발환경 세팅(m1) 및 리액트네이티브 초기 세팅관련 기술글 정리 필요
• 공식문서 + 리액트 네이티브 다루는 기술 기반 학습