대화방 전환 시 새 세션이 파괴되는 Race Condition — async/await 양보 지점의 함정

async 함수에서 cleanup 로직을 await 뒤에 두면 어떤 일이 벌어지는지, 실제 채팅 앱에서 겪은 Race Condition 디버깅 과정을 공유합니다.들어가며기업용 메신저 앱을 개발하면서 가장 까다로웠던 버그 중 하나는 대화방을 빠르게 전환할 때 간헐적으로 메시지가 수신되지 않는 현상이었습니다. 재현 조건이 "빠르게 전환할 때"라서 디버깅이 쉽지 않았고, 원인은 의외로 단순한 코드 순서 문제였습니다.문제 현상A 대화방에서 B 대화방으로 빠르게 전환하면, B방의 실시간 메시지가 수신되지 않음새로 생성된 ChatReceiver(STOMP 구독 + 30초 주기 동기화)가 unexpectedly dispose 됨느리게 전환하면 문제가 발생하지 않음 — 전형적인 타이밍 이슈원인 분석우리 채팅 엔진은 대..

• format_list_bulleted Mobile/React Native
• · 2026. 3. 14.
• textsms

[TypeScript] 24. 일관성 있는 별칭 사용하기

넓히기 과정 제어하는 방법constlet 대신 const로 변수를 선언하면 더 좁은 타입이 된다.const x = 'x'; let vec = {x: 10, y: 20, z: 30}; getComponent(vec, x);x 는 재할당 될 수 없기 때문에 ⇒ 더 좁은 타입 (”x”)로 추론할 수 있다. 타입 추론의 강도를 직접 제어하려면⇒ 타입스크립트의 기본 동작을 재정의해야명시적 타입 구문 제공타입 체커에 추가적인 문맥 제공const 단언문 사용 (const 단언문과 변수 선언에 쓰이는 let 이나 const와 혼동 x) const v1 = { x: 1, y: 2, }; // 타입은 { x: number; y: number; } const v2 = { x: 1 as const, y: 2, }; // 타입..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

[TypeScript] 17. 변경 관련된 오류 방지를 위해 readonly 사용하기

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다. 변경 관련된 오류 방지를 위해 readonly 사용하기 function arraySum(arr: number[]) { let sum = 0, num; while ((num = arr.pop()) !== undefined) { sum += num; } return sum; } function printTriangles(n: number) { const nums = []; for (let i = 0; i < n; i++) { nums.push(i); console.log(arraySum(nums)); } }arraySum 함수배열 안의 숫자들을 모두 합치고계산이 끝나면 원래 배열이 전부 비게 된다.자바스크립트 배열은 내용을 ..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

[React] 리액트 공식문서 스터디 - Describing the UI (2) Importing and Exporting Components

React 공식문서를 읽고 정리한 글입니다. Describing the UI – ReactThe library for web and native user interfaceshttps://react.dev/learn/describing-the-ui Importing and Exporting Components component 의 장점은 재사용성에 있다.⇒ 다양한 component들로 구성된 component를 만들 수 있다. 하지만 component를 묶고, 또 구성하고 반복할 수록 다른 파일로 분리해야 한다는 것을 느끼기 마련이다.파일을 읽기 쉬워지고, 더 많은 곳에서 component를 효율적으로 재사용할 수 있게 될 것이다. The root component file Your First Compon..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

[React] 리액트 공식문서 스터디 - Describing the UI (1) Your First Component

React 공식문서를 읽고 정리한 글입니다. Describing the UI – ReactThe library for web and native user interfaceshttps://react.dev/learn/describing-the-ui YourFirst Component React 애플리케이션 component 라고 불리는 고립된 조각들로 빌드된다. component 란 ?하나의 JavaScript 함수버튼과 같이 작을 수 있고, 전체 페이지만큼 클 수 있다. https://codesandbox.io/embed/affectionate-tdd-tefyif?fontsize=14&hidenavigation=1&theme=dark Components: UI building blocks My First..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

[TypeScript] 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기 자바스크립트에서 객체란?키/값 쌍의 모음키는 보통 문자열값은 어떤 무엇이든 될 수 있다 파이썬, 자바에서 볼 수 있는 ‘해시 가능’ 객체 표현이 자바스크립트에는 없다.toString 메서드가 호출되어 객체가 문자열로 변환되어 버린다.> x={} {} > x[[1,2,3]] = 2 2 > x { '1,2,3': 1 } 숫자는 키로 사용할 수 없다.자바스크립트 런타임이 문자열로 변환해 버린다.> { 1: 2, 3: 4 } { '1': 2, '3': 4 } 배열은 분명히 객체이다때문에 숫자 인덱스를 사용하는 것이 당연하다.> typeof [] 'o..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms