코딩 일기장

🔅 Webpack이란? 모듈 번들링이라고 하는데, html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 합니다. 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 의미합니다. 왜 Webpack을 사용할까? SPA를 사용하면서 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함됩니다. 종속된 여러 자바스크립트 파일들을 하나로 묶음으로서 관리하기 편하다. 파일을 컴파일 할 때 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리기 때문에, 이를 해결하기 위해 여러 자바스크립트 파일을 하나의 파일로 번들링한다. 하나의 자바스크립트 파일로 만들기 때문에 웹페이지 성능 최적화를 해준다. 🔅Babel 이란? ES6+ 버전의 ..

동기와 비동기는 호출되는 함수의 작업 완료 여부를 신경쓰냐에 대한 개념이고, 블록킹과 논블록킹은 코드를 실행할 수 있는 권리인 제어권이 누구에게 있느냐에 대한 개념이다. 👉 동기와 비동기 호출되는 함수의 작업 완료 여부를 신경쓰냐가 최대 관심 여부! 함수 실행과 리턴이 순차적인 흐름을 따르느냐, 따르지 않느냐 동기 (Synchronous) 함수 A가 함수 B를 호출하고, B의 작업 완료 후 리턴을 기다리거나 B의 작업 완료 여부를 스스로 계속 확인하며 신경쓰면 Synchronous 비동기 (Asynchronous) 함수 A는 함수 B를 호출한 후로 B의 작업 완료 여부에는 신경쓰지 않는다. 함수 A가 함수 B를 호출할 때 콜백 함수를 함께 전달해서, 함수 B는 작업이 완료되면 콜백 함수를 실행한다. 👉 ..

태스크 큐는 콜백 함수들이 대기하는 큐(FIFO) 형태의 배열이라 할 수 있고, 이벤트 루프는 호출 스택이 비워질 때마다 태스크 큐에서 콜백 함수를 꺼내와서 실행하는 역할을 한다. 자바스크립트 싱글스레드 기반의 언어로 한 번에 하나의 작업만을 처리할 수 있다. 비동기로 동작하기 때문에 싱글스레드임에도 동시에 많은 작업을 처리할 수 있다. 하지만 비동기로 동작하는 핵심 요소는 자바스크립트가 아닌 브라우저가 가지고 있다. 자바스크립트 엔진이 단일 호출 스택을 사용하기는 하지만, 자바스크립트가 구동되는 환경(브라우저, Node.js등)에서는 주로 여러 개의 스레드가 사용되며, 이러한 구동 환경이 단일 호출 스택을 사용하는 자바스크립트 엔진과 상호 연동하기위해 사용하는 장치가 바로 이벤트 루프이다. 메모리 힙 ..

운영체제 입장에서 작업의 최소 단위는 프로세스이고, CPU 입장에서 작업의 최소 단위는 Thread이다. 프로세스(Process)란 운영체제로부터 시스템 자원을 할당받는 작업의 단위 CPU 시간 운영되기 위해 필요한 주소 공간 Code, Data, Stack, Heap의 구조로 되어 있는 독립된 메모리 영역 한마디로 실행된 프로그램을 의미함 어떠한 작업을 위해 실행할 수 있는 파일 기본적으로 각 프로세스는 1개의 스레드를 가진다. 각 프로세스는 독립된 메모리 영역이므로 다른 프로세스의 변수나 자료 구조에 접근할 수 없다. 한 프로세스가 다른 프로세스의 자원에 접근하려면 IPC(Inter-Process-Communication)를 사용해야 한다. 스레드(Thread)란 프로세스 내에서 실행되는 흐름의 단위..

대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저 렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 대기열 브라우저는 주소창 입력에 대한 요청을 대기열에 넣습니다. 캐싱 요청된 값의 결과값을 저장하고, 그 값을 다시 요청하면 저장해 둔 값을 다시 제공하는 기술. 다시 불러오지 않아도 되므로 속도 개선 효과가 있음. 공유 프록시 캐싱 요청한 서버에서 프록시서버가 캐싱을 하는 것을 의미한다. ex) Node.js 서버의 경우 앞단의 프록시 서버로 nginx 서버를 둬서 이 서버를 캐싱 서버로 사용하는 경우 브라우저 캐시 쿠키, 로컬스토리지 등을 포함한 캐시이다. 브라우저 자체가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말한다. DNS 조회 ..