React Native 앱 성능 최적화 앱 개발 과정에서 적용했던 다양한 성능 최적화 방법에 대해 정리해 보겠습니다. 이는 앱의 성능을 극대화하고, 사용자 경험을 향상시키기 위해 필요한 요소들입니다. 1. useQuery, useInfiniteQuery 사용React Query의 useQuery와 useInfiniteQuery를 사용해 비동기 데이터 관리를 최적화했습니다. 이 두 훅을 통해 API 호출 시 발생할 수 있는 중복을 줄이고, 데이터를 효율적으로 캐싱하여 상태 관리를 개선할 수 있었습니다.특히 queryKey를 사용하여 각 쿼리를 고유하게 식별함으로써 캐싱 효율성을 높였습니다. 이를 통해 이미 요청된 데이터는 빠르게 로드되어 사용자 대기 시간을 최소화할 수 있었습니다. 무한 스크롤을 지원하는 ..

Expo 주요 개념 정리 🗝️  Key concepts of ExpoExpo app:Expo app는 Expo tools를 사용하여 개발된 리액트 네이티브 앱을 의미합니다. 여기서 'Expo tools'는 Expo SDK, Expo Go, Expo CLI 등을 포함하여 앱 개발, 테스트, 배포 과정에서 제공하는 다양한 도구와 라이브러리를 지칭합니다.Expo 앱과 기본 React Native 앱의 개발 프로세스 차이Expo app과 Expo 도구를 사용하지 않는 리액트 네이티브 앱은 개발 프로세스가 다릅니다. Expo는 다양한 도구와 서비스를 제공하며, 이들은 독립적으로 사용할 수 있습니다. Expo가 제공하는 기능 중 일부는 React Native의 기본 도구에는 없거나 직접 설정이 필요한 것들이 많습..

Prisma ORM: 기본 개념과 동작 원리 Prisma ORM이란?Prisma ORM은 차세대 오픈소스 ORM입니다.ORM은 "Object-Relational Mapping"의 약자로, 객체-관계 매핑을 의미합니다. ORM은 데이터베이스의 테이블과 프로그래밍 언어의 객체 사이의 매핑을 자동화하여, 데이터베이스와의 상호작용을 더 쉽고 효율적으로 만들어줍니다. 왜냐하면 개발자가 객체 지향 언어로 데이터베이스의 데이터를 더 쉽게 조작할 수 있게 해 주기 때문입니다. ORM을 사용하면 SQL 쿼리 없이 데이터를 데이터베이스에 저장하고 관리할 수 있습니다.다음과 같은 구성 요소로 이루어져 있습니다.Prisma Client: 자동 생성되고 타입 안전한 Node.js 및 TypeScript용 쿼리 빌더Prisma ..

Next.js(app router)에서 Redux Toolkit 사용하기 Next.js는 React에서 널리 사용되는 서버 측 렌더링 프레임워크로, Redux를 올바르게 사용하기 위해서는 몇 가지 고려해야 할 점들이 있습니다. 아래와 같은 내용인데요. 하나씩 살펴보겠습니다.요청별 안전한 Redux 스토어 생성: Next.js 서버는 동시에 여러 요청을 처리할 수 있습니다. 따라서 각 요청마다 Redux 스토어를 생성해야 하며, 요청 간에 스토어를 공유해서는 안됩니다.SSR 친화적인 스토어 초기화: Next.js 애플리케이션은 서버에서 먼저 렌더링 되고, 이후 클라이언트에서 다시 렌더링됩니다. 클라이언트와 서버에서 동일한 페이지 내용을 렌더링하지 않으면 'hydration error'가 발생할 수 있습니다..

Redux Overview and Concepts Redux란?Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 컴포넌트 각각에서 상태가 수정될 경우에는 언제, 어디서 버그가 발생한 건지 추적하기 어렵습니다. 물론 앱의 규모가 작다면 어렵지 않겠지만요. Redux는 흩어져 있는 상태 관리 로직을 중앙화하여 디버깅과 테스트가 쉬워지게 합니다. 이것이 Redux를 사용하는 이유입니다. Redux는 애플리케이션의 여러 부분에 걸쳐 필요한 "전역" 상태를 관리하는 데 도움이 됩니다. Redux에서 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되는지, 그리고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 쉽게 파악할 수 있습니다. R..

React Native에 대해 알아보기 Learn once, write anywhere.리액트 네이티브의 슬로건은 "한 번 배우면 어디서든 쓸 수 있다(Learn once, write anywhere)"입니다. 이 말이 의미하는 바가 무엇인지, 그리고 실제로 리액트 네이티브를 어디에서 어떻게 활용할 수 있는지 알아보겠습니다.React Native리액트 네이티브는 리액트의 강점을 네이티브 개발로 확장하여, 리액트를 아는 개발자들이 쉽게 네이티브 앱을 만들 수 있게 도와줍니다. 또한, 네이티브 개발자들은 React Native를 통해 공통 기능을 한 번만 작성함으로써 다양한 네이티브 플랫폼 간의 기능을 일관되게 유지할 수 있습니다.리액트 네이티브는 자바스크립트로 작성되며, 네이티브 코드로 변환되어 렌더링 됩..