본문 바로가기

Development/Web5

패키지 개발 시 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.
PUB/SUB 구조와 Redis, Kafka를 이해하기 위한 과정 PUB/SUB 구조 pubsub을 어렵게 받아들일 필요가 없다는 것을 이해하고 글을 써본다. PUB/SUB의 구조는 유튜브 생태계로 이해해보자. 우리 곁에서 가장 쉽게 Publisher와 Subscriber의 관계를 볼 수 있는 곳은 바로 유튜브이다. 그럼 유튜브의 생태계에 빗대어 보자. Publisher는 유튜버, Channel은 유튜브 채널, Event는 유튜브 영상, Subscriber는 구독자라고 생각하면 이해하기 쉽다. 유튜버(=Publisher)는 자신의 유튜브 채널(=Channel)에 유튜브 영상(=Event)을 생성 및 업로드한다. 여기서 유튜브 영상을 하나의 이벤트(메세지)라고 이해할 수 있다. 특정 Channel을 구독하고 있는 구독자(=Subscriber)는 Channel에 올라온 유.. 2023. 10. 16.
[Browser] LocalStorage와 SessionStorage의 차이 [Browser] LocalStorage와 SessionStorage의 차이브라우저의 로컬 스토리지와 세션 스토리지에 대한 정리를 시작해보자.프론트든, 백이든 필히 질문가능한 개념이다. 바로 내가 받았던 질문이었기 때문이다. "혹시 LocalStorage와 SessionStorage의 차이를 아시나요?" 먼저, 차이를 알고자한다면 이들의 공통점이 있다는 얘기이다.LocalStorage(로컬 스토리지)와 SessionStorage(세션 스토리지)의 공통점은 웹 브라우저에 데이터를 저장하는데 사용하는 객체이다.이 둘의 차이점은 LocalStorage(persistent)와 SessionStorage(temporary) 이다. LocalStorage(로컬 스토리지)은 사용자 데이터 유지 가능하고, 탭 공유도 .. 2023. 7. 10.
웹 통신의 큰 흐름(브라우저, 프로토콜 스택, LAN 어댑터, 허브, 스위치, 라우터, 방화벽, 캐시 서버, 웹 서버) 웹 브라우저에 google.com을 입력했을 때 어떤 일이 일어날까? in 브라우저 1. 주소창에 입력된 URL 파싱 2. HTTP request 메시지 생성 3. 웹 서버에 HTTP request 메시지를 전송 이 때 만들어진 메시지 전송은 브라우저가 직접하는 것이 아니다. 브라우저는 메시지를 네트워크에 송출하는 기능이 없으므로 OS에 의뢰하여 메시지를 전달한다. 우리가 택배를 보낼 때 직접 보내는게 아니라, 이미 서비스가 이루어지고 있는 택배 시스템(택배 회사)을 이용하여 보내는 것과 같은 이치이다. 단, OS에 송신을 의뢰할 때는 도메인명이 아니라 IP주소로 메시지를 받을 상대를 지정해야 하는데, 이 과정에 DNS 서버를 조회해야 한다. - 네트워크에 HTTP 요청을 보내는 것은 네트워크를 담당하는.. 2023. 1. 9.

티스토리툴바