📅 스터디 정보

1. 🗺️ 개념 지도 (Overview)

이 주제를 한 문장으로 설명하면?

프로세스는 실행 중인 프로그램 단위이고,
스레드는 그 프로세스 내부에서 실제 작업을 수행하는 실행 흐름이다.

이 주제가 왜 중요한가?

• 운영체제가 프로그램을 어떻게 실행하고 관리하는지 이해할 수 있다.
• 브라우저가 왜 멀티 프로세스 구조인지 이해할 수 있다.
• JavaScript가 왜 싱글 스레드인지 설명할 수 있다.
• Web Worker / Event Loop 같은 개념과 연결된다.

[프로세스와 스레드]

├── 프로세스
│   ├── 독립 메모리 공간
│   ├── PID
│   ├── Context Switching
│   └── 프로세스 상태 (Ready / Running / Waiting)

├── 스레드
│   ├── 프로세스 내부 실행 흐름
│   ├── Stack만 독립
│   └── Code / Data / Heap 공유

├── 멀티 프로세스
│   ├── 안정성 높음
│   └── IPC 필요

├── 멀티 스레드
│   ├── 성능 좋음
│   └── 동기화 문제 (Race Condition)

└── 브라우저 구조
    ├── Browser Process
    ├── Renderer Process
    ├── GPU Process
    └── Web Worker

2. 📖 핵심 개념 정리

⚠️ 단순 복붙 금지! 반드시 자신의 말로 재작성할 것

2-1. 프로세스

프로세스는 현재 OS에서 메인메모리에 올라와 실행중인(돌아가고 있는) 프로그램을 의미한다. 모든 프로그램은 OS가 실행되기 위한 메모리 공간을 할당해줘야 실행이 가능하다. 따라서 프로그램을 실행하는 순간 파일은 컴퓨터 메모리에 올라가며, OS로 부터 CPU 자원을 할당 받아 프로그램이 실행될 수 있게 된다.

• 각 프로세스는 식별을 위해 고유한 프로세스 ID(PID)를 가지고 있다.
• 각 프로세스는 자신만의 독립된 메모리 공간(Code, Data, Stack, Heap)을 갖는다.
• 모든 프로세스는 new(생성됨), ready(준비됨), running(실행중), waiting(대기중), terminated(종료됨) 과 같이 총 5가지의 상태를 거치게 된다.
• context switching 은 CPU가 한 프로세스에서 다른 프로세스로 전환할 수 있도록 돕는 것을 말한다.

2-1-2. 프로세스의 자원 구조

프로그램이 시작될 때 크기가 결정되어, 실행하는 동안에도 변하지 않는 구역이다.

1. 코드 영역(Code / Text)
   • 프로그램이 시작될 때 크기가 결정되고, 실행되는 동안 변하지 않는 영역이다.
   • 프로그래머가 작성한 프로그램 함수들의 코드가 CPU가 해석 가능한 기계어 형태로 저장되어 있다.
2. 데이터 영역(Data)
   • 코드가 실행되면서 사용하는 전역 변수나 각종 데이터들이 모여있다. 데이터영역은 .data ,.rodata, .bss 영역으로 세분화 된다.
     • .data : 초기값이 있는 전역 변수 → 실행 파일에 값이 있어야함
     • .BSS : 초기값 없는 전역 변수, static 변수가 저장 → 실행 파일에서는 할당될 공간만 지정되어 있고 실제 메모리에는 0으로 초기화되어 올라감 ( = 실행 파일 크기를 줄일 수 있음)
     • .rodata(read only data) : const 같은 상수 키워드로 선언된 변수나 문자열 상수 → 수정이 불가능한 영역

프로그램이 실행되는 동안 크기가 변경되는 영역이다. 스택은 메모리의 높은 주소 → 낮은 주소로 내려오며 쌓이고, 힙은 메모리의 낮은 주소 → 높은 주소로 올라가며 쌓인다. 한정적인 메모리 공간을 유연하게 가져가기 위해 필요한 만큼 사용될 수 있도록 이러한 형태로 구성되어 있다.

1. 스택 영역(Stack)
   • 함수가 호출될 때마다 생기는 일시적인 공간으로, 함수의 호출이 완료되면 소멸된다.
   • 함수 호출 시 특정 함수만의 스택 프레임이 생겨, 매개변수/지역변수/리턴 주소 등이 들어가게 된다.
   • 여기서 재귀 함수가 깊어지고, 지역 변수가 너무 커지는 등의 문제가 생기면 스택 경계를 넘는 Stack Overflow 가 발생한다
2. 힙 영역(Heap)
   • 생성자, 인스턴스와 같은 동적으로 할당되는 데이터들을 위해 존재하는 공간

// 1. 데이터 영역 (Global Scope)
let globalVar = 10;          // 초기값이 있는 전역 변수 (Data 영역 역할)
let uninitVar;               // 초기값이 없는 변수 (BSS 영역 역할 - JS에선 undefined)
const CONST_VAR = 5;         // 상수 (ROData 영역 역할)

function myFunction(arg) {   // arg: Call Stack에 할당

핵심 포인트:

• 프로그램 = 실행 파일 (정적)
• 프로세스 = 실행 중인 프로그램 (동적)
• 프로세스마다 독립적인 메모리 공간을 가진다
• 다른 프로세스와 직접 메모리를 공유하지 않는다
• 프로세스 간 통신을 위해 IPC (Inter Process Communication) 사용

2-2. 스레드

한 프로세스 내에서 동시에 진행되는 일의 단위를 말한다. 하나의 프로세스는 최소 하나 이상의 스레드를 가지며, 해당 프로세스의 자원을 서로 공유하며 동작한다.

• 스레드들은 프로세스가 가진 메모리 중 Stack만 따로 갖고, 나머지(Code,Data,Heap) 영역은 동료 스레드들과 공유하게 된다.
• 자원을 공유하고 있기때문에 스레드 간의 통신은 매우 빠르고, 생성 비용도 프로세스에 비해 저렴하다.
• 공유 공간에서 문제가 발생하면 다른 스레드에게 영향을 줄 수 있다.

2-2-2. 스레드의 자원 공유

아래 코드에서

• 메인 스레드 → UI 담당
• Worker → 별도 스레드에서 연산 수행

// main.js

const worker = new Worker("worker.js");

worker.postMessage("start");

worker.onmessage = function (event) {
  console

핵심 포인트:

• 스레드는 프로세스 내부 실행 단위
• Stack만 독립이고, Code / Data / Heap 공유
• 통신이 빠르지만 동기화 문제가 발생할 수 있다

2-3. 멀티 프로세스와 멀티스레드

하나의 프로그램을 여러개의 프로세스로 구성하여, 각 프로세스가 하나의 작업을 처리하게 하는 방식

• 멀티 프로세스의 장점
  • 안전성 확보
    • 각 프로세스가 독립적인 메모리 공간을 가지기에, 한 프로세스가 비정상적으로 종료되어도 다른 프로세스에 영향을 주지 않는다 (서로 격리!)
  • 보안
    • 메모리를 서로 공유하지 않기 때문에 메모리에 침범할 수 없다.
• 멀티 프로세스의 단점
  • 각 프로세스마다 code,data,heap,stack 가 복사되기에 메모리 사용량이 많다.
  • 프로세스를 전환할 때 context switching 에 대한 비용이 필요하다(Register, PC, Memory map 등 ..)
  • 메모리 공유가 안되니 프로세스 간 통신이 느리다. (IPC 비용)

하나의 프로세스 내에서 여러 개의 스레드를 생성하여 각 스레드가 작업을 분담하는 방식

• 멀티 스레드 장점
  • 같은 프로세스 메모리를 사용하여 통신이 매우 빠르다.
  • 프로세스 생성 비용에 비해 생성 비용이 낮다.(Stack만 생성하여 빠름)
  • 같은 프로세스 내에서의 변경이라 context switching 이 빠르다.
• 멀티 스레드 단점
  • 여러 스레드가 동시에 공유 메모리에 접근하여 Race Condition, Deadlock 이 발생할 수 있다.
  • 한 스레드가 비정상적으로 종료되면 전체 스레드가 영향을 받을 수 있다.(Thread crash → Process crash)

• 멀티 프로세스를 선택하는 경우
  • 안정성이 중요할 때 (브라우저 탭, 금융, OS 등 ..)
  • 보안이 중요할 때
  • CPU 코어를 완전히 분리하고자 할 때
• 멀티 스레드를 선택하는 경우
  • 성능이 중요한 경우 (게임 엔진, 렌더링, 영상 처리 등 ..)
  • 데이터 공유가 많은 경우 (캐시 등..)
  • 작업이 매우 많은 경우

핵심 포인트:

• 멀티 프로세스 = 안정성, 멀티 스레드 = 성능

2-4. 브라우저에서의 멀티프로세스와 멀티스레드

현대 브라우저 중 특히 크롬은 멀티 프로세스 구조로 이루어져있다. 브라우저 전체를 제어하는 브라우저 프로세스와, 화면을 그리는 렌더러 프로세스, 그래픽 작업을 처리하는 GPU 프로세스 등이 IPC 를 통해 통신하며 웹사이트를 보여주는 것이다. 한 탭이 망가져도 브라우저 전체가 죽지 않게 하고, 보안을 위해 멀티 프로세스 구조를 사용한다.

• 브라우저 프로세스 (The Boss)
  • 브라우저 전체를 제어하는 핵심 프로세스
  • 주소창, 북마크, 뒤로 가기 버튼 등 사용자 인터페이스와 네트워크 요청, 파일 액세스 등 브라우저 UI와 시스템 권한 담당
• 렌더러 프로세스 (The Worker)
  • 웹 페이지를 실제로 렌더링하는 프로세스로, 웹사이트가 표시되는 탭 내부의 모든 일을 담당한다.
    • HTML 파싱
    • CSS 계산
    • JavaScript 실행
    • DOM 생성
    • 화면 렌더링
  • 기본적으로 탭마다 하나씩 할당되지만, 최근에는 사이트 격리(Site Isolation)를 통해 iframe 내의 다른 사이트까지 별도 프로세스로 분리한다.
  • 내부적으로는 멀티 스레드로 구성되어있다.

    스레드 종류	주요 역할 (프론트엔드 관점)
    Main Thread	JS 실행, HTML 파싱, DOM 생성, 레이아웃 계산 등 대부분의 메인 작업 수행

// 1. 하드웨어 스레드(코어) 개수 확인
// 브라우저가 멀티 프로세싱을 할 때 활용할 수 있는 물리적 자원 정보를 알 수 있음
console.log(`현재 기기의 논리 코어 개수: ${navigator.hardwareConcurrency}`);

// 2. 렌더러 프로세스와 별개로 동작하는 Web Worker
// 메인 스레드(렌더러 프로세스 내부)를 방해하지 않고 별도의 스레드에서 무거운 작업 실행
const worker = new Worker

1. 안정성
   • 각 탭이 독립적인 프로세스에서 실행되기에, 탭 하나가 멈춰도 다른 탭은 정상 동작한다.
2. 보안 (sandbox)
   • 프로세스마다 권한을 제어할 수 있게 된다.
   • 예를 들어, Renderer Process 같이 사용자 입력을 처리하는 프로세스는 파일 시스템 접근이 제한된다

     → 즉 악성 웹사이트가 실행되더라도 시스템 전체에 접근하기 어려움

• 많은 메모리가 소모된다
  • 프로세스에는 자체 비공개 메모리 공간이 있으므로 Chrome의 JavaScript 엔진인 V8과 같은 공통 인프라의 사본이 포함되는 경우가 많다. (V8 엔진이 각 탭마다 필요하게 된다.)

    → 스레드 처럼 메모리 공유가 불가능하여 메모리 사용량이 더 많게된다.

  • Chrome은 메모리를 절약하기 위해 시작할 수 있는 프로세스 수에 제한을 둔다.

    → Chrome이 한도에 도달하면 하나의 프로세스에서 동일한 사이트의 여러 탭을 실행하기 시작한다.

핵심 포인트:

• 브라우저는 안정성과 보안을 위해 멀티프로세스 구조를 사용한다.
• 각 탭이나 사이트는 보통 별도의 Renderer Process에서 실행된다.
• 하나의 프로세스 내부에서는 멀티스레드로 작업을 병렬 처리한다.
• JavaScript는 Renderer Process의 Main Thread에서 싱글 스레드로 실행된다.

3. 🔍 깊이 이해하기

왜 이렇게 설계됐을까? (Design Decision)

이 기술/개념이 왜 이런 방식으로 만들어졌는지 배경을 이해하자

• 초기엔 프로그램만 존재했지만, 하나만 실행시키는 것이 비효율적이었기에,
• 프로세스가 등장하게 되었다. 따라서 여러 일을 한 번에 처리할 수 있었지만, 일을 쪼개려면 너무 무겁게 되었다.
• 그래서 스레드 개념이 등장하여, 효율을 높이고자 메모리를 공유할 수 있게 되었다.

다른 개념과의 비교

유사한 개념과 차이점 정리 (면접에서 자주 나오는 포인트)

실무에서는 어떻게 쓰이나?

실제 프로젝트에서 마주칠 수 있는 상황

• 브라우저의 탭

  브라우저는 탭마다 별도의 렌더러 프로세스를 가진다.

  무거운 대시보드, 복잡한 데이터 시각화, 무한 루프 코드가 실행되더라도 해당 탭만 멈추고 다른 탭은 정상 동작한다.

  즉, 멀티프로세스 구조 덕분에 브라우저 전체가 죽지 않는다.

  +) 탭별 프로세스가 독립적이므로 LocalStorage, SessionStorage, IndexedDB, BroadcastChannel 같은 브라우저 API를 활용해 상태를 공유한다.

• JS 메인 스레드 차단

  자바스크립트는 싱글 스레드다.

  대량 데이터 처리, 복잡한 연산, 무한 루프 등으로 메인 스레드가 막히면 버튼 클릭, 스크롤, 애니메이션이 멈춘다.

  이런 것들을 방지하기 위해 연산을 쪼개거나 비동기 처리, Web Worker를 활용한다.

• 렌더링 성능 최적화

  브라우저 내부에는 Compositor Thread, Raster Thread 등 여러 스레드가 있다.

  프론트 개발자는 transform, opacity 등 GPU 가속을 지원하는 CSS 속성을 활용해 부드러운 애니메이션을 구현한다.

4. 🎤 구두 설명 연습

면접관 앞에서 말하듯이 작성. 읽는 용도가 아니라 말하는 연습을 위한 섹션

"~이 뭔가요?" 질문에 대한 답변 스크립트

[도입 - 핵심 정의 먼저]
"프로세스는 실행 중인 프로그램의 인스턴스로 OS로부터 독립된 자원을 할당받는 작업 단위이고, 스레드는 그 프로세스 내부에서 실제로 작업을 수행하는 흐름의 단위입니다."

[부연 - 왜/어떻게]
"가장 큰 차이는 자원 공유 여부입니다. 프로세스는 독립된 메모리를 가져서 안전하지만 무겁고 소통(IPC)이 어렵습니다. 반면 스레드는 Heap과 Data 영역을 공유해서 빠르고 효율적이지만, 공유 자원을 두고 싸우는 동기화 문제를 주의해야 합니다.
흥미로운 점은 우리가 쓰는 크롬 브라우저는 이 두 장점을 모두 취하기 위해 멀티 프로세스 아키텍처를 사용한다는 것입니다. 각 탭을 별도의 렌더러 프로세스로 분리해 안정성을 높이고, 그 내부에서는 싱글 스레드로 자바스크립트를 실행하며 효율을 챙깁니다."

[마무리 - 실무 연결]
"실제로 프론트엔드 개발을 할 때, 메인 스레드가 차단되어 화면이 멈추는 현상을 방지하기 위해 비동기 처리를 하거나, 아주 무거운 연산은 Web Worker라는 별도 스레드에 맡기는 방식으로 이 개념을 실무에 적용하고 있습니다."

⏱️ 1분 요약 버전

면접관이 바쁠 때, 딱 1분 안에 설명하는 버전

프로세스는 '독립된 공장'이고 스레드는 그 안의 '일꾼'입니다. 프로세스는 서로 자원을 공유하지 않아 안전하지만 무겁고, 스레드는 자원을 공유해 빠르지만 하나가 사고를 치면 공장 전체가 위험해질 수 있습니다.
자바스크립트는 싱글 스레드라 한 번에 한 일만 하지만, 브라우저가 멀티 프로세스 구조로 설계된 덕분에 탭 하나가 멈춰도 전체 브라우저는 안전하게 유지됩니다. 성능 최적화를 위해서는 이 메인 스레드가 멈추지 않도록 관리하는 것이 프론트엔드 개발의 핵심입니다.

5. ❓ 예상 면접 질문 & 답변

각 질문에 대해 STAR 구조 혹은 두berlingo 두berlingo 두 문장 요약으로 작성

기본 질문

심화 질문 (꼬리질문 대비)

🧨 함정/난이도 높은 질문

6. 🛠️ 실습 / 직접 구현해보기

개념을 몸으로 익히기 위한 미니 실습

실습 목표

실습 코드

// 직접 작성한 코드

실습하면서 깨달은 점

7. 📝 나만의 요약 노트

공부하고 나서 진짜 내 머릿속에 남은 것들만 정리

오늘 이 주제에서 가장 중요한 것 3가지

1. 프로세스는 프로그램이 실행된 상태를 말하며, OS에게서 독립된 메모리를 할당 받는다. 반면, 스레드는 프로세스 내부에서 stack을 제외한 heap, data,code 는 공유하는 흐름의 단위를 말한다.
2. 멀티 프로세스와 멀티 스레드의 가장 큰 차이는 메모리의 공유범위이다. 스레드는 스택 제외 모두 다른 스레드들과 공유하고 있다! 또한, 안정성을 중요시할 때는 멀티 프로세스를, 빠르고 가벼운 걸 중요시할 때는 멀티 스레드를
3. 크롬은 각 탭마다 별도의 프로세르를 띄우고 있는 개념이다. 그래서 탭 하나가 죽어도 다른 탭에 영향이 가지 않는다. 하지만 많은 일을 하는 렌더러 프로세스 등은 내부적으로 결국 멀티 스레드로 구성되어 있다.

헷갈렸던 부분 & 해결

더 공부하고 싶은 것

8. 📚 참고 자료

• https://www.geeksforgeeks.org/operating-systems/difference-between-multiprocessing-and-multithreading/
• https://developer.chrome.com/blog/inside-browser-part1?hl=ko
• https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-multi-process-multi-thread