Curt Poem

프론트 엔드 공부와 지식 나눔을 위한 블로그

자바스크립트와 멀티 쓰레드 4

자바스크립트와 멀티 쓰레드 3 - 다른 형태의 워커(사실 의미가 적은 글)

자 지금까지 다양한 종류의 워커를 알아보았습니다. 사실 Shared Worker와 Service Worker는 단순 추가적인 쓰레드를 활용한다기 보다는 특별한 종류의 작업을 처리하는 것에 더 가까운 것같습니다. 제목인 자바스크립트와 "멀티 쓰레드"와는 조금 맞지 않은 부분이 있습니다.(제목을 자바스크립트와 워커들 같은 식으로 지었어야했나봅니다.) 하지만 오늘 다룰 워커는 멀티 쓰레드라는 제목과 가까운 워커입니다. 바로 Dedicated Worker인데요. 한국말로 번역해 보자면 전용 워커 정도가 될 것입니다. Dedicated는 "헌식적인"이라는 뜻도 있지만 "특정한 목적을 위한"이라는 뜻도 있습니다. 그리고 Dedicated Worker는 이 뜻에 훨씬 잘 들어 맞죠. 그리고 별 다른 언급없이 워커를 ..

개발/JavaScript 2025.02.23

자바스크립트와 멀티 쓰레드 3 - Service Worker로 백그라운드에서 네트워크다루기

웹 애플리케이션에서 중요하게 여겨지는 점 중 하나는 네트워크 최적화입니다. 네트워크와 관련해서 다양한 요청을 캐싱하고, 캐싱한 데이터를 적절한 타이밍에 업데이트하고, 인터넷 연결이 불안정한 상황에서도 최소한의 확실한 동작을 보장하는 것이 중요한 문제입니다. AXIOS, Tanstack Query 등 네트워크와 관련한 다양한 라이브러리가 인기있는 이유이기도 합니다. 이번에는 백그라운드에서 네트워크 요청을 다루며, 다양하게 활용할 수 있는 Service Worekr에 대해 다루어보겠습니다. Service WorekrServie Workeer는 다른 Worker들과 마찬가지로 메인 쓰레드가 아닌 별도의 쓰레드에서 관리되는 Worker입니다. 특히, 네트워크 요청 가로채기(intercept), 요청 캐싱 등을 ..

개발/JavaScript 2025.02.08

자바스크립트와 멀티 쓰레드 2 - Shared Worker로 여러 탭과 창의 데이터를 공유하기(+추상화하여 메모리 관리하기)

Shared Worker와 Service Worker는 이전 글에서 언급하였듯이 데이터 공유와 비동기 작업을 효율적으로 처리하기 위해 제공되는 Web Worker의 확장된 인터페이스입니다. 두 Worker모두 메인 쓰레드와 분리되어 독립된 스레드에서 실행되며, 성능 최적화를 통한 사용자의 경험 향상을 위해 사용할 수 있습니다.Shared WorkerShared Worker는 동일한 출처(origin)에서 실행되는 여러 브라우저 탭, iframe, 또는 웹 애플리케이션 간에 공유될 수 있는 Worker입니다. 만약 브라우저의 서로 다른 탭(tab)이더라도 같은 출처를 가진다면 모두가 동일한 Worker에 접근 가능합니다. 그래서 만약 여러 개의 탭이나 윈도우 창이 켜져있더라도 모두 같은 데이터를 공유받거나..

개발/JavaScript 2025.01.28

자바스크립트와 멀티 쓰레드 1 - 자바스크립트가 싱글 쓰레드라고 불리는 이유와 Worker로 여러 개의 쓰레드 사용하기

자바스크립트는 싱글 쓰레드 언어로 널리 알려져 있습니다. 하지만 브라우저의 Web Worker, 노드의 Worker Thread를 활용하면 멀티 쓰레드 환경을 구현할 수 있습니다. 자바스크립트로 멀티 쓰레드 환경을 구현하는 방법을 알아보기 전에 멀티 쓰레드 환경을 구현할 수 있음에도 싱글 쓰레드 언어라고 소개하는 지 짚어보고 넘어가도록 하겠습니다.자바스크립트는 싱글 쓰레드 언어?자바스크립트의 기본 실행 환경은 단일 쓰레드 환경입니다. 즉, 자바스크립트는 하나의 호출 스택에서 한번의 하나의 작업이 처리된다는 뜻입니다. 이런 작업의 처리는 브라우저든, Node 환경이든 메인 이벤트 루프에서 관리되며 순차적으로 처리됩니다. DOM 조작, 이벤트 처리, UI 업데이트 등의 거의 모든 자바스크립트 동작은 메인 쓰..

개발/JavaScript 2025.01.11