jopemachine. dev blog

개발 관련 개인적인 일상, 후기, 생각, 스터디, 문서 번역 등 각종 포스팅을 정리하고 공부하고, 공유합니다.

cluster vs worker_thread vs child_process

Node.js

Cluster vs Worker_thread cluster 멀티프로세싱. 서버 포트를 공유하는 Node 프로세스를 여러 개 두어 요청이 많이 들어올 때 병렬로 요청이 분산되게 할 수 있다. 직접 구현해도 되지만 pm2 쓴다. 스케줄링은 OS에 맡길 수도 있고 Round robin ...

Posted by jopemachine on October 7, 2021

실행 컨텍스트 (Execution context)

자바스크립트 세부사항 스터디

실행 컨텍스트 (Execution context) 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념. 실행 가능한 코드가 되기 위해 필요한 컨텍스트 변수 스코프, this 바인딩 등 스택 프레임의 정보들. 스코프를 생성할 때 생성된다. 즉, 익명함수 (IIFE) 실행, eval,...

Posted by jopemachine on October 7, 2021

이벤트 루프에 관해 (Event loop)

자바스크립트 세부사항 스터디

이벤트 루프에 관해 (Event loop) 싱글 스레드로 도는 자바스크립트가 비동기 함수를 핸들링 하기 위한 동시성 모델 (디자인 패턴) 브라우저, Node 환경에서 각각 이벤트 루프가 존재해 비동기 작업을 처리한다. 콜스택이 빌 때 마다 태스크 큐에서 대기하던 콜백함수가 콜스택으로 넘어와 (tick...

Posted by jopemachine on October 7, 2021

ESM vs CJS (commonjs)

자바스크립트 세부사항 스터디

ESM vs commonjs Common Javascript (CJS) CJS는 동기적으로 모듈을 import 하는 require 구문을 사용한다. CJS는 top level await 구문 때문에 ESM 모듈을 require 할 수 없다. CJS에서 ESM 모듈을 사용하려면 dynamic impo...

Posted by jopemachine on October 7, 2021

canvas 엘리먼트 vs SVG

HTML 세부사항

canvas vs svg svg 확장 가능한 XML 기반의 벡터 이미지. DOM 사양의 일부로 각 개체별로 HTML에 추가된다. 크기가 커져도 벡터 이미지이므로 성능에 영향 없지만, 모양이 복잡하고 개체 수가 많아질수록 성능이 저하된다. canvas 비트맵 기반의 그래픽. ...

Posted by jopemachine on October 7, 2021

Data 속성에 관해

HTML 세부사항

Data 속성에 관해 프론트 코딩할 때 숨겨둔 HTML 엘리먼트에 데이터를 저장하는 건 너무… 구리다. 그래서 특정 data를 DOM에 저장할 수 있는 방법을 제공한다. data- 뒤에 붙는 문자는 자유다. data-code, data-value 등 원하는대로 붙여 사용할 수 있다. ...

Posted by jopemachine on October 7, 2021

Layout shift

Frontend 최적화

Layout shift 화면 요소들의 크기, 위치가 (이미지, 웹 폰트, iframe, 광고 등 동적으로 로딩되는 콘텐츠들) 로딩 상태에 따라 변하면서 발생한다. 콘텐츠가 불안정해 사용자가 클릭하려 했을 때 화면 요소 위치가 변경되는 등 사용자 경험을 저해함. Chrome devtool의 perfor...

Posted by jopemachine on October 7, 2021

Inlining, Spriting, Concatenating

Frontend 최적화

Inlining 외부 리소스를 불러오는 데 필요한 추가 연결을 줄이기 위해 자바스크립트, 이미지, 웹 폰트, css 등의 리소스를 inline으로 html 페이지 안에 포함 시키는 것. 장점 화면의 소규모 자원을 인라이닝 하면 성능 이득이 있다. 성능이 좋지 않은 디바이스에선 요청에 드는 오버헤드가 캐싱으로...

Posted by jopemachine on October 7, 2021

Virtual DOM

Frontend

Virtual DOM 메모리 상에 올라가 있는 UI의 가상적인 표현. 즉, virtual DOM의 변경만으론 Reflow를 일으키지 않음. DOM에 줘야 하는 변화들을 묶어서 적용해 강제 동기 레이아웃을 일으키지 않게 해 주기 위한 일종의 자동화, 추상화된 DOM 트리. 직접 DOM 조작을 묶어서 해...

Posted by jopemachine on October 7, 2021

프론트 개발 환경 구성 (Development environment)

프론트 각종 문제 상황 해결

프론트 개발 환경 구성 (Development environment) Babel ES6를 지원하지 않는 브라우저를 지원하기 위한 트랜스 컴파일러 Promise 같이 존재하지 않는 객체 같은 경우 폴리필 (polyfill)을 만들어 대체한다. 웹팩과 같이 사용되어 빌드 과정에서 자동으로 수행됨 ...

Posted by jopemachine on October 7, 2021

FEATURED TAGS
Git Frontend Javascript Translation Typescript Browser Frontend Optimization Linux Programming React Redux HTML CSS Web Programming Backend Flux Http Node OSSCA Review Security
ABOUT ME

다양한 CS 분야에 관심을 갖고 공부하는 주니어 개발자입니다.