앱에 넣은 서드파티 SDK가 Android 릴리즈 빌드에서만 동작하지 않는 문제가 있었다. 디버그 빌드와 iOS에서는 정상이었고, 릴리즈 APK에서만 SDK 기능을 쓰면 "연결 실패" 안내가 떴다.처음에는 환경변수(SDK 키, secret, 설정 파일)가 빠졌다고 의심했다. 원인은 R8의 코드 축소였다. 이 경험을 계기로 R8이 무엇이고 왜 이런 일이 생기는지 정리해 둔다.1. R8이란?R8은 Android 빌드 과정에서 자바 바이트코드를 DEX로 바꾸면서 코드를 줄이고 다듬는 도구다. Android Gradle 플러그인(AGP) 3.4.0부터 기존 ProGuard 대신 R8이 기본으로 쓰인다. R8은 ProGuard 규칙 파일(proguard-rules.pro) 문법을 그대로 이해하므로 규칙을 새로 배..

React Native(Expo) 앱을 현장에 배포하다 보면 문구 하나, 버튼 위치 하나 고칠 때마다 APK를 다시 빌드하고 기기마다 재설치하는 일이 반복된다. 이번에 EAS Update로 OTA(Over-The-Air) 업데이트를 붙이면서 내부 동작 원리를 정리했고, OTA로 해결되지 않는 네이티브 변경 시 강제 업데이트까지 함께 설계했다. 그 과정을 정리해 둔다.환경: Expo SDK 54 / React Native 0.81 / New Architecture / Hermes / CNG(prebuild) / EAS Build1. OTA란?앱을 다시 설치하지 않고 인터넷으로 앱 내용만 교체하는 업데이트다. React Native 앱은 크게 두 부분으로 나뉜다.구성내용바꾸려면네이티브 바이너리APK/IPA ..

파일이나 폴더를 다른 위치에서 참조하도록 연결하는 방식에는 여러 종류가 있다. 대표적으로 하드 링크(Hard Link), 심볼릭 링크(Symbolic Link), 그리고 Windows의 정션(Junction)이 있다. 이름은 비슷하지만 가리키는 대상과 제약 조건이 서로 다르다. 본 글은 세 가지 링크의 정의와 차이를 정리한다.전제: 링크는 무엇을 가리키는가대부분의 파일시스템에서 파일의 실제 데이터와 메타정보(크기, 권한, 데이터 위치 등)는 inode에 저장되며, 파일 이름은 해당 inode를 가리키는 디렉터리 항목에 불과하다. 즉 이름과 실제 데이터는 분리되어 있다. 세 가지 링크의 차이는 이 지점에서 갈린다. 하드 링크는 inode를 직접 가리키고, 심볼릭 링크와 정션은 경로(이름)를 가리킨다.하드 ..

서비스를 개발하다 보면 사용자에게 특정 시점에 메시지를 전달해야 하는 경우가 많다.새로운 메시지가 도착했거나, 주문 상태가 변경되었거나, 새로운 콘텐츠가 등록되었을 때 사용자에게 알림을 보내는 것이 대표적인 예이다.이때 많이 사용되는 기술이 FCM(Firebase Cloud Messaging)이다.FCM은 Google Firebase에서 제공하는 크로스 플랫폼 메시징 서비스로, Android, iOS, Web 등 다양한 플랫폼의 클라이언트에 메시지를 안정적으로 전달할 수 있도록 지원한다.단순히 알림창을 띄워주는 기능이라고 생각하기 쉽지만, 실제로는 메시지를 작성하는 서버 환경부터 FCM 백엔드, 플랫폼별 전송 레이어, 사용자 기기의 FCM SDK까지 여러 구성요소가 함께 동작한다.1. FCMFCM(Fir..

useMutation | TanStack Query React Docstsx const { data, error, isError, isIdle, isPending, isPaused, isSuccess, failureCount, failureReason, mutate, mutateAsync, reset, status, submittedAt, variables, } = useMutation( { mutationFn, gcTime...tanstack.com TanStack Query는 웹 애플리케이션에서 서버 상태를 가져오고, 동기화 및 업데이트하며 데이터를 쉽게 관리할 수 있게 해주는 라이브러리 ※ 서버 상태 vs 클라이언트 상태 클라이언트 상태 : UI 상태, 모달 열림 여부 등 → useState, Re..

프론트엔드 개발 중에 한 번쯤은 z-index가 더 높은 모달이 낮은 모달보다 아래에 렌더링되는 경험을 했을 것이다. z-index가 아무리 높아도 특정 모달 위로 렌더링되지 않는 경우가 있다. 이 문제를 이해하기 위해선 먼저 Stacking Context와 Portal에 대한 이해가 필요하다.Stacking Context란?Stacking Context는 가상의 z축을 사용해 HTML 요소의 렌더링 순서를 계산하는 개념이다. 중요한 것은 z-index는 같은 Stacking Context 내부에서만 비교된다는 점이다. 서로 다른 Stacking Context에 속한 요소들은 z-index 숫자를 직접 비교하지 않는다.예를 들어 아래와 같은 코드를 보자. #root { position:..

Hook은 함수형 컴포넌트에서 상태와 생명주기를 사용할 수 있도록 해주는 기능이다. 과거에는 상태와 생명주기를 사용하려면 클래스 컴포넌트를 사용해야 했지만 Hook 도입 이후 함수형 컴포넌트에서도 동일한 기능을 사용할 수 있다. Hook의 기본 규칙최상위에서만 호출한다반복문, 조건문, 중첩 함수 내부에서 호출 XReact 함수 컴포넌트 또는 Custom Hook에서만 호출한다이는 React가 Hook 호출 순서를 기준으로 상태를 관리하기 때문이다. 주요 React Hook 정리1. useState컴포넌트 내부에 상태(state)를 추가 const [state, setState] = useState(initialValue)예시const [count, setCount] = useState(0)return (..

Redux는 JavaScript 애플리케이션에서 전역 상태를 관리하기 위한 라이브러리이다.주로 React와 함께 사용되며, 애플리케이션의 상태를 예측 가능하게 관리하는 것을 목표로 한다.Redux가 필요한 이유React는 컴포넌트 단위로 상태를 관리한다.이 방식은 규모가 작은 애플리케이션에서는 문제가 없으나, 다음과 같은 상황에서는 한계가 발생한다.여러 컴포넌트에서 동일한 상태를 사용해야 하는 경우props를 여러 단계로 전달해야 하는 구조가 되는 경우상태가 어디에서 변경되었는지 추적하기 어려운 경우Redux는 이러한 문제를 해결하기 위해 상태를 중앙에서 관리하는 구조를 제공한다.Redux의 핵심 개념Store모든 상태가 저장되는 공간이다.애플리케이션 전체에서 하나만 존재한다.State현재 애플리케이션의..