개발/React & React Native (27) 썸네일형 리스트형 [React Native] 리액트 네이티브에서 Apollo Client로 GraphQL 사용하기 (with. SpaceX) Apollo Client란?Apollo Client는 GraphQL API와의 통신을 간편하게 도와주는 클라이언트 라이브러리이다.쿼리(Query)와 뮤테이션(Mutation) 요청: 클라이언트에서 원하는 데이터를 서버에 요청하거나 변경 작업 수행캐싱: 서버에서 가져온 데이터를 클라이언트 측에 캐싱하여 네트워크 요청을 최소화서버 상태 관리: 애플리케이션의 로컬 상태와 서버 상태를 통합적으로 관리 REST API와의 차이점은 이전 포스팅을 참고! REST API와 GraphQL의 차이점 알아보기REST API vs GraphQL API개발에서 데이터를 전달하고 처리하는 방법은 매우 중요하다.REST API는 오랜 시간 동안 표준으로 자리 잡아 왔고 GraphQL API의 등장 이후로 해당 방식을 채택하는 기.. [React Native] 리액트 네이티브 최신 버전 New Architecture 설정 끄기 React Native 0.76부터 New Architecture가 기본값으로 활성화되어 있다. New Architecture는 성능과 확장성을 개선한 새로운 아키텍처로, TurboModules와 Fabric Renderer를 기본적으로 제공하며 최신 React Native 프로젝트에 기본 적용된다. 하지만 프로젝트에 따라 New Architecture를 바로 사용할 수 없는 상황이 있을 수 있다. 예를 들어, 사용하는 라이브러리들이 아직 New Architecture를 지원하지 않거나, 기존 프로젝트에서 호환성 문제가 발생할 수 있다. 이럴 경우에 대비해 React Native는 New Architecture를 비활성화할 수 있는 옵션을 제공하고 있다. 공식 문서 https://reactnative.d.. [React Native] react-native-skia 를 활용해 토스 복권 긁기 따라해보기 가끔씩 여러 앱을 사용하다 보면 이런 기능은 어떻게 구현했을까 라는 궁금증이 생긴다.토스의 만보기를 통해 받는 복권긁기 역시 그런 궁금증을 가지게 하는 기능 중 하나였다.토스의 일부는 React Native로 만드는 것으로 알고 있어서(아닐 수도 있음.. 채용 공고보고 그런갑다 하는거임) 한번 구현해보자! 하는 맘으로 만들어보았다. 우선 토스의 복권 긁기 기능을 살펴보았다. 복권을 받고 광고를 보면 나오는 화면이 위와 같다.'여기를 긁어보세요' 문구와 함께 애니메이션 동작 -> 사용자가 직접 복권을 긁음 -> 다음 화면으로 넘어감 -> 당첨금 텍스트 및 카드, 상단 팝업과 하단 버튼이 Fade-in으로 등장 구글에 'react native scratch card'를 검색해보니 꽤나 괜찮은 예제들.. [React] 리액트 라인차트 (Line Chart) 컴포넌트 만들기 지난 글에 이어 이번에는 SVG를 활용하여 라인 차트를 그리고 react-spring으로 애니메이션 효과를 추가해 주었다.차트의 데이터 배열, 최대 데이터 수, 차트의 Y축의 최댓값을 받아 변형되는 라인차트 컴포넌트를 만들었다. RN으로도 해당 차트를 그리기도 했었는데, RN의 경우에는 이 코드를 많이 참고했었다.https://github.com/indiespirit/react-native-chart-kit/tree/master LineChart.tsximport { useCallback, useEffect, useRef, useState } from "react";import { useSpring, animated } from "react-spring";const DEFAULT_FILL_COLOR = .. [React] 리액트 원형 프로그래스 (Circle Progress Bar) 컴포넌트 만들기/예제 이런 식으로 생긴 원형 Progress는 자주 사용되는 디자인 요소 중 하나이다. 이런 프로그래스 컴포넌트를 라이브러리가 아닌, 직접 커스텀할 수 있는 컴포넌트로 생성해 보았다. 게시글에 올라가는 코드는 React 프로젝트이지만, 애니메이션 부분을 React Native에서 제공하는 Animated를 활용하여 Path 컴포넌트에 애니메이션을 적용하면 동일하게 작동된다. 전체 코드의 완성본은 다음과 같다. 반지름과 수치를 조절할 수 있는 range bar를 태그를 활용해 생성하였고, react-color라는 괜찮은 라이브러리가 있어 색상 피커도 추가해보았다. 포스팅에서는 가장 중요한 CircleProgress 컴포넌트에 대해서만 설명하도록 한다. CircleProgress.tsximport { animat.. [React Native] React Native의 New Architecture (JSI, JavaScript Interface) React Native의 기존 구조 기존 구조는 JavaScript와 Native 사이의 통신을 위해 Bridge를 사용했으며, 데이터를 JSON 형식으로 직렬화하여 전달하는 방식으로 이루어졌다. 그러나 Bridge 기반 통신은 이벤트 생성 속도를 따라가지 못해 성능 이슈가 발생하는 한계가 있다. 이러한 문제를 해결하기 위해 React Native 0.73 버전에서부터 Bridgeless Mode 설정이 가능하도록 적용되었다. 또한 0.74 버전부터 Bridgeless Mode가 기본값으로 변경되었다. https://ramveloper.tistory.com/61 [React Native] React Native의 구 Bridge 아키텍쳐(Architecture)React Native 공식 블로그에 New.. [React Native] React Native의 구 Bridge 아키텍쳐(Architecture) React Native 공식 블로그에 New Architecture가 새로 소개되었을 때(https://reactnative.dev/blog/2024/04/22/release-0.74), 작업 중이던 프로젝트에서는 일부 이슈때문에 당장 업데이트가 불가한 상황이었다.그렇게 잠시 잊고 살았는데 어느새 RN이 0.76버전까지 소개되었고, 이젠 New Architecture 위주의 업데이트가 이루어져서 더 늦기 전에 한번 정리해 둔 내용을 옮겨보려 한다. 우선, 왜 New Architecture가 나왔는지에 대한 정보가 필요하기 때문에 기존 구조에 대해 먼저 정리한다.기존 RN의 구조는 다음과 같다.React: React는 애플리케이션의 UI를 선언적으로 정의하는 부분으로, React Native에서 UI .. [React Native/iOS] 리액트 네이티브 환경에서 iOS Privacy Manifest 정책 대응하기 iOS Privacy Manifest 애플이 WWDC23에서 개인정보 보호를 위해 API 오용을 방지하기 위해 사용하는 이유를 개발자가 명시하도록 발표했다. 앱이 앱 사용자의 개인정보를 보호하도록 하는 조치이다. 앱이 사용자의 개인 정보를 취급하는 방식에 대한 개요를 사용자에게 제공하는 개인 정보 취급 개요표(Privacy Nutrition Label) 소개 내용은 링크 참조 2023년 가을부터 사유를 명시해야 하는 API(타사 SDK 포함)를 사용하는 새로운 앱 또는 앱 업데이트를 App Store Connect에 업로드하는 경우, 앱의 개인정보 보호 목록에 승인된 사유를 제공하지 않으면 알림을 받게 된다. 2024년 봄부터 App Store Connect에 새로운 앱 또는 앱 업데이트를 업로드하려면 .. 이전 1 2 3 4 다음
