욕심도 참 많아

사내 도구로 쓰는 브라우저 확장을 하나 만들고 있었습니다. 여러 계정을 등록해두고, 원하는 계정으로 바로 로그인시켜주는 기능이었죠. 로그인 화면에 아이디·비밀번호를 자동으로 채워넣는 방식 말고, 아예 로그인 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..

10.231. 크리티컬 렌더링 패스 (Critical Rendering Path)크리티컬 렌더링 패스는 브라우저가 HTML, CSS, JavaScript 파일을 받아서 화면에 페이지를 그리는 과정입니다.  1. HTML 파싱 및 DOM 생성: 브라우저는 HTML 파일을 받아서 DOM(Document Object Model)을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현한 것입니다.2. CSS 파싱 및 CSSOM 생성: CSS 파일을 파싱하여 CSSOM(CSS Object Model)을 생성합니다. CSSOM은 CSS 스타일 정보를 트리 형태로 표현한 것입니다.3. 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 렌더 트리는 실제로 화면에 그려질 요소들만 포함합니..

알고리즘 및 자료구조 관련 문제 1. 링크드 리스트 vs 어레이- 구조 배열 : 연속된 메모리 공간에 데이터를 저장하고, 각 요소는 인덱스르 통해 접근한다.링크드 리스트 : 각 요소가 데이터와 다음 노드에 대한 포인터를 포함한다. 메모리 공간이 연속적이지 않다. - 크기배열 : 고정 크기로 선언된다. 크기 변경이 불가능한다.링크드 리스트 : 동적 크기로, 노드를 추가하거나 제거할 수 있어서 크기가 유동적이다. - 접근 시간배열 : 인덱스를 사용하기에 O(1)의 시간복잡도링크드 리스트 : 특정 노드에 접근하려면 O(n)이 걸릴 수 있다. - 삽입 및 삭제배열 - 삭제 후 남은 요소들을 이동해야 하므로 O(n)의 시간복잡도링크드 리스트 - 노드의 포인터만 변경하면 되므로 O(1)시간에 삽입 및 삭제가 가능하..