분류 전체보기

Yarn Berry PnP 마이그레이션 — node_modules를 없앤 이유와 과정

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, 뭐가 문제인가호..

웹 모노레포 CI/CD 개편기 — 라벨 배포에서 태그 배포로

Nx 웹 모노레포에서 PR 라벨 기반 배포를 걷어내고, Git 태그 + Doppler로 배포 파이프라인을 재설계한 과정을 공유합니다.들어가며저희 팀은 Nx 기반 웹 모노레포에서 여러 앱을 운영하고 있습니다. 관리자 페이지, 백오피스, 로그인 페이지, 웹뷰 등 성격이 다른 앱들이 하나의 레포에 들어 있고, 각각 독립적으로 빌드/배포됩니다.초기에는 PR 라벨로 배포를 트리거하고, 환경변수는 GitHub Secrets에 앱별로 등록하는 방식이었습니다. 앱이 2~3개일 때는 문제가 없었지만, 앱과 환경이 늘어나면서 관리가 어려워졌습니다.이 글에서는 기존 방식의 문제점, 태그 기반 배포로의 전환, Doppler를 활용한 환경변수 관리, 그리고 최종 CI/CD 파이프라인 구조를 다룹니다.기존 방식의 문제점PR 라벨..

React Native 모노레포에서 앱 빌드 및 배포 전략 설계하기

들어가며저희 팀은 4개의 React Native 앱을 운영하고 있습니다. 처음에는 각각 독립된 레포지토리로 관리했지만, 앱이 늘어나면서 공통 코드 중복, 의존성 파편화, CI/CD 파이프라인 중복 등의 문제가 반복되었습니다. 이를 해결하기 위해 Nx + pnpm 기반 모노레포로 통합했고, 이 글에서는 통합 이후 빌드 타입 분리, 브랜치 전략, 태그 기반 배포, CodePush 운영 방식을 어떻게 설계했는지 다룹니다.모노레포 자체의 마이그레이션 과정은 이 글의 범위를 벗어나므로, 빌드와 배포 전략에 집중합니다.서버 환경 구성제약 조건설계에 앞서 몇 가지 제약 조건이 있었습니다.서버팀 요구사항: 테스트 데이터가 Prod DB에 올라가면 안 됨 → Stage 서버 사용 필수내부 테스트(QA)와 심사 제출이 별..

실행 컨텍스트(Execution Context) 완벽 이해

자바스크립트를 조금 깊게 공부하다 보면“실행 컨텍스트(Execution Context)” 라는 용어가 꼭 등장합니다.이 개념은 스코프(Scope), 클로저(Closure), this 바인딩 같은자바스크립트의 핵심 원리를 이해하기 위한 기초 중의 기초예요.💡 실행 컨텍스트란?“자바스크립트 코드가 실행되는 환경”조금 더 구체적으로 말하자면,자바스크립트 엔진이 코드를 실행할 때변수, 함수, this, 스코프 정보 등을 관리하기 위한 객체입니다.즉, 어떤 코드가 “어디서, 어떤 환경에서, 어떤 변수들을 가지고 실행되는가”를 결정하는 일종의 실행 박스라고 보면 됩니다.⚙️ 실행 컨텍스트의 종류종류설명전역 컨텍스트 (Global Context)코드가 처음 실행될 때 단 한 번 생성. 전역 변수, 함수 선언이 등록..

브라우저 렌더링 최적화: Reflow와 Repaint 완벽 이해

웹 성능을 이야기할 때 꼭 등장하는 단어가 있습니다.바로 Reflow(리플로우) 와 Repaint(리페인트) 입니다.이 두 개념은 브라우저가 화면을 그리는 과정의 핵심이며,렌더링 성능 최적화의 출발점이기도 합니다.🧱 Reflow란? (Layout 단계)Reflow는 브라우저가 요소의 크기나 위치를 다시 계산하는 과정이에요.즉, DOM 구조나 CSS 속성 중 레이아웃에 영향을 주는 변화가 있을 때 발생합니다.예를 들어, 다음과 같은 상황이 Reflow를 유발합니다:요소의 width, height, margin, padding 변경새로운 DOM 요소 추가 / 제거display 속성 변경폰트 크기 변경창 크기 조절(리사이즈)Reflow는 화면의 구조를 완전히 다시 계산해야 하므로비용이 크고, 성능 저하의 주..

클로저(Closure) 완벽 정리 — 자바스크립트 개발자라면 반드시 알아야 할 핵심 개념

클로저(Closure)는 자바스크립트의 핵심 개념 중 하나로, 함수가 선언될 때의 환경(스코프)을 기억하는 함수를 말합니다.🧩 1. 기본 개념자바스크립트에서는 함수가 선언될 때의 스코프(lexical scope) 를 기억합니다.이때, 내부 함수(inner function) 가 자신을 둘러싼 외부 함수(outer function) 의 변수에 접근할 수 있을 때,그 관계를 유지한 채로 외부 함수가 종료된 이후에도 접근 가능한 구조 — 이것이 바로 클로저입니다.📘 2. 예시 코드로 이해하기function makeCounter() { let count = 0; // 외부 함수의 지역 변수 return function() { // 내부 함수 (클로저) count++; return count; ..

[RN] 🚫에러일지 - iOS17에서 App Crash 생기는 이유

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() 사용된 함수 수정

[RN] 🚫에러일지 - exception while building Json A problem occurred starting process 'command ...

m1 혹은 m2 칩 맥에서 빌드 시 발생하는 에러 빌드 충돌을 방지하기 위해 rosseta 설치하기 // 1. 라이센스 동의 필요 softwareupdate --install-rosetta // 2. 라이선스 자동 동의 /usr/sbin/softwareupdate --install-rosetta --agree-to-license

[RN] 🚫에러 일지 - SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.

말 그대로 SDK 경로를 찾을 수 없어서 발생하며, 주로 맥 -> 윈도, 윈도 -> 맥으로 프로젝트를 옮길 때 자주 발생하는 에러입니다. 안드로이드 스튜디오에 내 프로젝트 디렉터리로 가셔서 local.properties 파일을 한번 찾아보세요! 존재하지 않거나 경로가 잘못되어있을 가능성이 큽니다. 경로가 잘못되어 있다면 내 PC에 맞게 변경해주시면 됩니다 보통 윈도의 경우 c:\Users\'사용자 이름'\AppData\Local\android\adk 그리고 맥의 경우 /Users/'사용자 이름'/Library/Android/sdk sdk.dir=/Users/luna/Library/Android/sdk 이런 식으로 변경해주시면 됩니다.

[자료구조] 그래프

개념 및 용어 그래프 G는 하나 이상의 정점(혹은 노드)을 포함하는 집합 V와 두 정점의 쌍으로 구성되는 간선을 포함하는 집합 E의 순서쌍으로 정의함 (G = (V, E)) 간선(인접한다) 두 정점을 연결하는 선 두 정점 쌍으로 나타냄 무방향 그래프 간선의 방향성이 없음 정점 쌍이 순서를 나타낼 필요가 없으므로 {v1, v2}로 나타냄 n개의 정점을 갖을 때 최대 간선 개수: n(n-1)/2 차수: 정점에 연결된 간선들의 개수 방향 그래프 간선의 방향성이 있음 순서쌍 (v1, v2) n개의 정점을 갖을 때 최대 간선 개수: n(n-1) 진입 차수: 주어진 정점으로 향한 간선의 개수 진출 차수: 주어진 정점에서 시작하는 간선의 개수 정점의 차수: 진출 차수와 진입 차수의 합 다중 그래프: 두 정점을 잇는 ..