욕심도 참 많아

이번에 사내에서 실시간 채팅 기능을 포함한 프로젝트를 진행하게 되었습니다. 여러 명의 사용자가 동시에 참여하고, 메시지를 주고받는 환경을 구현하다 보니, 자연스럽게 유저별 식별 정보가 필요해졌습니다. 이 과정에서 사내 구성원 모두가 사용하는 구글 워크스페이스(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)시간에 삽입 및 삭제가 가능하..

프로젝트를 하던 중 '고용 형태' 를 열거형 enum타입으로 d.ts 확장자 파일에서 설정해주고 사용하려고 했는데,해당 파일에서 enum 타입을 as const로 export해서 사용할때 잘 안되는 것을 확인하여 이유를 찾아보면서,일단 d.ts확장자는 컴파일 시점에서만 사용되며, 런타임에는 포함되지 않기에 동작이 안되는 것을 확인하였다.(enum은 실제 런타임 값을 생성하는 구조체 이기에!!)그치만 다른 ts파일에서도 enum을 사용하려고 조금 더 알아 보면서, enum을 깡으로 쓰는것은 안티 패턴이라는 글을 많이 찾아보게 되었다.이유부터 말하자면1. enum은 Typescript에서 열거형 기능을 만들기 위해 생성한 기능으로 , 다시 JS로 트랜스파일이 되면서 번들러에서 TreeShaking을 못하게 ..

프로젝트를 진행하던 중, Github Action으로 테스트 빌드를 하는 과정에서 에러가 났다. pnpm build를 하는 과정에서 에러가 났고,에러 로그는 이렇게 떴었다.관련 로그를 찾아보니 Github Action 에서 러너로 VM을 제공하는데, 이때 VM에서 node.js와 패키지 매니저를 받아올때 생기는 에러로 추측됐다.그래서 우선 node.js버전을 최신화 해보려다가, 바로 전에 node20 , node22 두 버전 모두 잘 돌아갔던걸 확인했기에 pnpm의존성 문제가 있나 확인해보았다.pnpm package들의 버전과 현재 프로젝트의 node간의 문제는 없었고, 로컬에서는 멀쩡하게 빌드가 잘 되고 있었기에 대체 어디가 문제인가 해서 ci.yml파일에 # 캐시 삭제- name: Clear PNPM..

프로젝트를 하는 도중 컴포넌트 인터페이스 설정할때 useForm에 타입매개변수를 넣어주려했는데, 생각지 못한 부분에서 타입 에러가 났었다.interface testProps{ A : useForm B : useForm | useForm} 그래서 타입 매개변수안에 | 을 넣을때 A와 B의 경우 무슨 차이점이 있는지 자세히 알아보려 했다.A , B가 다음과 같이 정의되어있다고 가정해 보자 interface A { name: string; age: number;}interface B { email: string; subscribed: boolean;}interface testProps { A: useForm; B: useForm | useForm;} 이 경우, useForm는 name과 ..

프로젝트를 진행 하던 중 멀쩡하게 로컬에선 잘 돌아가던 프로젝트가 build가 안되는 문제가 발생했다. 처음에는 모든 paths에서 다 에러가 난다고 해서, 의존성 패키지 혹은 옛날 브랜치부터 하나하나 다 까보면서 의존성 삭제 -> 설치 -> 빌드 를 반복했다.CI / CD의 중요성을 너무나도 절실히 느꼈다. 빌드가 정상적으로 되는 브랜치와 그 다음 작업된 브랜치를 확인해 보니, App Router의 기본적인 Loading, Error 같은 페이지들을 추가한 뒤로 안되고 있는 것을 확인했다. 이때 처음 생각했던 문제는 해당 페이지들을 작업하면서 사용한 twin.macro 혹은 "use client"의 부재 문제라고 생각했다. 하지만 해당 문제를 모두 해결했음에도 빌드 에러는 계속해서 났고, error, ..