프론트엔드/JavaScript, TypeScript

브라우저 탭간 통신하는 3가지 방법

챗 지피티로 작성해봤다. 나보다 더 잘 쓰는 것 같다.웹 애플리케이션 개발에서 여러 브라우저 탭 간의 통신은 매우 중요한 요소입니다. 사용자 경험을 향상시키고 실시간 데이터를 동기화하는 데 필수적입니다. 오늘은 브라우저 탭 간 통신을 위한 세 가지 방법인 broadcastMessage, window.postMessage, 그리고 storage 이벤트에 대해 살펴보겠습니다.1. broadcastMessage의 이해1.1. broadcastMessage란?broadcastMessage는 여러 탭 또는 윈도우 간에 메시지를 전송할 수 있는 API입니다. 이 방법은 동일한 출처의 모든 탭에 메시지를 전달할 수 있어 실시간 업데이트가 필요한 애플리케이션에서 유용하게 사용됩니다.1.2. 사용 예시사용자가 한 탭에서..

동시 여러 개의 토큰 리프레시 요청 관리하기

현재 프로젝트에서 JWT 인증 방식을 사용 중이다.api는 공통 클라이언트를 둬서 관리하고, api 응답코드가 401일 경우 토큰 재발급 요청을 보낸다.한 페이지에서 여러 개의 api 요청을 날리는 경우에, 토큰 재발급 요청이 여러개 날아가면서 토큰이 꼬이게 되는 문제가 있었다.이 문제를 api 공통 클라이언트가 1개의 토큰 재발급 요청 프로미스를 공유하도록 해서 해결했다.기존 코드동시에 여러번 재발급 요청...// api 공통 클라이언트if ([401].includes(response.status)) { const accessToken = await reissueToken() // 후처리}// 토큰 재발급asnyc function reissueToken() { // 생략 return fe..

Typescript와 Duck typing

어떤 2개의 타입의 이름, 위치가 다르더라도 구조가 같다면 Typescript는 2개의 타입을 같은 타입으로 본다. (Duck typing) type A = { a: string } type B = { a: string } let a: A = {a: 'aa'} let b: B = {a: 'bb'} a = b // 가능 b = a // 가능 정리 Typescript는 컴파일 단계에서 타입 검사를 하는데 이때 Duck typing 방식을 사용한다. C#/java는 이름이 같은지까지 확인하는 nominal typing 방식을 사용한다.

조건부 타입과 맵드 타입, 유틸리티 타입

조건부 타입 조건부타입이란 입력된 제네릭 타입에 따라 타입을 결정하는 타입이다. type Condition = T extends A ? B : C 위 타입은 T가 A에 할당 가능하면 타입은 B가 되고 그렇지 않으면 C가 된다. 조건부 타입을 활용해서 아래와 같이 타입 판별을 하는 타입을 구현할 수 있다. type IsString = T extends string ? true : false 분산 조건부 타입 T extends A 에서 T(제네릭이)가 유니온 타입인 경우 조금 다르게 작동한다. 해당 타입이 A에 할당가능한지를 검사하지 않고 유니온의 각 요소가 A에 할당가능 한지를 검사한다 type Exclude = T extends U ? T : never /// 예시: type A = Exclude 아래 ..

타입 가드

타입 가드 타입 가드는 특정 스코프 내의 타입을 보장하도록 런타임 체크를 수행하는 표현식이다. - 타입스크립트 공식문서 타입가드를 if에 조건으로 걸어서 런타임에서 코드가 실행될때 해당 if절에서 타입을 좁혀서 실행할 수 있다. 사용자 정의 타입 가드 type Ori = { kwak: () => void } type Dog = { wall: () => void } type Animal = Ori & Dog const chundungOri: Animal = {kwak: () => console.log("꽥")} const sabsalGae: Animal = {wall: () => console.log("삽살")} const isDog = (animal: Animal): animal is Dog => { r..

?. - Optional chaining 연산자 / ?? - Null 병합 연산자

?. - Optional chaining 연산자 객체의 프로퍼티 접근을 편하게 해준다. const obj = { a = { b: 1 } } console.log(obj.b.c) // 에러 발생 console.log(obj.b?.c) // undefined JS는 선언되지 않은 객체의 프로퍼티를 참조하려고 하면 에러를 발생시킨다. 이를 ?.을 쓰지 않고 처리하면, if(obj === null) return undefined if(obj.b === null) return undefined return obj.b.c 이렇게 복잡하게 처리를 해야 한다. 이 때 ?.을 사용하면 obj.b?.c로 간결하게 참조할 수 있어 매우 유용하다. ?? - null 병합 연산자 왼쪽 피연산자가 null 또는 undefined..

Promise 일정 시간 초과시 대기 취소하고 에러 처리하기

배경 서버에 요청하고, 서버에 어떠한 문제가 생겨서 응답이 매우 늦게 오거나 오지 않으면 클라이언트에서 오래 기다려야 한다. 이러한 문제를 해결하기 위해서 특정 요청에 대한 응답이 일정 시간(ex: 1초) 내에 오지 않으면 서버에 문제가 있다고 간주하여 해당 작업을 종료하고 사용자가 다른 일을 할 수 있게 해야한다. 구현 Promsie.race(iterable) 를 활용하여 해당 작업을 구현할 수 있다. Promise.race(iterable) 는 인자로 받은 Promise들 중 제일 먼저 성공적으로 resolve 혹은 reject 된 Promsie를 반환한다. 즉 여기에 인자로 [request, handleTimeout] 이렇게 2개의 프로미스를 전달해서 request가 대기시간보다 늦게 resolve..

디바운스와 쓰로틀

단시간에 많은 양의 이벤트가 발생하면 해당 이벤트핸들러가 너무 많이 실행되서 성능상의 문제가 발생할 수 있다. 디바운스와 쓰로틀을 활용해 이러한 문제를 해결할 수 있다. 디바운스 단기간에 많은 양의 이벤트가 발생할 때 마지막 이벤트에서만 (사용자 조작이 끝났을 때) 콜백 함수를 실행시킨다. let timer document.addEventListener('scroll', () => { if(timer) clearTimeout(timer) timer = setTimeout(() => { console.log('마지막에만 실행!) },400) }) 활용 사용자가 회원가입 할 때 아이디 중복체크를 자동적으로 해주는 경우가 있다. 사용자가 입력할 때 input에 change 콜백을 줘서 서버에 중복체크 요청을 ..