Node 메커니즘
Node.js란
자바스크립트 런타임 환경, 비동기 이벤트 기반(async/non blocking event driven)
기본 싱글 스레드라서 스레드간 동기화 문제 회피 가능
Node.js의 이벤트 루프
Node.js는 C++ 런타임 기반(V8 엔진)
libuv라는 비동기 I/O 라이브러리를 사용
커널에 요청한 작업의 응답이 처리되면 libuv가 받아서 Node.js로 전달
스레드풀에 요청한 작업이 처리되면(비동기 아님) libuv가 받아서 Node.js로 전달
→ 커널이 지원하는 비동기 작업은 비동기 처리, 안되는 것은 스레드풀에서 처리
이벤트 루프는 비동기 작업을 관리하는 구현체
Node.js에 요청이 들어오면 이벤트루프가 받아서 Blocking I/O인지 확인
비동기 I/O라면 커널에 요청하고 처리되면 이벤트 큐에 callback 등록
Blocking I/O면 스레드풀의 워커에게 요청해서 동기 처리하여 처리되면 이벤트 큐에 callback 등록
이벤트루프는 이벤트 큐에 callback이 있는지 주기적으로 체크해서 Node.js 메인 스레드에서 실행되도록 처리
이벤트 루프 내부
Tick
Timer → Pending → Idle, Prepare → Poll → Check → Close Callbacks → Timer 의 각 Phase 과정을 Tick이라 함
각각의 Phase는 큐를 갖고 있음
이벤트 루프는 싱글스레드라서 Tick의 순서대로 한번씩 돌아서 큐에 쌓여있는 작업을 처리
실행 한도가 있어서 무한히 한 Phase에 쌓인 작업만 처리하진 않음
Timer
setTimeout, setInterval 같은 함수 처리
min-heap을 이용해서 타이머 관리
setTimeout(fn, 1000)이면 1초 후 실행이 아니고 1초 전 실행안함
Pending Callbacks
이전 Tick에서 실행한도초과로 처리되지 않은 작업들을 처리
Idle, Prepare
Node.js 내부 관리용
Poll
I/O에 관련된 대부분의 콜백이 처리됨(DB, HTTP, File read 후 등등)
watcher_queue가 존재
FD에 메타데이터를 가진 watcher가 FD가 준비됨을 알리면 이벤트루프가 해당 watcher를 찾아서 먼저 처리
다음 Phase로 바로 넘어가지 않고 정해진 timeout까지 기다리다가 넘어간다.
Check
setImmediate의 콜백만 처리
process.nextTick은 즉시 처리, setImmediate 는 다음 Tick에서 처리
Close
종료될 이벤트들의 close 이벤트를 처리
nextTickQueue, MicroTaskQueue
이벤트루프와 별개로 Node.js 내부에 구현
Tick내의 시스템 실행 한도에 영향을 안받고 큐가 비워질때까지 무한히 처리함
nextTickQueue 가 MicroTaskQueue보다 먼저 실행됨
Node 11 이전
한 페이즈에서 다음 페이즈로 넘어갈때 nextTickQueue, MicroTaskQueue 모두 검사
Node 11 부터
현재 실행 작업이 끝나면 바로 다음 작업 실행
setTimeout(() => {
console.log(1)
process.nextTick(() => {
console.log(3)
})
Promise.resolve().then(() => console.log(4))
}, 0)
setTimeout(() => {
console.log(2)
}, 0)Node 11 이전
Timer 에서 console.log(1) 실행 → nextTick, Promise.resolve를 nextTickQueue, microTaskQueue에 등록 → Timer에서 console.log(2) 실행 → Timer 가 종료되고 다음 페이즈로 넘김 → Pending Callbacks 가기 전에 nextTickQueue, MicroTaskQueue 확인해서 console.log(3), console.log(4) 실행 → Pending Callback으로 이동
Node 11 부터
Timer 에서 console.log(1) 실행 → nextTick, Promise.resolve를 nextTickQueue, microTaskQueue에 등록 → 다음 Timer 큐 확인 전에 nextTick, Promise.resolve를 확인해서 console.log(3), console.log(4) 실행 → Timer 큐에서 다음 console.log(2) 실행
Node.js의 실행 순서
코드 실행 전 이벤트 루프 생성 → 실행 코드 내에 이벤트루프에 해당되는것은 이벤트루프에 추가, 해당되지 않는 코드를 처음부터 끝까지 실행 → 이벤트루프를 확인해서 할 작업이 있으면 진입 → 이벤트루프 내 Tick을 돌면서 실행 가능한 작업 수행 → 더이상 할 일이 없으면 Excit callbacks 호출 후 종료
Vue 메커니즘
선언적 렌더링
HTML을 템플릿 문법으로 확장해서 State 기반으로 화면에 출력되는 HTML을 변경
반응성
Javascript State를 추적해서 변경 사항을 DOM에 업데이트
DOM(Document Object Model): HTML의 객체기반 표현 방식, 노드트리로 표현한 것(ex/ document.getElementById 등)
HTML
head
title
제목텍스트
body
h1
헤더1텍스트
p
문장 텍스트
프로그레시브 프레임워크
점진적, 다양한 방법으로 구현 가능
빌드 없는 정적 HTML > 모든 페이지의 웹 컴포넌트 > SPA > SSR, SSG > 데스크탑, 모바일, 터미널 등 앱
SPA
라우터 지원, 빌드 툴 지원, IDE 지원, 테스트 지원 등
풀스택 / SSR
nuxt.js 활용
SEO(검색엔진 최적화) 유리함, 크롤러가 긁어갈때 HTML 데이터가 많기 때문
서버에서 요청할때 HTML 생성
잼스택 / SSG
미리 HTML 만들어놓음
웹 이외의 앱
Electron, Ionic 등
SFC(Single File Component)
Javascript, HTML, CSS를 한 파일로 캡슐화
<script> ~~ </script>
<template> ~~ </template>
<style> ~~ </style>
라이프사이클
setup
beforeCreate, created 와 동일 기능
setup 내에서는 mount → onMount, beforeMount → onBeforeMount 처럼 on을 붙여서 사용
beforeCreate
인스턴스가 초기화 된 후 호출
props, data, computed 상태값 설정됨
created
beforeCreate 가 끝나고 호출
beforeMount
마운트 직전 호출
mount
컴포넌트들을 통해 DOM 생성되고 나서 호출
beforeUpdate
반응형 데이터들이 변경될때 DOM 업데이트 직전 호출됨
updated
반응형 데이터들이 변경되고나서 호출
beforeUnmount
인스턴스가 해제되어 생성된 DOM이 사라지기 전 호출
unmounted
언마운트되어 DOM이 사라지면 호출
기타
activated
KeepAlive로 캐시된 컴포넌트 인스턴스의 DOM이 삽입될때 호출
deactivated
KeepAlive로 캐시된 컴포넌트가 삭제될때 호출
vue-demi
vue2, 3에서 모두 동작하는 라이브러리
vue의 lifecycle, watcher나 재사용 변수 등 활용 가능
pinia
Store 라이브러리, component와 페이지간 상태 공유
Composition API를 사용하지 않음
VUE 환경설정
vue.config.js
webpack 설정
프로젝트 내에 있는 vue 관련 모듈들(ts, js, png, jpg, sass, css, …)의 관계를 정적 파일로 변환시켜줌
코드 내 경로 alias 지정
플러그인 설정
TerserPlugin
빌드 결과 사이즈 축소
product 빌드에만 적용
console 제거, comment 제거, 공백제거 및 코드압축, 난독화
BundleAnalyzerPlugin
빌드된 파일 구조, 용량 확인
ContextReplacementPlugin
moment.js를 사용할때 필요한 locale 정보는 ko, en, jp 뿐인데 모든 locale을 빌드하는 것을 방지
JEST
