의존성 역전 원칙(DIP) 의존성이란 특정한 모듈이 동작하기 위해서 다른 모듈을 필요로 하는 것을 의미한다. 의존성 역전 원칙은 유연성이 극대화된 시스템을 만들기 위한 원칙이다. 이 말은 곧 소스 코드 의존성이 추상에 의존하며 구체에는 의존하지 않는 것을 의미한다. 여기서 추상과 구체라는 말이 나오는데, 추상이란 구체적인 구현 방법이 포함되어 있지 않은 형태를 의미한다. 추상이란 말이 어려울 수 있지만, 결국 그 내부가 어떻게 구현되어있는지 신경 쓰지 않고 해줘야 하는 일과 결과만 신경 쓸 수 있게 된다는 말이다. 구체는 반대로 실질적으로 해당 동작을 하기 위해서 수행해야 하는 구체적인 일련의 동작과 흐름을 의미한다. 이런 구체적인 동작들은 빈번하게 변경될 여지가 많다. 따라서 이러한 구체에 애플리케이션..

Vite 란? 비트(Vite)는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"를 의미하며 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 현재 Vue, React, Svelte 등의 주요 프론트엔드 라이브러리, 프레임워크 커뮤니티에서 주목하고 있다. Vite는 네이티브 자바스크립트 모듈(ES Module)을 기반으로 한 데브 서버이다. 이미 현대 프론트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있다. 그리고 비트는 웹팩보다 훨씬 더 빠르게 개발하고 배포할 수 있다. 왜 빠른지 이해하기 위해서는 먼저 번들링과 네이티브 자바스크립트 모듈을 이해해야 한다. 웹팩(Webpack)과 같은 모듈 번들러가 ..

웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다. 웹팩을 사용하는 이유 웹 사이트를 개발하면 HTML, CSS, 스크립트, 이미지 파일 등 많은 리소스 파일이 생겨나 로딩할 때 많은 파일이 다운로드되므로 서버 접속이 많아져 웹 페이지 로딩 속도가 느려진다. 웹 사이트가 빠르게 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어난다. 그래서 웹 사이트의 로딩 속도를 높이기 위한 대표적인 방법으로 클라이언트에서 서버로 요청하는 파일들을 압축하고 병합하는 방법을 찾..