| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
- CRUD w ReactQuery
- 멀티프로세스
- Spa
- 회고
- CS
- 멀티스레드
- teave
- TypeScript
- wanted-preonboarding-course
- error
- refactoring
- 짝선배 짝후배 매칭 웹 개발 회고
- Today
- Total
깊고 넓은 삽질
면접회고 | js의 멀티스레드, 멀티 프로세스 / SPA *작성중* 본문
면접회고 | 멀티스레드, 멀티프로세스, SPA
운 좋게 면접을 볼 기회가 있었다. 기술면접을 보고 바로 인성면접을 봤다. 4시에 면접이 시작됐는데 체감상 각각 15분씩 30분정도 걸린 것 같았다. 끝나고 나와서 시계를 보니 6시였다.
멀티 스레드와 멀티 프로세스
질문이 가물가물한데 맥락은 이러했다. 자바스크립트로 개발 시 멀티 스레드와 멀티 프로세스를 이용한 구현의 비교를 물어보셨다. 내가 알고있는 건 프로세스는 실행되고있는 프로그램이고, 스레드는 프로세스 안에서 실행되는 것 정도였다. 프론트엔드 분야에서 내가 알고있는 프로세스와 스레드는 "자바스크립트는 싱글 스레드 언어,, "로 시작되는 이벤트루프, 테스크큐, 콜스텍과 실행컨텍스트에 대한 설명 뿐이었다. 자바스크립트 멀티스레드, 멀티프로세스라는 키워드로 검색해보니 worker라는 개념을 찾을 수 있었다.
웹 워커? Node.js의 스레드풀과 멀티 프로세스?
Simply stated, workers are scripts that run in a separate thread than the main browser thread.
워커는 메인 브라우저 스레드로부터 분리되어 실행되는 스크립트라고 한다. 싱글스레드만을 지원하는 js를 더 효율적으로 사용하기 위해
js에서 쓰이는 워커는 또 여러가지로 나눌 수 있었다.
web worker / service worker / worklets
web worker
- 웹 워커는 메인스레드의 무거운 load를 덜어줄 좋은 도구로 오래 전부터 쓰여 온 기술이다. 그러나 어떤 상황에서든 load를 쉽게 나눌 구체적인 유즈케이스는 없다
// app.js
const webWorker = new Worker('worker.js');
webWorker.postMessage('hello');
webWorker.onmessage = e => console.log(e.data);
// worker.js
self.onmessage = e => { // what is self ???
console.log(e.data);
self.postMessage(workerResult); // what is workerResult ???
}
- self : 워커에서 컨텍스트에 따라 달라지는 전역 객체를 가리키기 위한 변수
- 워커는 DOM을 직접 조작할 수 없음. 이외에도 몇 가지 사용여부가 갈림(MDN link)
- 메인 스레드와 워커와의 통신은 메시지 시스템을 사용
- 양측 모두 postMessage() 메서드를 사용해 메시지를 전송, 전송된 메시지는 data속성에 포함
- onmessage 이벤트 처리기로 메시지 수신
- 전송하는 메시지는 복사만 할 뿐 공유하지 않음
Service Worker
- 웹 워커와 달리 서비스 워커는 네트워크와 브라우저 혹은 캐시 사이의 프록시가 되는 역할을 가진다.
// main.js
navigator.serviceWorker.resgister('//d2btv6z6utd61g.cloudfront.net/service-worker.js');
SPA는 페이지 전환 시 흰 색 화면이 잠깐 보이는 걸 방지하기 위함?
이커머스 제작 프로젝트에서 Next.js를 사용한 이유를 질문 받았다. SPA로 만들 수 있으면서 SEO에 유리한 프레임워크라서 Next.js를 선택했다고 대답했다. SPA를 사용하는게 너무 당연한듯이 말해서 면접관님이 의아해하시며 다시 물어보셨다. 왜 SPA가 더 좋다고 생각하는지 질문하셨는데, 페이지 전환 시 흰색 화면이 깜빡이는게 사용자 경험 측면에서 좋지 않다 정도로 대답했던 것 같다. 말하면서도 너무 사소한 이유인 것 같았다.
SPA 장/단
- 최초 접속 이후 브라우저가 캐싱을 통해 빠른 서비스 제공 가능 <-> 최초 접속 시 필요한 js파일 및 리소스 파일이 많음
- 유연한 데이터 송수신 가능 <-> 데이터에 대한 메모리 관리를 브라우저의 가비지 컬렉터에 전적으로 의존
개발하는 서비스에 맞는 적절한 아키텍쳐 구성이 중요
* 작성중 *
https://it-techtree.tistory.com/entry/nodejs-processing-http-request-in-parallel
