욕심도 참 많아

페이지를 떠났는데 모달이 안 닫혀요: mutate 콜백과 useEffectEvent

배경: 취소 버튼을 막으려다 생긴 코드"저장 중에 취소를 누르면 모달은 닫히지만 저장은 그대로 된다"는 것이었다. 서버 요청은 중간에 멈출 수 없으니,처리 중에는 취소 버튼을 비활성화하기로 했다.그러려면 확인 모달의 onConfirm이 서버 응답까지 기다려야 한다. 모달은 onConfirm이 끝날 때까지 "처리 중" 상태를 유지하기 때문이다. 그래서 mutate를 Promise로 감쌌다.// 예시 코드const { mutate: createItem } = useCreateItem()const handleConfirm = async () => { await new Promise((done) => { createItem(payload, { onSuccess: () => { nav..

프로덕션 JS 번들에 남은 mock 데이터와 dead-code elimination의 함정아래 사례의 서비스명·도메인·계정 정보는 모두 가상으로 변경했습니다.외부 보안점검 과정에서 예상하지 못한 문제가 발견됐다. 로그인이나 특정 화면 진입 없이, 서비스의 정적 JavaScript 파일 하나를 내려받는 것만으로 실제 계정 정보처럼 보이는 데이터가 노출된 것이다.GET /js/app.f7d11f3b.js HTTP/1.1Host: example-service.com문제의 번들에는 도메인명, 사용자 ID, 구독 상태, 가격, 서비스 할당량 등의 값이 포함돼 있었다. 처음에는 오래전에 사용하던 체크아웃 페이지의 잔재를 의심했다. 관련 라우트는 이미 신규 서비스로 리다이렉트되도록 정리돼 있었기 때문이다.하지만 조사..

사내 도구로 쓰는 브라우저 확장을 하나 만들고 있었습니다. 여러 계정을 등록해두고, 원하는 계정으로 바로 로그인시켜주는 기능이었죠. 로그인 화면에 아이디·비밀번호를 자동으로 채워넣는 방식 말고, 아예 로그인 API를 확장이 대신 호출해서 세션을 만든 다음, 그 세션을 사용자가 보고 있는 별도의 창(테스트용으로 열어둔 시크릿 창)에 옮겨 심어주는 방식으로 설계했습니다. 그래야 캡차나 추가 인증 같은 예외 상황만 사람이 개입하고, 나머지는 전부 자동으로 끝나니까요. 처음엔 간단해 보였습니다. "로그인 API를 호출하고, 응답으로 온 세션 값을 꺼내서 원하는 창에 넣으면 끝 아닌가?" 실제로 코드를 짜기 시작하면서 이 문장이 세 번 연속으로 틀렸다는 걸 알게 됐습니다. 첫 번째로 틀린 지점. 브라우저의 표..

chrome.storage.local은 왜 멀쩡한데 저장값이 날아간 것처럼 보였을까?크롬 익스텐션을 만들다 보면 로그인 정보나 사용자 설정 같은 데이터를 chrome.storage.local에 저장하는 일이 많다. 나도 당연히 이 데이터는 한 번 저장해두면 다음 버전으로 배포해도 그대로 유지될 거라고 생각했다.그런데 실제로는 새 버전을 배포할 때마다 저장해둔 데이터가 전부 사라진 것처럼 보였다. 분명 이전 버전에서는 잘 저장되어 있었는데, 새 폴더로 다시 로드하면 로그인 상태도 풀리고 설정값도 비어 있었다. 처음에는 저장 로직이 잘못된 줄 알았고, 업데이트 과정에서 스토리지가 초기화되는 건가 싶었다.하지만 원인은 chrome.storage.local 자체가 아니라, 크롬이 확장 프로그램을 식별하는 방식에..

“왜 하나 켰다고 UI가 40%씩 찌그러졌을까?”최근 프로젝트에서 이상한 UI 버그를 만났다.AppLayout.tsx에서 사내 GNB 컴포넌트를 렌더링하면:LNB가 꽉 차버리고카드 padding이 사라지고폰트가 작아지고전체 레이아웃이 40~50% 정도 찌그러져 보였다.그런데 를 주석 처리하면 모든 UI가 정상으로 돌아왔다.처음엔 단순한 layout 문제처럼 보였지만,최종 원인은 Tailwind v4의 CSS Cascade Layer와 사내 GNB가 주입하는 글로벌 reset CSS 충돌이었다.이 글은 그 디버깅 과정을 처음부터 끝까지 정리한 기록이다.증상AppLayout.tsx: 이 한 줄이 들어가면:px-3, px-4, py-3.5 같은 utility가 사라짐내부 padding이 0이 됨body f..

이직 후기 & 면접 회고서울에서 출퇴근하고 싶은 마음이 점점 커지면서, 올해 상반기부터 본격적으로 이직을 준비하게 되었습니다. 다행히 현재는 원하는 곳으로 이직에 성공했는데요, 이번 글에서는 제가 이직을 준비하면서 느낀 점과 지원했던 회사들의 면접 후기를 간단히 정리해보려 합니다.회사에 다니면서 준비하다 보니 퇴근 후 집에 와서 공부하고 과제를 준비하는 시간이 많아 조금 바쁘긴 했습니다.하지만 마음이 엄청 급하지는 않았고, "나와 맞는 회사를 찾자"는 생각으로 차분하게 준비했습니다.다만 아쉬운 점은, 이직 성공 후에 한 달 정도 여행을 다녀올 계획이 있었는데… 바로 새로운 회사에 출근하게 되어 그 부분은 살짝 아쉽더라고요 😅 토스증권 면접 회고 (2년 차 이하 포지션)전형 과정서류 전형 → 과제 전형 ..

이번에 사내에서 실시간 채팅 기능을 포함한 프로젝트를 진행하게 되었습니다. 여러 명의 사용자가 동시에 참여하고, 메시지를 주고받는 환경을 구현하다 보니, 자연스럽게 유저별 식별 정보가 필요해졌습니다. 이 과정에서 사내 구성원 모두가 사용하는 구글 워크스페이스(Google Workspace) 메일이 있다는 점에, 로그인 수단으로 Google 소셜 로그인을 도입하게 되었습니다. 이 글에서는 다음과 같은 내용을 중심으로 정리해보았습니다:Google OAuth 2.0의 기본 개념과 흐름React에서 Google 소셜 로그인 구현 방법인증된 사용자만 접근할 수 있는 Protected Route 구성1. Google OAuth 2.0의 기본 개념과 흐름Google 소셜 로그인은 OAuth 2.0 프로토콜을 기반으로..

한국어처럼 조합형 문자를 웹에서 입력할 때, 의도치 않게 중복 요청이 발생하는 경우가 자주 있다. 특히 React 환경에선 이 문제가 더 자주 보이는데, 원인과 해결 방법을 클라이언트, 훅, 서버 단에서 정리해봤다. 🧩 왜 한글 입력 시 중복 요청이 발생할까?1. 조합형 언어의 특성한글은 자음과 모음을 조합해 글자를 만든다. 예: ㄱ + ㅏ = 가IME(Input Method Editor)가 입력 중간 상태를 관리하면서 하나의 글자 입력에 여러 이벤트가 발생함영어는 키보드를 누르면 바로 글자가 입력되지만, 한글은 조합 과정이 있어 조합 시작 → 변경 → 완료 등의 중간 단계를 거침2. React의 이벤트 처리 방식React는 입력 이벤트를 상태 변화로 감지하고 리렌더링함한글 입력 중간 상태에서도 이벤트..

이미지 파일을 파일 시스템으로 서비스에 업로드할때,화면이 하얗게 브라우저 크래시가 되는 문제가 있었다.이때 1개의 사이즈가 40mb짜리 bmp확장자 사진 60장을 사용하여,동시에 많은 메모리가 로드 되도록 하여 해당 문제원인을 발견하였다.JavaScript에서 파일을 업로드하고 처리할 때 힙 메모리가 사용한다.특히 이미지 파일의 경우 다음과 같은 과정에서 메모리를 사용한다:파일 로딩파일을 FileReader나 URL.createObjectURL()로 읽을 때이미지 데이터를 JavaScript 객체로 변환할 때JavaScript는 브라우저나 Node.js 환경에서 사용할 수 있는 힙 메모리에 제한이 있는데, 특히 브라우저에서는 이 제한이 더 엄격하다.해당 메모리에 대한 제한때문에 문제가 생긴것으로 파악하였..

크롬 익스텐션을 개발하며, 사용자의 데이터를 어떻게 관리하면 좋을지 고민하다가 Indexed DB에 대하여 공부하게 되었다. Indexed DB는 LocalStorage보다 많은 용량의 데이터를 브라우저에 영구적으로 저장하는 방법이다.또한컴퓨터 재부팅브라우저 종료 후 재실행인터넷 끊김이런 경우에도 사용자가 브라우저 데이터/캐시를 직접 삭제하지 않는 이상 사용자 데이터를 장기 보관하기 매우 적합하며, JS에서 사용하는 객체 형식 그대로 저장할 수 있다. 사용방법 1. DB open 요청 및 Object Storage사용const request = indexedDB.open("DatabaseName", version);request.onerror = (event) => { console.error("Dat..