열정보단 시스템

정리 전 진행 상황 - Nesting Navigator 구조 재구성 (StackNavigator 간소화(MainStack 삭제 후 나머지 스크린을 RootStack으로 올림) - Navigator 별로 ParamList Setting - SignUp, HomeView-PostCard Button 처럼 navigate이 필요한 화면에서 NavigationProps(필요시 CompositenNavigateProp 사용) Setting 위 사진처럼 Navigator에 대한 Type Checking 만 별개 클래스로 코드를 짰다. Screen에 대한 TypeChecking은 NavigatinoProp과 RouteProp이 있는데, 화면마다 넣어줄 애들을 미리 세팅하다가 보니 너무 복잡해져서 코드가 꼬이면서 Ne..

머리 아픈 sticky header 구현.. 화이팅 프로필 페이징 구현은 react-native materialTopTabNavigator 로도 안되고.. react-native-tab-views로도 안되니.. UI 하나하나 다 짠 다음에 TouchableOpacity로 감싸주고 버튼마다 페이징으로 넣어줘야하려나? //추후 정리 예정

개발을 하다가 간혹 가상 시뮬레이터가 아닌 실제 디바이스에서 테스트를 해봐야 할 일이 생긴다. 이번에 react-native-image-picker를 사용해서 카메라/앨범 접근 권한 및 파일 불러오는 기능을 구현해보는데 앨범 접근은 시뮬레이터에서 가능하지만 카메라는 실기기에서만 테스트가 가능하다는 것을 확인했다. 이를 위해 'react-native run-ios'을 통해 시뮬레이터 돌리던 것을 추가 명령어를 돌려줬다. 우선 ios-deploy를 설치한다. npm install -g ios-deploy 그다음, 추가 명령어는 간단하다. 'react-native run-ios' 뒤에 '--device '나의 device 이름' --configuration Release'만 추가해준다. react-native..

ModalView 를 만들기에 앞서 라이브러리를 사용할지 아니면 react-native 에서 기본으로 제공해주는 기능을 활용할지 선택을 해야한다. 구현을 하면서 모달뷰만큼은 Swift가 조금은 그리웠..는데 RN에서는 홈뷰와 페이징이 쉬웠다면 swift에서는 모달뷰 전환과 네이게이션 제어가 간편한 것 같다. npm i react-native-modal // or yarn add react-native-modal //추후 정리본 추가

구글 로그인 구현을 iOS, Android 모두 완료했다. 구글 로그인을 마치는 순간, 구글 서버로부터 유저 정보와 토큰이 날라올 것이고, 우리는 여기서 필요한 정보를 저장하여 백으로 보내줄 것이다. Swift를 공부할 때엔, 받아온 token을 KeychainWrapper를 활용하여 안전하게 보관을 하고 필요할 때마다 꺼내서 인터셉터를 통해 헤더에 얹어서 API를 쏴주었다. RN 스터디 순서는 다음과 같다. 토큰을 어떻게 저장할 것인지 Axios 상에서 Interceptor는 어떻게 구현하는지 헤더에 얹어서 token을 .post하였다면, refresh Token 갱신을 어떻게 하는지 Token 저장하기 보통 State와 같은 Component의 상태 관리를 위해서는 Redux를 사용한다. 하지만 우리..

(1)글에서 언급했던 GoogleService-Info.plist 없이 시도한 것의 시작점은 Firebase 를 쓰면 안되기 때문에 당연히 GoogleService-Info.plist 없이 구현하는 방식으로 삽질을 했다. 우연히 Google Cloud Platform 을 보다가 아래 사진처럼 PLIST 다운로드를 우연히 발견했다.. 이걸 발견하지 못해서 몇 주간 구글 로그인 구현이 미뤄진게 말이 되나ㅠㅡㅠ.. 허무하다. 어찌됐건 다운받은 PLIST를 Xcode에 적용하고 URL Type을 재수정하였다. 결국 iosClientId와 webClientId 를 모두 세팅해주고 webClientId를 쓰기 때문에 당연히 offlineAccess도 true값을 넣어주었다. 버튼이 정상적으로 작동하였고, 로그인이 ..

애증의 구글 로그인 구현.. 나의 끈기를 테스트하는지 무한한 에러 덕분에 git commit 되돌리는 연습만 엄청 한 것 같다.. Swift로 구현할 때는 설치와 UI 구현은 굉장히 쉬웠고 되려 받아온 정보를 Alamofire(Restful API Library)로 날리기 위해서 API 연습에 시간을 들였었는데 React Native 에서는 설치조차 다소 까다로운듯 하다. 오늘은 반드시 구현할 각오로 시작해본다. 순서는 우선 iOS pod file 적용 후, GoogleSignIn Button 을 화면에 출력해본다. 여태 어려움을 겪던 부분은 GoogleService-info.plist 의 적용에 대한 것인데 RN 오픈 채팅방에 문의해본 결과 필수로 적용해야한다고 해서 이 부분도 적용을 한 후에 하나씩 ..

iOS 앱 개발에서 React Native로 넘어와서 가장 마음 급하게 구현해보고자 한 것들은 다음과 같다. 홈뷰 구현(swift의 cell 관리가 꽤 까다롭다고 생각했기 때문에 RN에서의 홈뷰 구현은 어떻게 하는지 궁금했고, 현재는 FlatList로 뉴스피드 구현한 상태) Restful API 구현 컴포넌트 구성 iOS 앱을 공부할 때에는 light/dark theme에 대한 관리는 Xcode 상에서의 asset에서 두 이미지를 하나로 묶어서 관리했기 때문에 RN으로 넘어와서는 큰 방법론적인 해결책이 떠오르지 않았다. (하단 사진 첨부) React Native 로는 Styled-components에서 제공해주는 ThemeProvider를 통해 이를 적용해보려고 한다. index.tsx 안에서 가장 바깥..