기술 블로그

React Native 앱을 개발하다 보면 하단 탭 네비게이션을 구현할 일이 많은데요. 이번에는 React Navigation의 Bottom Tab Navigator에서 탭 아이콘이 어떻게 동작하는지 자세히 살펴보려고 합니다.기본 구현 방식Bottom Tab Navigator에서 각 탭의 아이콘은 다음과 같이 구현됩니다: ( ), }}/>여기서 주목할 점은 tabBarIcon이 함수라는 것입니다. 이 함수는 color와 size 두 가지 파라미터를 받아서 아이콘 컴포넌트를 반환합니다.색상 처리 방식탭 아이콘의 색상은 탭의 활성화 상태에 따라 자동으로 변경됩니다. 이는 Navigator 설정에서 정의한 색상값을 기반으로 동작합니다:React Navigation은 내부적으로 현재 선택된 탭..

React Native에서 키보드 어보이딩(Keyboard Avoiding) 최적화하기모바일 환경에서는 텍스트 입력을 받을 때 키보드가 화면을 가리는 문제가 자주 발생한다. 특히 React Native에서는 TextInput을 사용할 때 이 문제를 해결하기 위해 여러 접근 방식을 고려해야 한다. 이번 글에서는 키보드 어보이딩을 효과적으로 적용하는 방법을 정리해 본다.1. KeyboardAvoidingView 사용하기React Native에서 기본적으로 제공하는 KeyboardAvoidingView를 활용하면 키보드가 나타날 때 자동으로 레이아웃을 조정할 수 있다.import React, { useState } from 'react';import { View, TextInput, Button, Keyboa..

React Native 앱 패키지명 & 번들 식별자 변경 가이드React Native로 앱을 만들다 보면, 처음에는 com.myapp처럼 간단히 패키지명을 써 두고 진행하게 됩니다. 하지만 서비스를 런칭하기 직전 혹은 중간에 회사 도메인 규칙이나 프로젝트 이름이 바뀌어야 할 때, “패키지명을 어디서부터 바꿔야 하지?”라는 고민에 빠지곤 하죠.이번 포스팅에서는 iOS와 안드로이드에서 패키지명(또는 번들 식별자)을 수동으로 변경하는 방법과 react-native-rename 라이브러리를 이용해 한 번에 바꾸는 방법을 간단히 정리해 보겠습니다.1. 패키지명 vs. 번들 식별자안드로이드: applicationId라고도 부르고, 흔히 “패키지명”이라고 부릅니다. 예: com.mycompany.myapp. A..

프로젝트에서 정적 파일을 빌드 디렉토리로 복사하는 과정에서 발생하는 문제는 의외로 자주 겪는 이슈이다. 특히 esbuild처럼 최소한의 설정을 제공하는 도구를 사용할 경우, 정적 파일 복사 기능이 기본적으로 포함되어 있지 않기 때문에 직접 해결 방법을 구현해야 한다.나는 이 문제를 해결하기 위해 Node.js의 fs/promises 모듈을 활용한 간단한 스크립트를 작성했다. 이 글에서는 그 과정을 단계별로 설명한다.문제 상황esbuild를 사용하여 프로젝트를 빌드할 때, favicon.ico와 같은 정적 파일을 dist 폴더로 복사해야 했다. 그러나 esbuild 자체에는 public 폴더와 같은 정적 파일을 처리하는 기능이 없었다. 따라서 파일 복사를 수동으로 처리해야 했다.해결 방법1. Node.js..

React로 개발한 Single Page Application(SPA)의 빌드파일을 테스트할 때 문제 중 하나가 404 오류다. 특히 브라우저에서 URL을 직접 입력하거나 새로고침했을 때 이 문제가 발생할 가능성이 크다. 이 글에서는 그 원인과 이를 해결하는 방법을 다루며, serve를 활용한 간단한 해결책을 소개한다.404 오류의 원인SPA는 클라이언트 측 라우팅을 기반으로 동작한다. 예를 들어 http://localhost:3000/disks/list 경로로 이동하면 브라우저는 이를 서버에 요청한다. 하지만 서버는 해당 경로에 대응하는 파일을 찾으려고 하며, 결과적으로 404 Not Found 오류를 반환한다. 이는 정적 파일 서버가 동적 라우팅을 처리하지 못하기 때문이다.해결 방법: serve를 활..

리액트 프로젝트에서 SVG 파일을 사용할 때, svgr 플러그인을 사용해 SVG 파일을 리액트 컴포넌트로 변환하는 경우가 많다. 그러나 특정 SVG 파일은 크기가 커서 컴포넌트로 변환하면 번들 용량이 불필요하게 커지는 문제가 생길 수 있다. 이번 글에서는 esbuild와 svgr 설정에서 특정 SVG 파일만 외부 파일로 처리하는 방법을 다뤄보겠다.문제 상황esbuild와 esbuild-plugin-svgr를 사용하여 대부분의 SVG 파일을 리액트 컴포넌트로 변환해 사용했다. 하지만 일부 SVG 파일이 번들에 포함되어 용량이 크게 증가하는 문제가 발생했다. 예를 들어, assets/analysisfail.svg 파일이 번들 용량의 상당 부분을 차지하고 있었는데, 이 파일만 예외적으로 외부 파일로 처리하고 ..

현대 웹 개발에서 성능 최적화는 사용자 경험을 좌우하는 핵심 요소이다. 특히 폰트 파일은 웹 애플리케이션에서 상당한 용량을 차지하는 경우가 많아, 이들의 경량화는 빌드 파일 크기를 줄이는 데 큰 기여를 할 수 있다. 폰트를 경량화하는 방법으로는 사용하지 않는 글리프(glyph)를 제거하거나 필요한 문자 집합만을 포함하는 방법이 있으며, 이를 통해 프로젝트의 전체 파일 크기를 상당히 줄일 수 있다.폰트 경량화의 필요성폰트는 시각적 완성도를 높이는 데 중요한 역할을 하지만, 크기가 커지면 로딩 속도에 부정적 영향을 미친다. 특히 웹사이트나 애플리케이션이 여러 폰트를 사용하거나 다양한 스타일을 포함할 경우, 로딩에 소모되는 시간과 자원이 크게 늘어난다. 따라서 폰트를 경량화하면 불필요한 리소스를 줄이고, 최적..

문제 상황: Type Guard와 every 메서드의 한계TypeScript는 코드의 타입 안전성을 보장하기 위해 컴파일 시점에 타입을 검사한다. 이 과정에서 타입 가드와 타입 단언을 활용해 컴파일러가 타입을 정확하게 추론하도록 돕는다. 하지만 때로는 타입 가드를 사용했음에도 TypeScript가 배열의 타입을 확신하지 못하는 경우가 생긴다.예시 코드다음 예제에서 result 배열이 FileSystemFileEntry 또는 FileSystemDirectoryEntry로만 구성되어 있는지를 every 메서드를 통해 확인하고자 한다.if ( result.length > 0 && result.every(entry => isFileSystemFileEntry(entry) || isFileSystemD..

타입스크립트에서 배열 요소 타입 가드: 왜 작동하지 않는가?타입스크립트는 정적 타입 기반의 언어로, 타입을 명확히 정의하고 코드의 안정성을 높이는 데 중요한 역할을 한다. 그중에서도 타입 가드(Type Guard)는 변수가 특정 조건을 만족할 때 해당 변수의 타입을 좁히는 기능을 담당한다. 하지만 배열 요소에 타입 가드를 적용할 때는 예상치 못한 오류가 발생할 수 있다. 이번 글에서는 배열 요소에 타입 가드가 제대로 작동하지 않는 이유와 이를 해결하는 방법을 살펴보겠다.타입 가드란?타입 가드는 변수의 타입을 안전하게 좁히기 위해 사용하는 조건문이다. 대표적인 예로 typeof, instanceof, in 연산자가 있다. 이들은 특정 조건을 만족할 때 타입스크립트가 변수를 더욱 구체적인 타입으로 추론하도록..

작성중