꾸준히만 가자

🧩 배경닥터나우 프론트엔드 프로젝트에서는 과거부터 사용해오던 React Query v3와 신규 도입된 TanStack Query v4가 혼재되어 있었습니다.두 버전이 공존하면서 다음과 같은 문제들이 발생했습니다. queryClient가 서로 달라서 쿼리 업데이트 및 상태 관리가 불안정버전 간 API와 동작 방식이 달라 개발자가 로직을 예측하기 어려움특히 약국 서비스에서 로그인 시 아무 요청도 가지 않는 현상 발생🛠️ 전환 작업 진행2025년 3월과 5월, 프론트엔드 전체에서 TanStack Query v4 기준으로 단일화하는 작업을 진행했습니다.v3 → v4 전환은 공식 가이드를 기반으로 점진적으로 적용했고, 예상보다 큰 인터페이스 변화는 없어 전환 자체는 순조로웠습니다. 하지만 예상치 못한 실전 이..

🧩 상황사용자 입력에 따라 서버에 검색 요청을 보내야 하는 케이스에서lodash.debounce를 활용해 요청 빈도를 제한하려고 했습니다. 처음엔 다음과 같은 debounce 설정을 사용했습니다:const debouncedFetch = debounce(fetchData, 500, { leading: true, trailing: false,}); 기대 동작: 첫 요청은 즉시 실행, 이후 500ms 이내의 입력은 무시실제 동작: 연속 입력 시마다 서버 요청 발생 → debounce가 무의미🔍 원인 분석[1] debounce 함수가 렌더링마다 새로 생성됨 React 함수형 컴포넌트에서는 매 렌더마다 함수가 새로 정의됩니다.이 상태에서 debounce를 적용하면 매번 새 debounce 인스턴스가 만들어..

최근 들어 서버 데이터를 프론트 state로 변형해 관리하여 처리하는 경우가 종종 있었습니다.모든 서버에 API 응답값이 페이지 내에서 구현해야 하는 비즈니스 로직에 알맞으면 좋겠지만 그러지 못한 경우가 대다수일 것 입니다. 당시에는 서버 응답값을 기반으로 파생 상태를 만들어 로직을 전개했지만 파생상태를 정의하는 과정이 매끄럽지 못한것을 인지하고 있었습니다. 지금 돌이켜서 어떻게 하면 더 좋은 방법으로 서버 데이터로부터 프론트 파생 상태를 정의할 수 있는지 고민해보았습니다. 여러 방법들이 눈에 띄었지만 다음 두가지 방법이 적용과 이해가 쉬웠습니다. 1. TanStack Query의 select 옵션 사용import { useQuery } from '@tanstack/react-query';const us..

어떤 이슈? 회사에서 하이브리드 앱 개발 중 웹뷰단에서 카카오톡 문의하기를 눌렀을때 안드로이드 기기에서만 카카오톡이 안 열리는 문제가 있었다. 이슈 유형 정리 기본 메인 이슈는 카카오톡 문의하기 클릭 시 카카오톡이 안 열리는 문제 아이폰 너무나도 잘 열림 카카오톡 없으면 다운로드하라는 브라우저 창도 띄워짐 있으면 해당 카톡 열어서 1대1 채팅까지도 가능 갤럭시 S 시리즈 카카오톡이 있을때는 잘 열림 미설치시에는 아무현상도 일어나지 않거나 살짝의 코드 수정시 intent 주소와 함께 UNKOWN_SCHEMA 이슈가 나옴 갤럭시 폴드 시리즈 접었을때는 S 시리즈와 동일한 현상임 펼쳤을때는 아예 아무 현상도 벌어지지 않음 위와 같은 기종 별 현상이 차이가 나서 왜 그런지 정말 고민과 고생이 많았지만 해결을 했..

사건의 발단 회사에서 새롭게 출시할 웹뷰로 이루어진 앱을 출시하기 위해 고군분투 중이었을때였다. 웹 개발만 했던 나로써는 앱 배포와 개발 환경 세팅은 너무나도 어색했다. 물론 웹뷰 환경에서 개발은 계속 해왔지만 마켓에 배포하는 일은 거의 없었기에 조금은 신선했고 재밌었지만 동시에 답답했다. 아이폰을 개발자모드로 연결하고 앱을 켜보니 원래 안드로이드 환경에서는 나타났던 로고가 스플래쉬 화면에 안 뜨는것이다... 이건 뭔가 이상하다 싶어 수정작업을 하려고 했다. 아는 지식이 전무한 상태 한 3시간을 삽질하다가 해결을 했다. 해결책이 너무 간단해서 허무했지만 이렇게 배운다고 생각이 들었다. 원인과 해결책 원인은 Xcode에서 인식하는 Launch screen storyboard가 있는 폴더에 해당 해당 로고 ..

최근 실무를 하면서 Module federation 환경에서 tailwind css를 사용해서 개발을 이어가고 있다. 헤드리스 UI가 부각되면서 Radix UI 기반의 Shadcn UI를 사용하려다보니 tailwind css를 사용하게 되었다. 하지만 역시 시행착오는 있다. 실제 잘 작동할 줄 알았던 스타일링에 문제가 발생했다. 문제 상황 remote 패키지에서 작성한 tailwind css의 class name이 제대로 host 패키지에서 서빙될때 스타일링이 되지 않는 문제 원인 파악 브라우저에서 실제 클래스 네임과 테일윈드의 클래스 네임이 mapping이 잘되는지 확인해보는게 우선이었다. 브라우저에서 스타일링이 정상적이지 않는 요소를 검사해보니 클래스 네임은 들어갔지만 스타일링 mapping이 되지 ..

cypress 설치 및 예제 주입 각 패키지 매니저에 맞춰서 설치한다. pnpm으로 프로젝트를 진행하므로 pnpm add cypress -D 터미널로 설치한다. 설치를 하고 npx cypress open 을 터미널에서 치게 되면 위와 같은 가상 브라우저가 뜨고 진행하면 위와 같이 스펙 선택 창이 나오는데 이는 아무 스펙도 작성하지 않아서이다. 좌측 예제를 누르고 진행하면 위와 같이 테스트를 할 수 있게 되고 눌러서 테스트를 실행시켜 볼 수 있다. cypress 문법의 ts 컴파일을 위해 위 내용을 생성된 cypress 폴더 하위에 넣어주면 위 이미지와 같이 파일이 새로운 폴더와 파일이 생긴다. cypress config 세팅 import { defineConfig } from 'cypress'; expo..

아카이빙을 하는 이유 1. 기억은 휘발된다 제일 큰 이유이지 않을까 싶습니다. 실무 영역에서 개발을 하다보면 많은 버그를 만나고 많은 챌린지에 도전하게 됩니다. 이때마다 많은 구글링, Chat GPT의 도움을 받아 해결하고는 하죠. 그때마다 해결을 하는데에만 초점을 두어 이슈를 처리하면 그 다음 작업을 하기 바빠지게 됩니다. 그러다보면 다른 분들의 이슈를 도와줄때 어디서 봤던 내용일 경우 도움을 줌과 동시에 관련 참조글을 공유해주면 더 설명이 빠르거나 도움이 될 것 같은 기분이 들때가 많습니다. 그때마다 머리를 쥐어뜯어서 아는만큼 설명드리고 관련 문서를 공유드리지만 정확하고 빠르지 않죠. 그러다보니 이슈 해결에 도움이 되는 글이나 영감을 얻은 글을 기록해 두는 것도 의미가 있겠다란 생각이 들었습니다. 2..

배포조건 CSR, SSG 등의 호스팅 서버가 필요없는 렌더링 조건 AWS S3, Cloud front 사용시 MFA, Monorepo를 도입해서 운용하는 프로젝트 배포 트리거 develop 또는 main, master에 PR이 merge되어 Close될때 MFA 구조에 맞게 배포하도록 조건 분할하기 Host, Remote와 같이 패키지별로 관리되어 레포 내에서 분할되어 빌드, 배포 등의 관리가 이루어져야 함 PR시 Label로 구분하여 action 트리거 작동시키도록 구현 Label 정의 deploy host remote deploy-skip invalidation-skip release Label 별 추가시 작동하는 액션 상세내용 deploy 빌드, 배포, 캐시무효화와 같은 배포 로직 실행 all 모든..

jest 세팅 모듈 다운 사용하는 패키지 매니저에 맞춰 필요한 모듈을 다운받는다. 예시 pnpm pnpm add -D jest ts-jest @types/jest @types/node ts-loader ts-node babel-jest @babel/core @babel/preset-env @babel/preset-typescript @testing-library/react @testing-library/user-event config 파일 작성 babel.config.js module.exports = { presets: [ '@babel/preset-env', ['@babel/preset-react', {runtime: 'automatic'}], '@babel/preset-typescript', ], ..