# Web Worker

성능을 개선한 워드클라우드 (Web Worker)
🔍워드클라우드? 워드클라우드는 데이터를 시각적으로 보여줌으로써 키워드와 개념을 직관적으로 파악할 수 있게 해줄 수 있는 기법입니다. 가중치가 크거나 빈도가 높은 단어는 크게 표현해 한 눈에 들어 올수있게 하는 대표적인 기법이 있습니다. 이러한 특징으로 컴포넌트를 만들 때 고려해야 하는 부분들이 많고 복잡할 수 있습니다. 하지만 직접 만들어보면 배울 점이 많은 과제라고 생각하여 직접 만들어 보았습니다. 🧐 첫 워드클라우드 아쉬운 완성 초기에 구현했던 워드클라우드는 BFS로 전체 캔버스를 탐색하고 DFS로 글자크기만큼 비었는지 확인 후 단어를 놓았습니다. 그러고 나서 완전 탐색으로 다시 전체 canvas 빈자리를 확안하고 단어를 놓는 로직으로 구현하였습니다. 보라색 색깔 글자를 보게 되면 3가지의 알고리즘이 사용하였습니다. 이중배열, while, 재귀까지 복잡성을 높이는 여러 요소가 포함되어 있습니다. 그 결과
Web Worker와 Service Worker
https://yrnana.dev/post/2021-03-09-web-worker-service-worker 브라우저는 자바스크립트를 실행하기 위해서 싱글 스레드를 사용하므로 거대한 자바스크립트 코드를 돌리면 메인 스레드가 block 되고 사용자 경험이 악화될 것이다. 앱에서 다중 스레딩 모델을 사용하는 것 처럼, 웹에서는 Worker를 사용해서 백그라운드 스레드에서 스크립트를 실행할 수 있다. Web Worker와 Service Worker 공통점 추가 스레드에서 실행되므로 메인 스레드를 블록하지 않고 실행될 수 있다. Window나 Document 객체에 접근할 수 없어서 DOM과 직접적으로 interact 할 수 없고 browser API에 접근하는데 한정적이다. 차이점 서비스 워커는 fetch event와 같은 네트워크 요청을 탈취하거나 push event와 같은 Push API를 listen 할 수 있다.

👷♀️ 웹 노동자: Web Worker
프론트에서 백그라운드로 작업이 오래걸리는 일 수행하기 질문들 모든 브라우저가 웹워커를 지원하는가? (사파리는 웹워커를 지원하지 않는다) Reference https://darrengwon.tistory.com/1171 https://uzihoon.com/post/28180e60-5fa1-11ea-9955-97e3ce156fe1 https://slee2540.tistory.com/48 https://pks2974.medium.com/web-worker-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-4ec90055aa4d https://yceffort.kr/2020/10/service-worker-of-create-react-app KEY WORDS 서비스 워커 리액트 워커 웹 워커 워커워커워커 Web Worker 자바스크립트 초기에 매우 간단한 역할