Rendering Mechanism | Vue.js 을 읽고 번역한 글입니다 Vue는 어떻게 template를 가져와 실제 DOM node로 변환할까? Vue는 어떻게 해당 Dom node들을 효율적으로 업데이트할까? ⇒ Vue의 내부 렌더링 메커니즘을 살펴봄으로써 이에 대한 답을 찾아보자 Virtual DOM 메모리에 존재하고, real DOM과 동기화되어있는 UI의 가상적인 표현 React에 의해 개척되었으며 Vue 등 다양한 프레임워크에서 채택하는 개념 표준적인 구현은 없음. 기술보다는 패턴에 가까움 예시 const vnode = { type: 'div', props: { id: 'hello' }, children: [ /* more vnodes */ ] } 런타임 렌더러는 virtual DOM t..

Problem 원티드 프리온보딩 1일차 과제를 포크해서 깃 클론하고 평소처럼 npm start를 커맨드에 딱 쳤는데 이런 에러메세지가 뜨면서 실행이 안되는 현상을 발견했다 이거 왜안되징... 하고 당황하다가 프로젝트 폴더를 자세히 보니 vite.config라는 파일이 보였다 vite가 번들링 툴이라는 것은 어디서 주워들어서 알고만 있었는데, 이게 그 vite를 쓴 프로젝트인가? 싶어서 vite에 대해서 찾아보게 되었다 Solve Package.json에 있는 이 명령어들이 vite 실행 명령어들이었다 npm run dev 하니까 이런게 뜨면서 잘 실행이 되었다 Vite랑 처음 만난 김에 Vite에 대해서 간단히 공부해보기로 했다 마침 코딩애플 교수님이 이미 유튜브에 Vite 영상을 올려놓으셔서 이 영상으..

Hyper-Text Transfer Protocol Secure HTTP와 TLS로 보안된 통신을 하는 프로토콜 목적: 1. 두 통신 당사자가 서로 신뢰할 수 있는지 확인 2. 통신 내용이 제 3자에게 도청되는 것을 방지 서로의 신원을 확인하고 통신 암호화에 사용할 세션 키를 공유하기 위한 Handshake 과정을 거침 1. ClientHello - 클라이언트가 먼저 서버에게 인사 random(32byte 난수 값), session ID, cipher suites (클라이언트에서 사용 가능한 암호화 알고리즘 목록), 사용 가능한 TLS version 등을 같이 보냄 2. ServerHello - 서버가 클라이언트에게 인사 random(32 byte 난수 값), session ID, 선택된 cipher s..

기존 파일 시스템: - 파일이 디스크에 기록될 때, 연속된 섹터로 할당됨 (Chunk) -> 외부 단편화를 유발함 - 파일의 길이가 생성과 동시에 정해지며, 늘어날 수 없음 - 루트 디렉토리에 모든 파일이 들어감. (디렉토리 계층구조가 없음) 핀토스 프로젝트 4에서 구현하는 파일 시스템 - 파일이 디스크에서 연속적으로 할당되는 것이 아니라, 빈 섹터들에 불연속적으로 할당하여 외부 단편화를 해결 -> 디스크에 분산되어있는 파일의 섹터들을 어떻게 이어줄까? -> FAT 이용 - 파일은 생성 시 길이가 0으로 정해지며, 쓰기를 시도할 때마다 길어짐 -> inode_write_at() 수정 - 계층적인 디렉토리 구조를 구현 : '/'을 기준으로 이름 컴포넌트를 구분 - Soft Link (Symbolic Lin..

1. Supplemental Page Table과 Lazy Loading Eager Loading은 가상 페이지가 할당됨과 동시에 물리 메모리에 올라가는 것. 당장 읽거나 쓸 일이 없는 페이지도 물리 메모리에 올라가버림. (플젝 3 이전의 핀토스) 물리 메모리 공간은 한정적이기 때문에, 당장 써야 할 페이지가 올라오려면, 누군가는 내려가야 함 = Swapping Swap in/Swap out은 오버헤드가 상당히 큼 (디스크에 읽기/쓰기를 시도하는 것이기 때문에) 따라서 우리의 핀토스는, 페이지가 진짜로 필요할 때에 물리 메모리로 올리는 지연 로딩, 즉 Lazy Loading을 채택했고, 이를 직접 구현하는 것이 플젝 3의 목표 레이지 로딩을 구현하기 위해서, 페이지 할당 요청이 오면, 일단 uninit ..

User Program의 실행 흐름