jinidev

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

React Native 2024. 10. 4. 18:53

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의 기본 도구에는 없거나 직접 설정이 필요한 것들이 많습..

React Native 2024. 8. 9. 21:54

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

ORM 2024. 7. 23. 18:16

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

상태관리 2024. 7. 13. 10:56

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

상태관리 2024. 7. 10. 03:11

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

React Native 2024. 6. 17. 18:15

Canvas로 그림 그리기 기능 구현: 이슈와 해결 과정 Canvas를 활용해서 그림 그리는 기능을 구현해 보았습니다. 이 과정에서 발생했던 이슈들을 정리해보고자 합니다. 📍 Canvas란 무엇인가?Canvas는 HTML5의 일부로 도입된 강력한 그래픽 인터페이스입니다. HTML 문서에 태그를 사용하여 그래픽 영역을 만들 수 있으며, 이 영역에서 JavaScript를 사용해 동적으로 그림을 그리거나 애니메이션을 생성할 수 있습니다. Canvas는 래스터 그래픽을 다루기 위한 도구로, 픽셀 단위로 그래픽을 조작하는 데 매우 유용합니다.래스터 그래픽래스터 그래픽은 픽셀, 즉 작은 점들의 집합으로 이루어진 이미지 형식을 말합니다. 각 픽셀은 고유한 색상 정보를 가지고 있으며, 이 픽셀들이 모여 전체 이미지..

React 2024. 5. 26. 20:37

브랜치와 Git Merge 방법 이번에는 브랜치와 Git Merge에 대해 살펴보겠습니다. 주로 git merge 명령어를 사용해온 경험을 바탕으로, 다양한 병합 방법과 각 방식의 차이점을 비교해보겠습니다. Git에서 브랜치 관리는 협업과 버전 관리를 효율적으로 진행하는 데 매우 중요합니다. 그럼 다양한 병합 방법과 그 특징을 살펴보겠습니다. 🔍 브랜치란?git merge 방법에 대해 알기 위해서는 먼저 브랜치와 커밋 히스토리에 대한 이해가 필요합니다.  Git 브랜치 - 브랜치란 무엇인가를 참고해서 정리해 보겠습니다.✅ 브랜치는 원래 코드와 상관없이 독립적으로 개발을 진행하기 위한 것입니다. 원래 코드와 동일하지만, 분리되어 있기 때문에 부담 없이 작업할 수 있습니다. 🔍 Git이 데이터를 다루는 ..

Git&GitHub 2024. 3. 20. 13:22