네이버와 카카오톡 소셜로그인은 javascript나, ios, android sdk는 제공하지만 react-native를 위한 sdk는 따로 없기 때문에 native module을 사용하거나, (있다면) 관련 라이브러리를 사용해야 한다.

리액트 네이티브 프로젝트에 타입스크립트를 적용해 보기로 했는데 처음으로 맞닥뜨린 문제가 React Navigation의 screen props는 어떻게 타입으로 정의하고, 전달할지 였다. 이 문제의 해결법을 가장 기본적인 사용자 인증 플로우로 정리해 보았다.

TypeScript는 MS에서 개발한 자바스크립트의 슈퍼셋(상위언어)로 Javascript에 타입을 지정함으로써 더욱 가독성이 높고 견고한 코드를 짤 수 있도록 도와준다.

TypeScript와 Unit Test 공부를 위해 React로 간단한 StopWatch를 만들고 TypeScript로 리팩토링 해봤다. 👩‍💻

TypeScript 공부를 시작했으니 이번엔 React Native에 TypeScript를 적용해보자. 먼저 프로젝트 만들기!

모바일에서 사용자에게 어떤 정보를 알려주기 위해 화면위에 잠깐 나타났다가 사라지는 것을 Toast라고 한다. 마치 토스트에서 식빵이 튀어오르는 것처럼 🍞.. Alert 대신 Toast를 써보려고 라이브러리를 설치해 봤는데 Modal 위에 Toast를 띄우려니 자꾸 Toast가 Modal 밑으로 숨어버려 그냥 만들어 보기로 했다.

처음 개발을 배울 때 테스트 주도 개발이 대세라는 이야기를 들었을 때 '코드를 테스트 하기 위해 또 다른 코드를 작성해야 한다고?' 하며 겁먹었던 기억이 난다 ㅎㅎ 그런데 공부를 하다보니 조금 더 깔끔한 코드, 효율적인 코드에 대해 고민하게 되고 이참에 테스트에 대해 공부해 보기로 했다.

현재 진행중인 모바일 앱 프로젝트에서 앱 관련 문의사항을 메일로 보낼 수 있는 기능을 추가해 보았다. react-native-mail 모듈을 사용해 모바일에 설치되어 있는 기본 이메일 앱을 연동하는 방법이다.

이전 포스트에서 다루었듯, react native에서 소셜 로그인을 웹뷰를 사용해 구현했다. 기능 구현을 하고나니 마음에 안드는 점을 발견하게 되었는데, 소셜 어카운트로 로그인이 되고 서버에서 회원가입/로그인 작업이 되기 까지 시간이 걸리는데 그 동안 웹뷰엔 빈 화면만 표시되는 것이다.

처음 리액트 네이티브로 개발을 하고 디바이스로 테스트 할 때 가장 당황했던 것이 바로 키보드에 관한 것이었다. 시뮬레이터로 뷰를 보면서 개발할 때 하드웨어 키보드를 쓰다 보니 실제 모바일 기기에서 키보드가 올라왔을 때의 상황을 인지하지 못한 것이다.