#async

Frontend › JavaScript

반응형 프로그래밍은 데이터 흐름과 변경 전파에 초점을 둔 선언적 패러다임이다. 스프레드시트와 웹 프레임워크로 개념을 잡고, Pull에서 Push로, 제어의 역전으로 비동기를 단순하게 보는 법, 이벤트를 배열처럼 다루는 RxJS의 Observable과 연산자, 실무에서 막히는 소스 만들기와 Hot·Cold, Vue·MobX·시그널이 쓰는 의존성 추적(읽을 때 구독, 쓸 때 통지)의 원리를 정리한다.

• #javascript
• #frontend
• #programming-paradigm

Frontend › JavaScript

싱글 스레드인 JavaScript가 렌더링과 나눠 쓰는 메인 스레드, 실행 컨텍스트가 쌓이는 콜 스택, Web API, 태스크·마이크로태스크 큐, 이벤트 루프의 협업으로 화면을 멈추지 않고 비동기 작업을 처리하는 방식. 태스크 하나 → 마이크로태스크 전부 → 렌더링 순서의 한 바퀴, queueMicrotask, 긴 작업 쪼개기·진행률 표시·이벤트 처리 뒤로 미루기, 무거운 일을 메인 스레드 밖으로 빼는 Web Worker.

• #javascript
• #browser
• #frontend

Frontend › JavaScript

언제 끝날지 모르는 비동기 작업의 결과를 다루는 콜백 함수(오류 우선 콜백)와 Promise. 상태와 핸들러 규칙, 체이닝과 에러 전파(암시적 try...catch, 다시 던지기, thenable), 처리되지 않은 거부, 콜백 API를 Promise로 감싸는 프로미스화(wait, promisify), all·allSettled·race·any·resolve·try로 여러 Promise를 조합하는 법.

• #javascript
• #promise
• #frontend

Frontend › JavaScript

for...of·spread·구조 분해가 공통으로 쓰는 약속인 이터러블·이터레이터 프로토콜(Symbol.iterator와 next()의 { value, done }), 직접 iterable 만들기, 실행을 멈췄다 이어 가는 제너레이터 함수(function*, yield, next(값)으로 값 돌려보내기, return, yield*), 게으른 무한 수열, ES2025 이터레이터 헬퍼와 비동기 이터레이션을 정리한다.

• #javascript
• #frontend
• #function

Frontend › JavaScript

setTimeout은 한 번, setInterval은 반복해서 콜백을 예약한다. 예약은 비동기라 다음 줄이 먼저 돈다. 반환된 ID를 저장해야 clearTimeout·clearInterval로 취소할 수 있고, 지연 시간은 최소 대기일 뿐이다. 즉시 시작하는 interval, 재귀 setTimeout, Promise로 감싼 sleep, 애니메이션용 requestAnimationFrame, React에서의 정리까지.

• #javascript
• #frontend
• #browser

Frontend › JavaScript

페이지를 새로고침하지 않고 서버와 비동기로 데이터를 주고받는 AJAX. fetch의 Response·본문 형식·FormData, URL·URLSearchParams, 스트림으로 읽는 다운로드 진행률과 업로드 진행률, AbortController 취소·타임아웃, 나머지 fetch 옵션(credentials·cache·keepalive 등), 업로드 재개, axios, 자주 만나는 오류, 클라이언트에서 보이는 CORS와 프록시, 브라우저 코드가 공개된다는 전제의 API 키 관리.

• #javascript
• #http
• #frontend

Frontend › JavaScript

Promise를 동기 코드처럼 읽히게 해 주는 async/await 문법, 순차·동시 실행과 반복문 안의 await, try/catch·호출 시점 catch·고차 함수로 나누는 에러 처리, 실무에서 주의할 점.

• #javascript
• #promise
• #frontend

Frontend › Mobile

Flutter의 언어 Dart에서 처음 헷갈리는 세 가지. 런타임 상수 final과 컴파일 타임 상수 const, 타입에 ?를 붙여야만 null을 허용하는 건전한 널 안전성, 값 하나를 기다리는 Future와 여러 값을 흘려보내는 Stream·제너레이터(async*, sync*, yield)를 정리한다.

• #mobile
• #flutter
• #dart

Frontend › React

React는 업데이트를 급한 것(입력)과 급하지 않은 것(전환)으로 나눠, 급하지 않은 렌더링은 중간에 끊고 급한 것을 먼저 처리한다. useTransition·startTransition은 상태 업데이트를 전환으로 표시하고(React 19부터 async 함수도 받아 Actions의 바탕이 된다), useDeferredValue는 값의 반영을 늦춘다. Suspense와 use는 기다리는 동안의 화면을 맡는다.

• #react
• #performance
• #frontend

Frontend › React

미들웨어는 dispatch와 reducer 사이에 끼어 액션을 기록·변형·무시하거나 다른 액션을 일으키는 함수 체인(store => next => action)이다. 비동기 처리는 thunk가 기본이고, 지금은 데이터 요청에 RTK Query나 createAsyncThunk, 액션에 반응하는 흐름에 listener middleware를 쓴다. redux-saga는 취소·디바운스가 얽힌 복잡한 흐름에만 남았다.

• #react
• #redux
• #middleware
• #state
• #frontend

Frontend › React

use는 컴포넌트가 Promise나 Context의 값을 직접 읽게 해 주는 React 19 API다. 조건문·반복문 안에서도 부를 수 있지만 컴포넌트·훅 밖과 try-catch 안에서는 안 되고, 클라이언트에서는 캐시된 Promise만 넘겨야 한다. 서버 컴포넌트에서 만든 Promise를 내려받아 읽는 것이 기본 패턴이다.

• #react
• #hooks
• #frontend
• #promise

Backend › Architecture

서비스끼리 주고받는 방식(요청-응답, 비동기 요청-응답, 발행-구독, 경쟁 소비자, 우선순위 큐, 클레임 체크), 데이터가 흐르는 방식(ETL, 배치, 스트림 처리, 이벤트 소싱, CQRS), 여러 서비스를 조율하는 방식(오케스트레이션, 사가, 리더 선출, 분산 락, 앰배서더)을 한 지도로 묶고 각 패턴이 푸는 문제와 대가를 정리했다.

• #backend
• #architecture
• #msa
• #design-pattern

Backend › Architecture

작은 오류가 연쇄 장애로 번지지 않게 하는 여덟 가지 패턴(타임아웃, 재시도, 서킷 브레이커, 속도 제한, 부하 차단, 벌크헤드, 배압, 크래시 허용), 속도 제한 알고리즘의 개요, 벌크헤드 격리 방식과 배압 전략, 재시도를 안전하게 만드는 백오프·지터 전략, 4xx·5xx별 재시도 규칙, 재시도의 전제 조건인 멱등성을 적용해야 하는 곳을 정리했다.

• #backend
• #architecture
• #performance
• #api

Backend › Architecture

클라우드 앱이 반복해서 만나는 문제(서버가 파일 전송을 떠안음, 순간 폭주, 설정 재배포, 여러 단계 작업의 실패, 인스턴스 상태 판단, 인증 위임)를 푸는 패턴을 모았다. 발레 키, 정적 콘텐츠 호스팅, 큐 기반 부하 평준화, 파이프와 필터, 계산 자원 통합, 외부 설정 저장소, 스케줄러·에이전트·감독자, 헬스 엔드포인트 모니터링, 연합 ID, 백그라운드 작업을 다루고, 다른 노트에 집이 있는 패턴은 지도로 잇는다.

• #backend
• #architecture
• #cloud
• #design-pattern

Computer Science › Operating System

동시 작업의 수명을 코드 블록에 묶어, 블록을 빠져나갈 때 그 안에서 띄운 작업이 모두 끝나 있게 하는 원칙. go 문·스레드 생성·콜백처럼 흐름을 갈라놓고 돌아오지 않는 기본 요소는 goto처럼 지역적 추론을 깨뜨린다. nursery·TaskGroup·coroutineScope가 이를 대체해 예외 전파, 자원 정리, 취소를 자동으로 보장한다.

• #computer-science
• #os
• #programming-paradigm

Computer Science › Operating System

동시성(논리적으로 함께 진행)과 병렬(물리적으로 동시에 실행), 동기·비동기(완료를 누가 확인하나)와 블로킹·논블로킹(제어권을 바로 돌려받나)을 구분하고, 스레드보다 가벼운 실행 단위(파이버·코루틴·그린 스레드·가상 스레드), async/await와 CPS, Reactor·Proactor, 공유 메모리 대신 메시지를 쓰는 CSP·액터, Go·Tokio·BEAM 런타임의 스케줄링, GIL과 그 대안을 한 지도로 정리한다.

• #computer-science
• #os
• #concurrency
• #process
• #performance

Computer Science › Programming Languages

Java 코드를 안전하고 읽기 좋게 만드는 관용구를 주제별로 정리한다. 상수와 행위를 묶는 Enum, null을 API에서 몰아내는 방법과 Optional 규칙, checked 예외를 unchecked로 바꾸는 전략과 try-with-resources의 억제된 예외, Date·Calendar 대신 java.time, CompletableFuture 조합, 함수형 인터페이스·람다 캡처·메서드 참조 네 가지, 스트림의 지연 파이프라인과 병렬 스트림의 조건, 스트림과 반복문의 성능 차이를 다룬다.

• #java
• #backend
• #oop
• #convention