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현재 애플리케이션의..

SVN은 Subversion의 약자로, 소스 코드와 파일의 변경 이력을 관리하기 위한 버전 관리 시스템이다. 여러 개발자가 하나의 프로젝트를 함께 작업할 때 발생하는 충돌을 줄이고, 변경 이력을 추적하며, 이전 상태로 되돌릴 수 있도록 돕는 도구이다. SVN은 중앙 집중형 버전 관리 시스템이라는 점에서 Git과 구조적으로 큰 차이를 가진다. SVN 저장소는 일반적으로 세 가지 주요 디렉터리 구조를 가진다. 1. Trunk : 현재 개발 중인 버전Trunk는 메인 개발 작업을 진행하는 폴더로, 실제 서비스나 배포 기준이 되는 최신 개발 코드가 위치한다. Git의 main 브랜치와 유사한 역할을 하며, 항상 최신의 코드 상태를 유지하는 것이 중요하다.일반적으로 Trunk에서 작업을 시작하고, 새로운 기능..