운영체제와 브라우저는 우리의 클릭 이벤트를 어떻게 처리할까? (유저 모드, 커널 모드, 인터럽트, 시스템 콜)

솔직히 운영체제를 배울 때 가장 와닿지 않는 부분이었다.

도대체 인터럽트가 언제 일어난다는거야? 본적도 없는데.
난 시스템 콜 발생시켜본적도 없는데?

우선 기본 개념을 작년에 들었던 운영체제 수업 필기를 참고해서 다시 정리해보았다.

유저모드, 커널모드

User mode

• 제한된 명령어만 사용 가능.
• 하드웨어 디바이스 접근 불가.
• OS가 아닌 나머지 프로그램은 유저모드에서 돌아간다. 

Kernel mode

• CPU에서 제공하는 모든 instruction 수행 가능.
• 디바이스 레지스터를 포함한 모든 하드웨어 디바이스에 접근 가능.
• OS는 커널모드에서 돌아간다. 

 → 이를 결정하는 것은 CPU이다.

 

인터럽트 (Interrupt)

Interrupt (하드웨어 Interruption)

• 시스템에서 발생한 다양한 종류의 이벤트 or 이벤트를 알리는 메커니즘
• 디바이스 하드웨어가 interrupt 신호를 발생시키면 OS가 커널모드로 전환
• 비동기적

Trap (소프트웨어 Interruption)

• 유저 프로그램이 시스템 콜 호출, 유저 모드에서 커널 모드로 진입하기
  → Trap 명령어로 exception을 발생시킴 (소프트웨어 interrupt 던짐)
• 동기적

 

시스템콜 (System call)

운영체제에 요청하는 함수들.

프로그램: 커널모드의 운영체제야. 난 지금 유저모드인데 건드릴 수 없는 자원 있어… 이 명령 대신 해줘.

시스템 콜의 종류

• 프로세스/스레드 관련
• 파일 I/O 관련
• 소켓 관련
• 장치 관련
• 프로세스 통신 관련
• 기타 정보
  
  • 시간과 날짜의 설정과 획득(time)
  • 시스템 데이터의 설정과 획득(date)

 

파일 read 예제

System Call

 

 

다시 처음으로 돌아와서

도대체 인터럽트가 언제 일어난다는거야? 본적도 없는데.
난 시스템 콜 발생시켜본적도 없는데?

 

시스템 콜의 종류에는 파일 I/O, 시간과 날짜 정보 얻기, 프로세스 통신, ... 등이 있었다.

그렇다. 사실 나는 위에서 알아봤던 시스템 콜 작업들을 해왔다.

이게 어떻게 가능했을까?

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question('이름을 입력하세요: ', (name) => {
  console.log(`안녕하세요, ${name}!`);
  rl.close();
});

 → node.js가 시스템 콜을 래핑해서 간접적으로 사용할 수 있도록 제공했기 때문이다.

 → 실제로는 해당 코드가 실행되면 I/O 시스템 콜이 CPU로 들어가 소프트웨어 인터럽트가 발생, 우리가 키보드 입력을 하면 하드웨어 인터럽트가 발생한 뒤 위에서 설명한 과정을 거쳐 return된다.

 

그럼 브라우저는 우리의 클릭 이벤트를 어떻게 처리할까?

그러면 브라우저에서는 어떤 원리로 이벤트를 감지할 수 있었을까? 클릭 이벤트, 키보드 이벤트 등은 모두 사용자 "입력"으로 인해 발생한다.

사용자가 화면을 클릭하면... (Chrome)

1. 마우스 클릭으로 인한 입력으로 하드웨어 인터럽트 발생, CPU한테 보내고 CPU는 커널모드로 진입

2. 운영체제는 인터럽트 벡터를 통해 인터럽트 핸들러 실행, 네이티브 이벤트를 생성하여 Chrome의 브라우저 프로세스로 return, 다시 유저 모드로 들어옴

3. 브라우저 프로세스는 렌더러 프로세스로 이벤트의 유형과 좌표만 전달 (브라우저 프로세스는 렌더러 프로세스가 관리하는 컨텐츠 자체는 모르기 때문)

4. 렌더러 프로세스는 이벤트 타겟을 찾고 DOM 이벤트 객체를 생성&전파. 옵션에 따라 캡쳐링or버블링 단계에서 부착된 이벤트 리스너를 실행

 

참고자료

Tanenbaum, A. S. (2006). Modern operating systems (3rd ed.) Prentice Hall.

https://chromium.googlesource.com/chromium/src/+/main/docs/ui/input_event/index.md

https://developer.chrome.com/blog/inside-browser-part4