목표 : 동기/비동기의 개념과 JS에서의 사용법을 학습
동기/비동기
- 동기(Synchronous) 처리
동기 처리는 태스크(작업)를 순차적으로 실행하는 방식
한 작업이 완료될 때까지 다음 작업은 대기- 장점 : 간단하고 직관적인 코드 흐름
- 단점 : 한 작업이 오래 걸리면 전체 프로그램이 지연될 수 있음
- 비동기(Asynchronous) 처리
비동기 처리는 여러 태스크를 동시에 처리할 수 있는 방식
한 작업이 시작되면 그 작업이 끝나기를 기다리지 않고 다음 작업을 시작- 장점 : 시간이 오래 걸리는 작업을 효율적으로 처리
- 단점 : 코드의 복잡성이 증가할 수 있음
직렬: 순차 / 병렬 : 동시
- 동기 + 직렬 (한 명씩, 기다림)
- 손님 A 주문 → 셰프가 A 요리 완성할 때까지 기다림 → 손님 B 주문 처리 시작 → 손님 C.
- 결과: 한 주문이 끝나야 다음 주문이 시작되므로 전체 시간이 길다.
- 비동기 + 직렬 (요청은 비동기, 처리 순서는 유지)
손님 A가 주문을 내보내고 서버는 다른 손님 주문을 받음(비동기 요청 수용).
내부적으로는 셰프가 A→B→C 순서대로 만듦(직렬 처리).
- 결과: 주문 접수는 막힘 없이 빠르지만 실제 조리 대기는 직렬로 이어져 전체 지연은 남는다.
- 비동기 + 병렬 (현실적인 빠른 방식)
- 손님들이 주문을 내보내면(비동기), 레인지 3개가 있어 3개의 요리를 동시에 조리(병렬)한다. 완료되면 각각 서빙 알림.
- 결과: 총 소요 시간이 크게 줄어 응답성이 좋아짐. 다만 레인지 수나 재료 경쟁 같은 동기화 문제를 관리해야 한다.
1. 왜 Deferred, when, done을 사용하는가?
여러 개의 비동기 요청을 병렬로 처리하고, 모두 끝난 뒤에 하나의 콜백을 실행하기 위해둘 다 언제 응답이 올지 모르는 비동기 처리이기 때문에
두 요청이 모두 끝난 후에 화면 렌더링을 해야 한다.
- 원하는 로직
- 요청1 and 요청2 모두 끝났는지 체크 → 둘 다 끝난 시점에 render 실행
그래서 jQuery Deferred + $.when + done() 을 이용한 것
2. Promise가 나오기 전에는
jQuery Deferred가 표준적인 비동기 패턴이었다
- 현대 JS에서는 Promise.all()로 할 일을 예전에는:
- $.Deferred()로 비동기 제어
- $.when()으로 여러 비동기 병렬 관리
- .done()로 후처리
3. callback 중첩을 피하기 위해
Deferred는 이를 평면 구조로 단순화
- 전체 흐름
- 1. issueId 존재 체크
- 2. 두 가지 비동기 요청을 병렬로 시작
- issue detail 조회
- issue relation 조회- 3. $.when() 이 두 요청이 모두 resolve 될 때까지 기다림
- 4. .done() 내부에서 화면 렌더링 처리
- 5. 첨부 이미지 처리 + highlight.js 적용
이러한 비동기 요청을 Defferred 로 감싼다
이 패턴은 콜백 기반 비동기 함수 를
Deferred 기반 비동기 객체 로 변환하는 래핑(wrapping)이다
이렇게 해야 $.when() 이 끝난 시점 을 감시할 수 있다.$.when( deferred1, deferred2 ).done(function (issueDetail, relatedIssueList) {
- 동작 방식
- 1.Deferred1이 resolve될 때까지 기다림
- 2.Deferred2도 resolve될 때까지 기다림
- 3.둘 다 완료되면 done() 실행
- 4.done() 인자에는 각 Deferred의 resolve() 값이 들어감
→ 콜백 파라미터로 전달됨 (이 로직 자체가 Promise.all() 과 동일한 방식)
- done()에서 실제 데이터 가공 및 렌더링
- 비동기 처리 결과를 UI에 반영하는 곳
- 비동기 요청이 끝나기 전에 렌더링하면 데이터가 비어있으므로
- 완료 후 실행을 보장하는 done()이 필수
이 코드는 jQuery의 Deferred / when / done 을 사용하여
여러 비동기 요청을 병렬로 처리하고, 모두 완료된 후 UI 렌더링을 수행하는 패턴
원래 콜백 기반 함수를 Deferred로 감싸 $.when()으로 처리
$.when()은 모든 비동기 작업이 완료되었을 때 done() 콜백이 실행
when()은 비동기 작업을 병렬로 등록하는 단계
done()은 등록된 비동기작업이 모두 끝나면 실행되는 비동기 콜백
하지만 done() 내부 코드 자체는 동기적으로 실행된다
(즉, 콜백 안에서는 한 줄씩 순차 실행됨)
이를 통해 콜백 중첩을 피하고
데이터 조회 완료 후 UI 반영을 안정적으로 처리할 수 있다
'Java' 카테고리의 다른 글
| [Java] 단일/멀티 스레드 (0) | 2025.10.07 |
|---|---|
| [Java] intelliJ 사용 및 설정 (0) | 2025.09.11 |
| [강남] 쌍용 교육센터 국비100%지원!! (1) | 2025.04.20 |
| [Java] 직렬화 Serializable, Stream - Data,File,Object (0) | 2025.04.05 |
| [Java] 파일기록&복사 - FileOutputStream&Writer,JFileChooser (0) | 2025.04.02 |