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..