VITE3 패키지 개발 시 CSS 번들링 적용 방법: vite와 exports field를 곁들인 들어가면서 React 기반 컴포넌트를 개발하고, Vite를 이용한 번들링하는 환경에서 별도의 패키지를 만들었다. 이 글에서는 TodoList 컴포넌트 패키지를 예시로 들어 설명한다. 하나의 패키지에서 개발된 컴포넌트처럼 해당 패키지가 다음과 같이 사용할 수 있도록 구성하는 것이 목표였다.import { Todolist } from "@test/todolist" 그러나 기대했던 바와 달리, 해당 컴포넌트를 import한 부분에서 CSS가 제대로 적용되지 않았다. dist 폴더를 확인해보았을 때, index.css가 정상적으로 빌드되어 있었고패키지를 별도로 실행했을 때, 네트워크 탭에서 index.css가 로드되고 제대로 CSS가 적용되는 것도 확인할 수 있었다. 이를 해결하기 위한 실험해 본 여러가지 .. 2025. 3. 11. [Vite] Vite는 어떤 역할을 하고 있는가 [Vite] Vite는 어떤 역할을 하고 있는가Vite를 사용하면서 잘 알지 못하고 사용하는 것 같아 한 번 정리하고자 글을 작성한다.공식 홈페이지에 따르면 ‘Next Generation Frontend Tooling’ 이라고 소개한다.Vite는 웹 개발에서 개발 서버와 번들링을 모두 처리하는 현대적인 빌드 도구로 설계되었다. Vite의 기능 1 : 개발 서버 & HMR(Hot Module Replacement)프론트엔드 개발자로서 Vite의 가장 체감되는 기능은 단연코 개발 서버 지원 및 HMR 이다. Vite의 핵심적인 기능인 "개발 서버"의 서버 시작 시간을 어떻게 개선했는지에 대한 공식 문서의 설명을 정리해보았다. Vite는 애플리케이션의 모듈을 Dependencies와 Source code 두 .. 2024. 10. 27. [React] vite로 react 프로젝트 설치 vite로 react 프로젝트 설치(Upate 2024.10.27) [Vite] Vite는 어떤 역할을 하고 있는가[Vite] Vite는 어떤 역할을 하고 있는가Vite를 사용하면서 잘 알지 못하고 사용하는 것 같아 한 번 정리하고자 글을 작성한다.공식 홈페이지에 따르면 ‘Next Generation Frontend Tooling’ 이라고 소개한다.bo5mi.tistory.com 1. vite란?빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구이다. https://vitejs-kr.github.io/(기본적으로 vite는 Node.js가 설치 되어 있어야 한다. 노드 설치: https://nodejs.org/ko/download/) ViteVite, 차세대 프런트엔드 개발.. 2023. 4. 5. 이전 1 다음
