FrontEnd
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)와 심사 제출이 별..
[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 이런 식으로 변경해주시면 됩니다.
[Vue-Cal] Vue.js 캘린더 라이브러리
https://antoniandre.github.io/vue-cal/#installation 설치 $ npm i vue-cal 사용 // scss/app.scss @import 'vue-cal/dist/vuecal.css' {{ split.label }} 연간/월간/주간 탭 숨기기해당 배열에 각각의 탭 이름 넣어주기 :disable-views="['years', 'year', 'month', 'week']" 시간 간격 설정하기 :time-step="30" // 시간 간격 (30분 간격) :time-from="9 * 60" (9시 부터) :time-to="19 * 60" (19시 까지) 출력 날짜 설정하기 selected-date="2018-11-19" 날짜를 여러 개의 컬럼으로 쪼개기 :split-day..
[Vue] requestAnimationFrame
requestAnimationFrame() 는 브라우저에서 작동하는 애니메이션을 알려주고 다음 리페인트 진행 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메서드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. 리페인트 ? 리페인트란 리플로우 과정이 끝나고 재생성된 레이아웃 트리(렌더 트리)를 다시 레이어에 그리는 작업을 말합니다. 여기서 리플로우는 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드의 수치를 다시 계산하여 레이아웃 트리(렌더 트리)를 재생성하는 작업을 의미합니다. css에서 width, height 같은 레이아웃에 영향을 주는 속성을 말합니다. 리페인트를 발생하게 하는 속성은 css에서 시각적으로 보여지는 모든 속성이며 이 외에도 레이아웃에 영향을 주는 것은 아니..
[Vue-Query] persistQueryClient
https://tanstack.com/query/v4/docs/vue/examples/vue/persister Vue Query Persister는 나중에 사용할 수 있도록 쿼리 클라이언트를 저장하는 persister와 상호작용하기 위한 유틸리티 집합입니다. 다양한 persister를 사용하여 클라이언트 및 캐시를 다양한 스토리지에 저장할 수 있습니다. 여기서 우리는 indexedDB에 저장했습니다. indexedDB는 same-origin policy를 따르기 때문에 다른 도메인에서 프로젝트 도메인으로 접근할 수 없습니다. 여기에 HTTP 프로토콜을 적용한 도메인과 로컬호스트에서만 접속이 가능하도록 하여 다른 도메인으로 접속 시 access denied하여 보안을 강화하였습니다. 다음은 persistQ..
[Swagger Codegen] swagger-typescript-api
백엔드와 프론트엔드 협업 시에 백엔드 API 제작이 완료되면 보통 REST API의 경우 swagger를 통해 API Docs를 작성하게 되는데 이 때에 백엔드에서 작성된 API 타입을 그대로 가져와 프론트 API 통신 코드 작성 시 타입을 지정해 줄 수 있는 도구입니다. https://www.npmjs.com/package/swagger-typescript-api // package.json { ... "scripts": { ... "generate": "npx swagger-typescript-api -p http://petstore.swagger.io/v2/swagger.json -o ./src/common/interfaces -n types.d.ts " }, } 스크립트에 해당 코드를 작성하고 n..