Algoroot's space

안녕하세요, 오늘은 Web API 중 하나인 Intersection Observer API에 대해 알아보는 시간을 갖겠습니다. 현대의 웹 개발은 사용자 경험을 개선하고 페이지 성능을 최적화하는 것이 매우 중요합니다. 이를 위한 다양한 기술 중 하나가 바로 "Intersection Observer API"입니다. IntersectionObserver he Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. Intersection Obser..

안녕하세요. 오늘은 React Native의 FlatList를 통한 무한스크롤을 구현하는 방법을 소개하고자 합니다. React Native에서 제공하는 FlatList에서 무한 스크롤 기능을 갖춘 InfinityFlatList 컴포넌트를 만들었습니다. (네이밍은 제 마음대로..) 이 컴포넌트는 FlatList와 유사한 기능을 제공하면서 React Query useInfiniteQuery의 Properties과 병합해 사용자가 리스트의 끝까지 스크롤할 때 추가 데이터를 자동으로 로드하는 기능을 갖추고 있습니다. 이 글에서는 InfinityFlatList 컴포넌트의 구현 과정을 안내하고 React Native 프로젝트에서 어떻게 사용할 수 있는지 설명하겠습니다. 시작하기 먼저, InfinityFlatList..

안녕하세요. 오늘은 Google OAuth 인증을 팝업모드로 구현한 과정을 소개하고자 합니다. Background Google Ads 계정을 가져와야 하는 로직이 있었습니다. Process 1. 서버에서 Google 계정 연동을 위한 URL을 받습니다. 2. 받은 URL로 Google 계정 연동 버튼 클릭 시 팝업 창을 띄웁니다. 3. Google 연동 후 Callback URL에서 코드를 가져옵니다. 4. 가져온 코드로 User의 Google Account ID를 저장한 후 다음 단계로 넘어갑니다. 1번~3번의 과정은 클라이언트에서도 Google Client ID를 사용하면 code를 받을 수 있어 처음에는 @react-oauth/google이라는 라이브러리를 설치하여 구현하였습니다. 하지만 특정 이유..

React Native의 FlatList, ScrollView 와 같은 컴포넌트에는 refreshControl 속성이 있습니다. 이 prop을 사용하면 사용자가 스크린을 아래로 내릴 때 (Swiping Down) 리스트를 새로고침할 수 있는 기능을 구현할 수 있습니다. 해당 기능은 refreshControl이라는 속성에서 제공되는데요. 자세한 기본 설명은 React Native 문서를 참고해주세요. 이번 글에서는 refreshControl를 구현하기 위해 생성한 useRefreshing이라는 커스텀 훅에 대해 알아보겠습니다. 이 훅은 리액트 쿼리(Query)를 무효화하고 새로고침하는 기능을 제공하여 애플리케이션의 데이터 관리를 향상시킵니다. useRefreshing 의 기능과 목적 useRefreshin..

안녕하세요, 오늘은 리액트네이티브에서 navigation, route를 사용할 때 유용한 제네릭타입을 만든 과정을 소개해보고자 합니다. 제네릭 타입을 사용하여 다양한 내비게이션 관련 속성과 타입을 정의하는 방법에 대해 알아보겠습니다. 제네릭 타입은 TypeScript에서 매우 유용한 기능으로, 타입 안정성을 유지하면서 여러 유형의 값을 다룰 수 있습니다. 이를 활용하여 내비게이션 관련 코드를 더 유연하고 재사용 가능하게 만들 수 있습니다. 기존 사용법 기존에는 어떻게 사용하고 있었을까요? import React from 'react'; import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'; import { CompositeNavi..

안녕하세요. 오늘은 Node.js를 활용한 SVG 파일 자동 모듈화 방법에 대해서 작성해 보고자 합니다. Background 회사 내부에는 개발에 사용하는 tokript라는 스크립트가 있습니다. 해당 스크립트는 commit 규칙뿐만 아니라 Api, Image, svg, page 등을 생성해 주는 아주 간편하고 유용한 스크립트입니다. 문제는 React-native에서 svg파일의 아이콘을 사용할 때 선언하는 방식이 tokript의 아이콘을 생성하는 방식과는 달라서 tokript에서 gen:icon을 사용할 수 없었습니다. 수정 요청을 할까하다가 직접 만들고 싶은 호기심에 작성해 보게 되었습니다. 폴더 안의 폴더가 있어 재귀함수를 적용시켜 탐색하였습니다. 1. 원하는 모듈의 형태와 추출할 경로 들어가기 앞서..

안녕하세요 오늘은 하나의 레포지토리의 하위 폴더에 모듈을 생성하는 submodule 생성 법을 알아보고자 합니다. 저의 경우 Study라는 강의, 공부 전용 레포지토리가 있는데요. 해당 레포지토리의 하위폴더에서 서브모듈을 생성해 보겠습니다. 1. 기존 레포지토리 디렉터리로 터미널 접속 2. 서브모듈 생성 git submodule add https://github.com/[사용자 아이디]/[자식 저장소 명]. git [디렉터리 명] eg. git submodule add https://github.com/AlgoRoots/tdd-unit-basic.git TDD-UNIT-BASIC 이 작업을 수행하면. gitmodules 파일이 생성되고. git/. config 파일에 서브모듈 관련 내용이 추가됩니다. 이..

안녕하세요 오늘은 Mac에서 Alias 설정하는 방법에 대해 알아보겠습니다. Alias 사용 배경 React native를 하면서 m1 맥북에서 CocoaPods를 설치하고 pod install를 수행해 패키지를 다운받 을 때 'pod install'이라는 명령어로 패키지를 설치하게 되는데요. Intel 프로세서 아키텍처는 x86_64 이고 Apple Silicon M1은 arm64 아키텍처를 사용하기 때문에. m1 칩을 탑재한 맥북에서는 해당 명령어가 먹지 않아 아키텍처를 바꿔주는 아래의 명령어를 실행해 주어야 합니다. arch -x86_64 pod install 업무를 하며 자주 사용하는 명령어인데 칠 때마다 꽤 길어지니 명령어를 pod으로 줄이는 방법을 고민해보게 되었습니다. Alias : 별칭 특..