인기 글

[React Native] AOS - Kakao SDK를 이용한 카카오 로그인

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

React Native 2025.01.27 0

[React] html2canvas 텍스트 위치 오류 해결

간단하게 인스타그램 짤을 만들고 다운로드하는 기능을 만드는데 텍스트가 아래로 밀리는 문제가 발생하였다.아래의 사진이 오류가 발생한 사진이다.나는 tailwind를 사용해서 css를 작성하고 있었고 아래의 문제로 줄바꿈 오류가 발생하는것을 알았다.[에러원인] Tailwind CSS의 기본 설정: Tailwind CSS는 초기화 과정(preflight)에서 모든 img 태그의 CSS 속성을 display: block;으로 설정합니다.Block 요소의 특성: display: block; 속성은 요소가 줄바꿈을 일으키게 합니다. 즉, 요소 뒤에 자동으로 새 줄이 생깁니다.웹 브라우저 vs html2canvas: 웹 브라우저에서는 이 줄바꿈이 시각적으로 명확하게 보이지 않을 수 있지만, html2canvas가 H..

React 2025.04.06 0

[React Native] flex 속성 가로 정렬 (feat. tailwind css)

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 ( 가로 정렬 ..

React Native 2024.12.09 2