모리스의 개발 노트

안녕하세요. 모리스입니다.😀이번 포스트는 재미난 라이브러리 하나를 소개해 보려합니다.!React Native에서 휴대폰 디바이스의 내장 센서를 사용할 수 있도록 해주는 react-native-sensors라는 라이브러리 입니다.자, 그럼 시작해 볼게요!🔎 react-native-sensors란?react-native-sensors 라이브러리는 React Native 앱에서 휴대폰 디바이스의 내장 센서를 사용할 수 있도록 도와줍니다.이 라이브러리를 통해 다음과 같은 센서 정보를 다룰 수 있어요:가속도계 (Accelerometer)자이로스코프 (Gyroscope)지자기계 (Magnetometer)기압계 / 바로미터 (Barometer)🛠 설치 방법라이브러리 설치 (iOS는 pod install도 함께)..

안녕하세요. 모리스 입니다.😀지금은 iOS 개발을 해서 그런일은 없지만 예전에 RN개발을 할 때 AOS 기기에서 일어났던 이슈를 해결하며 알았던 내용을 작성해 보려해요.그럼 시작해 보겠습니다.!📱 갤럭시 폴드, 넌 대체 왜 그러는 거니…React Native로 앱을 개발하던 중, 메인 화면에 공지사항 팝업을 띄우는 기능을 구현해야 했어요.기능 구현은 금방 끝났고, 서버에서 내려주는 공지 이미지를 잘 렌더링하는 것까진 문제없었습니다.일반적인 디바이스에선 이미지가 예쁘게 잘 나오더라고요.하지만… 미처 생각하지 못한 한 디바이스가 있었으니…바로 갤럭시 폴드…!🤔 갤럭시 폴드는 뭐가 다른가요?갤럭시 폴드는 특이한 구조를 가지고 있어요.접었을 땐 일반 스마트폰보다 조금 더 좁은 화면펼쳤을 땐 거의 태블릿에 ..

안녕하세요. 모리스입니다.😀이번 포스트에서는 제가 예전에 RN을 개발하면서 구현했던 React Native에서 카카오 로그인에 대해 작성해 보려합니다. 자 그럼 시작해 보겠습니다.! 📌 Kakao Login 세팅카카오 로그인을 구현하기 위해 먼저 Kakao Developers에서 로그인을 적용할 앱을 등록해야 해요.Kakao Developers > 내 애플리케이션 > 애플리케이션 추가하기를 선택하면 아래와 같은 정보 입력창이 나와요.앱 정보를 입력하고 저장을 누르면 돼요.방금 입력한 앱이 Kakao Developers에 등록된 걸 확인할 수 있어요.제품 설정 > 간편가입 탭에서는 카카오 로그인 시 사용자로부터 어떤 항목에 동의를 받을지 설정할 수 있어요.📌 Kakao Login 구현저는 @react..

안녕하세요 모리스입니다.😊이번 포스트에서는 react-native-masked-text 라는 라이브러리에 대해서 작성해보려고 해요.  사용자가 앱에 운전면허 번호를 입력한다고 가정해볼게요.일반적으로는 React Native의 TextInput 태그를 이용해 입력을 받아요.국내 면허증의 운전면허 번호는 xx-xx-xxxxxx-xx 형태로 구성되어 있는데요,일반 TextInput 안에서는 사용자가 직접 -를 입력하지 않는 이상 xxxxxxxxxxxx처럼 붙어서 입력되죠. 저는 사용자가 -를 직접 입력하지 않아도 자동으로 포맷팅되길 원했어요.물론 TextInput으로도 로직을 구현할 수 있지만... UI라이브러리 사용하는거 별로 안좋아 하지만... 그래도 귀찮...으..니..까...ㅎㅎ설치해당 라이브러리는 ..

안녕하세요. 모리스입니다.😄이번 포스트에서는 예전에 RN 개발할 때 유용하게 썼던 디버깅 툴 하나를 소개해 볼까 해요. VSCode는 정말 다양하고 유용한 서드파티 extension들이 많이 있어서VSCode로 React Native 개발할 때 유용하게 썼던거 같아요. 이번에 소개할 extension은 RN개발 시 디버깅을 편리하게 할 수 있는React Native Tools에 대한 내용이에요. 자 그럼. React Native Tools에 대해 알아볼게요.공식 마켓플레이스 문서에 따르면:This VS Code extension provides a development environment for React Native projects. Using this extension, you can debug ..

안녕하세요. 모리스입니다. 😄오늘은 React Native로 앱 UI를 개발하다 보면 예기치 못한 부분에서 레이아웃이 어긋나게 되는데..저는 styled component로 AOS에서 font를 적용했을 때 원치 않는 padding이 발생하는 문제 였어요.결론부터 말하자만 문제의 원인은..Text 컴포넌트에 적용된 font 자체의 padding입니다.자, 이제 조금 더 자세하게 들여다볼까요?문제 상황텍스트 버튼에 일반적으로 많이 쓰는 폰트인 NotoSans 폰트를 다음과 같이 적용했어요.vehicleText: { fontFamily: FontFamily.notoSansRegular, fontSize: 32.0, fontWeight: 'normal', fontStyle: 'normal', let..