모리스의 개발 노트

안녕하세요. 모리스입니다.😀이번 포스트는 Firebase의 Dynamic Link를 React Native에서 사용하는 방법에 대해서 작성해 볼까 합니다.그럼 사용법에 앞서 Dynamic Link가 뭔지 부터 알아보고 갈게요!그럼 시작해 볼게요! 🔍 Dynamic Link란?Dynamic Link를 이해하려면 먼저 Deep Link 개념을 알아야 합니다.Deep Link는 웹에서 특정 페이지로 바로 이동할 수 있는 링크를 의미합니다.모바일에서도 비슷하게 특정 화면으로 바로 이동할 수 있지만, 웹과 달리 모바일은 플랫폼(Android/iOS)의 차이, 앱 설치 여부 등 다양한 조건이 필요하죠.Firebase의 Dynamic Link는 이러한 Deep Link의 한계를 보완해줍니다.즉, 앱이 설치되어 있..

안녕하세요. 모리스입니다.😀이번 포스트는 재미난 라이브러리 하나를 소개해 보려합니다.!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..

안녕하세요. 모리스입니다.😊이번 포스트도 지난 포스트에 이어서 TS에 관한 포스트 입니다.타입스크립트의 기본 타입에 대해서 알아볼게요! 타입스크립트 공부 극초반에 작성한거라 너무 기본적인 내용이긴하네요.ㅎㅎ그럼 시작해보겠습니다.📌 기본 타입타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원하며, 열거 타입(enum)을 통해 더 편리하게 사용할 수 있어요.기술 노트인 만큼, 어느 정도 타입에 대한 지식이 있다고 가정하고 다른 언어들과 공통되는 타입은 간단히 넘어가려고 해요.📒 Booleanboolean 타입은 true 또는 false 값을 나타내는 타입이에요.let isDone: boolean = false;📒 Number타입스크립트의 모든 숫자는 부동 소수점 값이에요. number 타입으..

안녕하세요. 모리스입니다.😊이번 포스트는 제가 아주 뜨끈뜨끈한 신입일 때 JavaScript로 RN을 시작했고, 그 후 프로젝트를 TypeScript로 리펙토링을 하면서 스터디한 내용을 작성해 볼까 합니다.Velog 저~~기 깊숙한 곳에 박혀있던걸 이번에 티스토리로 이사하면서 꺼내보네요.ㅎㅎ 자 그럼 시작해 보겠습니다:)📌 TypeScript란?TypeScript는 JavaScript를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어예요. TypeScript의 특징은 다음과 같아요:컴파일 언어, 정적 타입 언어📍 JS는 동적 타입의 인터프리터 언어로, 오류를 런타임에서야 발견할 수 있어요. 반면 TS는 정적 타입의 컴파일 언어로, 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 JS 코드로 변..

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

안녕하세요. 모리스입니다.😄이번 포스트에서는 이전 포스트에서 언급했던 Recoil Hook에 대해서 작성해 보려합니다.📒 useRecoilState()주어진 Recoil 상태의 값과 그 상태를 업데이트하는 함수를 [value, setter] 형태의 튜플로 반환해요.이 Hook은 해당 상태를 컴포넌트가 구독하도록 만들기 때문에, 상태가 바뀌면 자동으로 리렌더링이 돼요.function useRecoilState(state: RecoilState): [T, SetterOrUpdater];type SetterOrUpdater = (value: T | ((prev: T) => T)) => void;state: atom 또는 쓰기 가능한 selector이 Hook은 React의 useState()와 사용법이 거..

안녕하세요. 모리스입니다.😊지난 포스트에서는 React의 Recoil에 대해 아주 간단하게 찍먹해 보았는데요.이번 포스트는 Recoil에서 자주 사용되는 API 몇 가지에 대해 작성해 보려 합니다.! 📒 RecoilRootRecoil 상태를 사용하려면, 반드시 컴포넌트 트리 최상위에 RecoilRoot를 선언해야 해요. 그래야 전역에서 상태를 감지하고 관리할 수 있겠죠?React Native에서는 보통 루트 컴포넌트인 App.js에 Recoil Root를 선언해요.import React from 'react';import { RecoilRoot } from 'recoil';function App() { return ( );} 📒 atom()atom은 Recoil에서 상태..

안녕하세요. 모리스입니다.😄이번 포스트에서는 React에서 상태관리 라이브러리 중 하나인 Recoil 라이브러리에 대해서아주 간단하게 찍먹 해보려고 합니다.!! 참고로 저는 RN개발을 했기 때문에 대부분의 예제는 RN으로 작성했습니다.😁자 그럼 React의 Recoil은 무었이냐.. 부터 볼까요? Recoil은 React의 상태 관리를 위해 Facebook에서 만든 라이브러리예요. Atoms(공유 상태)와 Selectors(파생 상태)를 중심으로 데이터 흐름 그래프를 구성할 수 있어요. Atoms는 컴포넌트가 구독할 수 있는 상태의 기본 단위이고, Selectors는 이 상태를 기반으로 동기 또는 비동기 연산을 통해 새로운 값을 만들어주는 순수 함수예요.📍 AtomsAtoms는 상태를 저장하는 단위..