#Network#Javascript#React
[실시간 통신] 주기 폴링
폴링부터 WebRTC까지, 실시간 통신 방식을 하나씩 정리하는 시리즈의 첫 번째 글입니다. 널리 알려진 방식이기 때문에 새로운 기술을 소개하기 보다는, 실제 프로젝트에서 어떤 문제를 해결하기 위해 선택했고 사용하면서 어떤 하계를 느꼈는지에 초점을 맞췄습니다. 실시간 데...
·1
총 10개의 글
폴링부터 WebRTC까지, 실시간 통신 방식을 하나씩 정리하는 시리즈의 첫 번째 글입니다. 널리 알려진 방식이기 때문에 새로운 기술을 소개하기 보다는, 실제 프로젝트에서 어떤 문제를 해결하기 위해 선택했고 사용하면서 어떤 하계를 느꼈는지에 초점을 맞췄습니다. 실시간 데...
프론트엔드에서 인증을 구현하다 보면, 액세스 토큰이 만료된 상태에서 여러 요청이 동시에 401 응답을 받는 상황을 흔히 마주하게 됩니다. 이 글에서는 그 상황이 발생하는 원인부터 해결 방법까지 차례대로 설명합니다. 1. 토큰 구조의 이해 대부분의 현대 웹 서비스는 두 ...
자바스크립트는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다. 그런데 자바스크립트는 수많은 비동기 작업을 동시에 처리합니다.비법은 바로 이벤트 루프(Event Loop)입니다. 이 게시글에서 이벤트 루프에 대해 알아보고, JS 엔진에 대해 분...
Next.js + Spring Boot 조합의 BFF(Backend For Frontend) 아키텍처에서 OAuth 로그인을 구현하다 보면 "분명히 백엔드가 쿠키를 내려주는데 브라우저에 저장이 안 된다"는 문제가 발생했습니다. 이 게시글은 문제의 원인과 해결방법을 다룹...
해당 문서는 React SPA + Vite 환경을 기준으로 작성합니다. Supabase Auth는 클라이언트 Javascript만로 Google OAuth를 구현할 수 있어 SPA 환경에 적합해 채택했습니다. Google OAuth 2.0 동작 원리 구현하기 전 OAu...
데이터 조회 가장 기본이 되는 문법으로, 테이블에 저장된 데이터를 조건에 맞게 조회할 때 사용합니다. 기본 구문 SELECT * | { [DISTINCT] {{ 컬럼명 | 표현식 } { [AS] [별칭] }, ... }} FROM 테이블명 WHERE 조건식 [{AND|...
그래프 알고리즘 문제를 풀다 보면 "A 노드와 B 노드가 현재 같은 그룹에 속해 있는가?" 혹은 "두 그룹을 하나의 그룹으로 합쳐라" 같은 요구사항을 자주 만나게 된다. 이럴 때 배열을 순회하며 일일이 그룹을 확인하면 긴 시간이 소요된다. 이때 사용할 수 있는 것이 바...
코드의 성능을 평가할 때 가장 중요한 두 가지 지표는 바로 실행 시간과 메모리 사용량입니다. 이번 게시물에서는 Java 환경에서 작성한 코드의 실행 시간과 메모리 사용량을 간단하게 측정할 수 있는 템플릿 코드를 알아봅시다. 1. 메모리 사용량 측정하기 Java에서는 R...
React로 개발을 하다 보면 아래와 같이 상태를 업데이트한 직후에 값을 확인했을 때, 이전 값이 출력되는 경험을 해본 적이 있을 것이다. const [count, setCount] = useState(0); const increment = () => { setCoun...
배열의 연속된 구간에 대한 질의(query)와 갱신(update)을 효율적으로 수행할 수 있도록 설계된 이진 트리 기반 자료구조 구간의 합, 구간의 최솟값, 구간의 최댓값 등을 빠르게 구할 때 사용할 수 있다. 구간의 합을 빠르게 구한다는 점에서 누적합과 비슷하지만, ...