DevLog

expo-camera 라이브러리를 이용하여 앱 내에 QR코드 스캐너를 구현하고 있다.스캔한 QR코드에 담긴 데이터에 따라 유효성 검사를 진행하여 올바른 코드가 스캔되었는지를 판별하는 코드를 작성했다. 잘못된 QR을 인식했을 경우에는 '유효하지 않은 코드' 임을 알리는 alert를, 올바른 QR을 스캔한 경우에는 '스캔 완료' alert를 띄우려고 한다.하지만 CameraView에 넣을 onBarcodeScanned(바코드 스캔 이벤트 처리 함수)를 구현하고 동작 테스트하는 과정에서 문제가 발생했다.scanned 콜백 함수가 돌아가는 중에도 카메라가 끊임없이 연속적으로 코드를 스캔하면서 이벤트 동작 하나를 다 처리하기도 전에 수십 개의 alert가 쌓이고 있었다.아무리 확인 버튼을 눌러도 사라지지 않는 무..

앱 구현 과정에서 문제가 하나 발생했다.A 화면에서 B 화면으로 이동 후, 다시 A로 goBack() 하게 되면 화면이 그대로 얼어버린 것처럼 어떤 터치도 먹히지 않았다. 처음에는 화면 전환 과정에서 포커스가 제대로 돌아오지 않는 건가 싶어 useFocusEffect() 훅을 사용해 디버깅을 시도해보았지만, 네비게이션을 이리저리 테스트해봐도 포커스 전환에는 아무런 문제가 없었다.navigation.getState()를 사용해 화면 전환이 일어날 때마다 route 로그를 찍어봐도 별다른 예외 사항은 보이지 않았다.그러다 발견한 문제 원인.B 화면에서 "모달을 열고 닫은 후" A 화면으로 돌아오면 화면이 멈춘다.화면 전환 이후에도 모달이 여전히 렌더링되면서 터치를 차단하고 있었다.리액트 네이티브에서 Moda..

리액트 네이티브에서 화면 전환 기능을 구현할 때 가장 대중적으로 사용된다는 react-navigation 라이브러리.이번 앱개발 프로젝트를 진행하면서 사용해보고 있는데.. React 웹 환경과 React Native 앱 환경에서의 네비게이션은 다르다는 것을 몸소 체감하는 중이다.이놈의 버그, 버그, 버그.처음 리액트 네이티브를 시작했을 때는 기존의 리액트 문법과 크게 다를 게 없어서 다행이라고 생각했는데, 네비게이션 과정에서 React Router를 쓰던 것과 유사한 방식으로 접근하려니 예상치 못한 결과가 튀어나온다. 아놔..이래서 선이론 후실습이 중요한 건데, 익숙한 문법을 쓰다 보니 본인이 RN 초심자라는 사실을 간과했다.공식문서야~ 도와줘~https://reactnavigation.org/docs/..

지금껏 리액트라면 당장 웹 개발 공부하는 것도 부족해서 모바일 쪽은 생각도 못하고 있었는데,마침 교내 팀 프로젝트로 모바일 어플 구현 과제를 수행하게 되어서 반강제적으로(;;) 리액트 네이티브를 공부하기 시작했다.뭐,, 좋은 게 좋은거지~~혹시 모르지 않습니까? 이 기회를 양분 삼아 모바일 개발자 쪽으로 빠지게 될지도ㅎㅎ빠이팅 빠이팅