JavaScript Academy · 강의

연결 수명 주기와 오류

열림, 닫힘, 오류 이벤트를 처리합니다.

연결 수명 주기와 오류은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

전체 수명 주기

socket은 CONNECTING → OPEN → CLOSING → CLOSED 상태를 거칩니다. 네 가지 이벤트인 open, message, error, close가 이러한 전환에 대응합니다.

onclose 이벤트

연결이 정상적으로 또는 비정상적으로 종료되면 onclose가 실행됩니다. 이벤트에는 code, reason, wasClean이 포함됩니다.

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

종료 코드

표준 코드에는 1000(정상), 1001(연결 대상이 사라짐), 1006(종료 프레임이 없는 비정상 종료), 1011(서버 오류)가 있습니다. 4000~4999 코드는 앱에서 정의할 수 있습니다.

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

의도적으로 종료하기

socket.close(code, reason)은 정상적인 종료를 시작합니다. 정상 종료에는 1000을 사용하며, reason 문자열은 123바이트 미만이어야 합니다.

socket.close(1000, "user logged out");

onerror 이벤트

실패가 발생하면 onerror가 실행됩니다. 보안을 위해 오류 이벤트에는 의도적으로 최소한의 정보만 포함되며 자세한 이유는 전달하지 않습니다. 거의 항상 이어서 close 이벤트가 발생합니다.

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

정상 종료와 비정상 종료 구분

양쪽에서 모두 종료 프레임을 주고받은 경우에만 event.wasClean이 true가 됩니다. 네트워크 연결이 끊기면 wasClean: false와 코드 1006이 전달됩니다.

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

리소스 정리

종료할 때 timer(하트비트)를 clear하고, 대기 중인 요청을 거부하며, 앱에 연결 해제가 반영되도록 UI 상태를 업데이트합니다.

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

리스너 제거

addEventListener로 핸들러를 연결했다면 누수가 발생하지 않도록 종료 시 핸들러를 remove하세요. socket을 다시 만들 때 특히 중요합니다.

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

종료 중 readyState

close()를 호출한 후 onclose 이벤트가 발생하기 전까지 readyState는 CLOSING (2)입니다. 이 시간 동안의 전송은 무시됩니다.

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

서버의 유휴 timeout

서버와 프록시는 30~60초가 지나면 유휴 연결을 닫는 경우가 많습니다. 하트비트는 연결을 활성 상태로 유지하고 연결 끊김을 신속하게 감지하도록 도와줍니다.

끊어진 연결 감지

하트비트와 감시자를 함께 사용하세요. 일정 시간 안에 퐁 응답이 도착하지 않으면 socket이 끊어진 것으로 보고 close하여 다시 연결되도록 합니다.

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

빠른 확인

수명 주기 처리를 테스트해 보세요.

복습: 수명 주기와 오류

code/reason/wasClean을 포함한 onclose를 처리하고, 표준 종료 코드를 배웠으며, 의도적으로 연결을 종료했습니다. 또한 정보가 제한적인 onerror를 처리하고 timer와 리스너를 정리했으며, 하트비트 감시자를 만들었습니다. 다음에는 재연결 전략을 알아봅니다.

자주 묻는 질문

“연결 수명 주기와 오류” 강의는 무료인가요?

네 — “연결 수명 주기와 오류” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“연결 수명 주기와 오류”에서 뭘 배우나요?

열림, 닫힘, 오류 이벤트를 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“연결 수명 주기와 오류” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기