돼지공방

프로젝트에서 계정 로그인을 카카오와 구글을 이용하여 로그인을 진행하기로 했다. 카카오 로그인의 경우 보통 2가지가 존재한다.1. sdk를 이용하는 경우2. 웹뷰를 이용하여 로그인을 띄워주는 경우 처음에 웹뷰를 이용하여 로그인을 띄워주려고 생각했었다. 하지만 웹뷰는 카카오 앱과 연동이 되는것이 아닌 카카오 로그인 페이지 뷰를 보여주는 형식이기 때문에 네이티브 앱과 연동이 되지 않았다. 그리하여 UX 고려차원에서 kako sdk를 이용하기로 하였다. 빠른 구현을 위하여 react-native-kakao-login 라는 라이브러리를 사용하기로하였다. https://github.com/crossplatformkorea/react-native-kakao-login GitHub - crossplatformkorea..

리액트 네이티브로 개발을 하는 중에 글자 수 초과 시 말줄임 효과 ellipsis (...)처리를 해줘야 할 상황이 생겼다 View className="h-[20%] flex items-center justify-center">        Text className="w-full">내가 만약 너를 ddddddddddddddText>      View>위와 같은 코드를 입력 시 글자가 넘어가는 현상이 있는데 이를 ellipsis로 바꿔야했고 이는 태그 안의 속성으로 제어 할 수 있다. 태그 안에 numberOfLines={number} 속성과 ellipsizeMode={string} 속성이 존재한다.numberOfLines 속성은 보여줄 라인의 수를 나타내고 ellipsizeMode는 초과 시 어떤식..

React Native를 사용하면서 React와 같이 Tailwind CSS를 사용하여 Flex를 통한 가로 정렬을 진행할려고 했습니다. React Native 코어 컴포넌트를 공부 할 때 View는 HTML의 div 태그, Text는 span 태그로 알고있기에 예상으론 가로 정렬이 되어야합니다. 그렇게 평소와 같이 가로 정렬을 위한 flex 코드를 작성했지만 가로 정렬이 먹히지 않았습니다.export default function LoginScreen() { const { width, height } = Dimensions.get("window"); const navigation = useNavigation>(); return ( 가로 정렬 ..

useNavigation은 React Navigation에서 제공하는 훅으로, 현재 화면의 네비게이션 객체에 접근할 수 있게 해줍니다.화면 간 이동, 뒤로가기 등 여러가지 작업을 수행 할 수 있습니다. 타입스크립트를 사용하지 않을 경우, useNavigation은 기본적으로 any 타입의 네비게이션 객체를 반환하는데 타입스크립트 환경에서 any 사용을 지양하기에 올바른 네비게이션 방식을 작성할까합니다.useNavigation을 선언 할 때 타입을 정해줍니다. 여기에 사용한 타입은 라우터 기능을 사용할 주소를 적으면 됩니다. export type RootStackParam = { MainHome: undefined; LoginHome: undefined;};value 값을 undefined로 지정하면 ..

Nativewind란?Nativewind는 TailwindCSS를 React Native에서 사용할 수 있도록 확장한 라이브러리입니다. TailwindCSS의 직관적인 스타일링 방식 덕분에 많은 개발자들이 선호하며, 필자 역시 Nativewind를 프로젝트에 도입하였습니다.설정 전 주의사항이 글에서 다루는 설치 방법은 Expo CLI를 기준으로 작성되었습니다. 다른 CLI 환경에서는 동일한 방법으로 설정할 경우 문제가 발생할 수 있으니 주의하세요.설치 및 설정 가이드1. 라이브러리 설치아래 명령어를 사용해 필요한 라이브러리를 설치합니다.npm install -D tailwindcss@3.3.2npm install nativewind tailwindcss react-native-reanimated reac..

모바일 앱 플랫폼 개발App Platform 선택 이유동기들과 프로젝트 주제를 논의하던 중, AI와 모바일 관련 프로젝트가 주목받고 있음을 알게 되었습니다. 그동안 주로 프론트엔드 프로젝트를 진행해왔던 경험에 더해, 모바일 관련 프로젝트에도 도전하고자 앱 개발 및 배포를 목표로 삼았습니다.React Native 선택 이유타겟 사용자는 10대에서 30대로, 안드로이드와 iOS 기기 사용자 모두를 고려해 플레이스토어와 애플 앱스토어에 배포하기로 결정했습니다. 플랫폼 선택 과정에서 React Native와 Flutter를 검토한 결과, 다음 이유로 React Native를 채택하게 되었습니다:러닝 커브의 용이성React + TypeScript 환경에서의 개발 경험이 많아, Flutter의 Dart 언어에 비해..