[멋쟁이 사자처럼 프론트엔드 스쿨] 43일차 TIL - Vite, 개발자 서버/클라이언트 서버, 정적/동적 자산 관리, DocumentFragment

🍰 오늘은 새로운 진도. 이제 JS 진도가 수요일에 끝난다. 

🍴 Vite

: 빠르고 효율적인 프론트엔드 개발을 위한 혁신적인 도구

• 빠른 서버 시작
• HMR

HMR

: Hot Module Replacement

• 개발자가 코드를 변경할 때마다 전체 페이지를 새로 고쳐야 하는 번거로움 없이 실시간으로 코드 변경 사항 반영하는 기능
• 수정된 코드만 다시 로드하여 애플리케이션을 업데이트하기 때문에 개발 속도 크게 향상시킴

개발자 서버 vs 클라이언트 서버

• 개발자 서버 - 웹 개발자가 로컬 환경에서 웹 애플리케이션을 개발하고 테스트하는 데 사용하는 서버
• 클라이언트 서버 - 실제 웹 애플리케이션을 사용하는 사용자에게 서비스를 제공하는 서버

https://ko.vitejs.dev/guide/

Vite

 

🍴 정적 / 동적 자산 관리하기

정적 자산 - HTML, CSS, 이미지, 폰트 등 웹 애플리케이션의 기본적인 구성 요소

• 변경되지 않고 그대로 제공되는 파일
• 파일 시스템 기반 로딩: Vite는 파일 시스템에서 직접 정적 자산을 로드하여 번들링 과정을 생략함.

동적 자산 - API 요청을 통해 생성되거나 실시간으로 업데이트 되는 데이터와 같은 변경 가능한 콘텐츠.

• ESM(ES Modules) 지원: Vite는 기본적으로 ESM을 지원하여 최신 자바스크립트 기능 활용을 용이하게 함.
• ESM은 동적 자산 로딩 및 처리에 필요한 모듈 시스템 기능 제공함.
• HMR: Vite는 HMR을 통해 코드 변경 사항을 실시간으로 반영함.

 

🍴 DocumentFragment

: 웹 문서의 메인 DOM 트리에 포함되지 않는 가상 메모리에 존재하는 dom 노드 객체

• 임시 작업 공간 같은 역할
• 실제 문서에 반영되기 전에 여러 DOM 요소를 효율적으로 조작할 수 있도록 해줌
• DOM 조작 과정에서 발생하는 불필요한 리플로우, 리페인트를 줄여 페이지 렌더링 속도를 높임
• 기존 DOM 과는 별도로 존재
• DocumentFragment 노드를 DOM에 추가하면 자신은 제거되고 자신의 자식 노드만 DOM에 추가됨

const app = document.querySelector('#app');
const fragment = document.createDocumentFragment();
// createDocumentFragment() 메서드는 비어 있는 DocumentFragment 노드를 생성하여 반환

fragment.appendChild(h1);
fragment.appendChild(figure);

app.appendChild(fragment);