Engineering/Mobile
React Navigation을 쓰다 보면 useNavigation()이 닿지 않는 곳에서 화면을 옮겨야 할 때가 온다. 딥링크 핸들러, 푸시 알림 콜백, 외부 SDK 콜백, 전역 인터셉터 같은 "컴포넌트 트리 바깥"이다. navigationRef를 쓰면 되지만, 막상 해보면 빈 화면·흰 화면 같은 타이밍 버그가 줄줄이 튀어나온다. 이 글은 트리 밖 화면 전환을 실제로 안정적으로 만들기까지 밟은 과정과, 그 사이에 만난 버그들의 정리다.문제 — useNavigation이 닿지 않는 곳화면 전환은 보통 컴포넌트 안에서 useNavigation() 훅으로 한다. 그런데 React 컴포넌트가 아닌 곳에서 전환을 트리거해야 하는 경우가 의외로 많다.딥링크 핸들러 — linking.getInitialURL / s..
2026.06.08
댓글
Engineering/FrontEnd
리액트로 외부 라이브러리나 SDK를 붙이다 보면 한 번쯤 마주치는 함정이 있다. 부모에서 콜백을 prop으로 넘겼을 뿐인데, 부모가 리렌더링될 때마다 자식의 useEffect가 통째로 다시 실행되는 현상이다. 이 글에서는 그 원인을 짚고, useEvent라는 한 줄짜리 훅으로 깔끔하게 해결하는 방법을 정리한다.어떤 문제인가리액트에서 자식 컴포넌트(특히 외부 라이브러리)에 콜백을 prop으로 넘길 때, 자식이 그 콜백을 useEffect의 deps 배열에 잡고 있으면 문제가 생긴다. 부모가 리렌더링될 때마다 새 콜백 reference가 만들어지고, 그 reference 변화가 자식의 effect를 매번 재실행시킨다.// 자식 (외부 라이브러리라고 가정)function ThirdPartyWidget({ on..
2026.06.08
댓글
Architecture/CI-CD
React Native 모노레포의 iOS 빌드를 어디서 돌릴지 고민하며 6가지 인프라 옵션을 비교했고, 최종적으로 사내 Mac에 GitHub Actions self-hosted runner를 붙였습니다. 옵션별 비교, 우리가 self-hosted를 고른 이유, 그리고 self-hosted 특유의 함정(코드 서명·키체인)을 어떻게 넘었는지 공유합니다.들어가며저희 팀은 여러 개의 React Native 앱을 하나의 Nx 모노레포에서 운영하고 있습니다. 빌드/배포 파이프라인은 GitHub Actions 위에 올라가 있고, Git 태그를 푸시하면 해당 앱이 Stage/Prod로 빌드되는 구조입니다. Android는 Linux runner에서 잘 돌아갑니다. 문제는 항상 iOS였습니다.iOS 빌드는 macOS에서..
2026.06.05
댓글
Architecture/Monorepo
Nx 웹 모노레포에서 Yarn v1(Classic)을 Yarn v4(Berry) + PnP로 전환한 과정을 공유합니다. 왜 전환했는지, PnP가 뭔지, 마이그레이션 중 어떤 문제를 만났는지를 다룹니다.들어가며저희 팀은 Nx 기반 웹 모노레포를 Yarn v1(Classic)으로 운영하고 있었습니다. 큰 문제 없이 잘 돌아가고 있었는데, 마이그레이션 과정에서 axios, lodash, qs, uuid, react-router 같은 패키지가 package.json에 선언되지 않았는데도 사용되고 있었다는 사실을 발견했습니다.이런 현상이 왜 발생하는지, 그리고 이를 해결하기 위해 Yarn Berry의 PnP(Plug'n'Play)로 전환한 과정을 정리합니다.Yarn v1의 node_modules, 뭐가 문제인가호..
2026.04.17
댓글
Architecture/CI-CD
Nx 웹 모노레포에서 PR 라벨 기반 배포를 걷어내고, Git 태그 + Doppler로 배포 파이프라인을 재설계한 과정을 공유합니다.들어가며저희 팀은 Nx 기반 웹 모노레포에서 여러 앱을 운영하고 있습니다. 관리자 페이지, 백오피스, 로그인 페이지, 웹뷰 등 성격이 다른 앱들이 하나의 레포에 들어 있고, 각각 독립적으로 빌드/배포됩니다.초기에는 PR 라벨로 배포를 트리거하고, 환경변수는 GitHub Secrets에 앱별로 등록하는 방식이었습니다. 앱이 2~3개일 때는 문제가 없었지만, 앱과 환경이 늘어나면서 관리가 어려워졌습니다.이 글에서는 기존 방식의 문제점, 태그 기반 배포로의 전환, Doppler를 활용한 환경변수 관리, 그리고 최종 CI/CD 파이프라인 구조를 다룹니다.기존 방식의 문제점PR 라벨..
2026.04.17
댓글
Architecture/CI-CD
들어가며저희 팀은 4개의 React Native 앱을 운영하고 있습니다. 처음에는 각각 독립된 레포지토리로 관리했지만, 앱이 늘어나면서 공통 코드 중복, 의존성 파편화, CI/CD 파이프라인 중복 등의 문제가 반복되었습니다. 이를 해결하기 위해 Nx + pnpm 기반 모노레포로 통합했고, 이 글에서는 통합 이후 빌드 타입 분리, 브랜치 전략, 태그 기반 배포, CodePush 운영 방식을 어떻게 설계했는지 다룹니다.모노레포 자체의 마이그레이션 과정은 이 글의 범위를 벗어나므로, 빌드와 배포 전략에 집중합니다.서버 환경 구성제약 조건설계에 앞서 몇 가지 제약 조건이 있었습니다.서버팀 요구사항: 테스트 데이터가 Prod DB에 올라가면 안 됨 → Stage 서버 사용 필수내부 테스트(QA)와 심사 제출이 별..
2026.04.17
댓글
Notes/JavaScript
자바스크립트를 조금 깊게 공부하다 보면“실행 컨텍스트(Execution Context)” 라는 용어가 꼭 등장합니다.이 개념은 스코프(Scope), 클로저(Closure), this 바인딩 같은자바스크립트의 핵심 원리를 이해하기 위한 기초 중의 기초예요.💡 실행 컨텍스트란?“자바스크립트 코드가 실행되는 환경”조금 더 구체적으로 말하자면,자바스크립트 엔진이 코드를 실행할 때변수, 함수, this, 스코프 정보 등을 관리하기 위한 객체입니다.즉, 어떤 코드가 “어디서, 어떤 환경에서, 어떤 변수들을 가지고 실행되는가”를 결정하는 일종의 실행 박스라고 보면 됩니다.⚙️ 실행 컨텍스트의 종류종류설명전역 컨텍스트 (Global Context)코드가 처음 실행될 때 단 한 번 생성. 전역 변수, 함수 선언이 등록..
2025.10.18
댓글
Notes/JavaScript
웹 성능을 이야기할 때 꼭 등장하는 단어가 있습니다.바로 Reflow(리플로우) 와 Repaint(리페인트) 입니다.이 두 개념은 브라우저가 화면을 그리는 과정의 핵심이며,렌더링 성능 최적화의 출발점이기도 합니다.🧱 Reflow란? (Layout 단계)Reflow는 브라우저가 요소의 크기나 위치를 다시 계산하는 과정이에요.즉, DOM 구조나 CSS 속성 중 레이아웃에 영향을 주는 변화가 있을 때 발생합니다.예를 들어, 다음과 같은 상황이 Reflow를 유발합니다:요소의 width, height, margin, padding 변경새로운 DOM 요소 추가 / 제거display 속성 변경폰트 크기 변경창 크기 조절(리사이즈)Reflow는 화면의 구조를 완전히 다시 계산해야 하므로비용이 크고, 성능 저하의 주..
2025.10.18
댓글
Notes/JavaScript
클로저(Closure)는 자바스크립트의 핵심 개념 중 하나로, 함수가 선언될 때의 환경(스코프)을 기억하는 함수를 말합니다.🧩 1. 기본 개념자바스크립트에서는 함수가 선언될 때의 스코프(lexical scope) 를 기억합니다.이때, 내부 함수(inner function) 가 자신을 둘러싼 외부 함수(outer function) 의 변수에 접근할 수 있을 때,그 관계를 유지한 채로 외부 함수가 종료된 이후에도 접근 가능한 구조 — 이것이 바로 클로저입니다.📘 2. 예시 코드로 이해하기function makeCounter() { let count = 0; // 외부 함수의 지역 변수 return function() { // 내부 함수 (클로저) count++; return count; ..
2025.10.12
댓글
Engineering/Mobile
iOS 17 이상에서 UIGraphicsBeginImageContext()를 시도할 때, 이미지 사이즈가 (0, 0)인 경우 강제종료될 수 있으므로 UIGraphicsImageRenderer를 쓰는 것이 권장된다.문제 패키지: react-native-fast-image, react-native-linear-gradientreact-native-linear-gradient v2.6.2 → v.2.8.3 upgradereact-native-fast-image 는 현재 문제 메서드가 deprecated 되서는 안되는 환경 문제 이슈로 patch-package 사용해서 수정.iOS 내부에서 UIGraphicsBeginImageContext() 사용된 함수 수정
2025.09.24
댓글