Mong dev blog

0. 들어가며: 왜 파일을 그냥 올리면 안 될까?프로젝트를 시작하면 우리는 자연스럽게 webpack이나 vite 같은 빌드 도구를 설정한다.너무 당연하게 쓰다 보니, 막상 누군가 근본적인 질문을 던지면 대답이 애매해질 때가 있다.“왜 파일을 그냥 올리면 안 되고, webpack을 써서 ‘번들링’을 거쳐야 하나요?”이번 시간에는 webpack의 수 많은 기능 중에서도 ‘번들링(Bundling)’을 코드와 함께 살펴보겠다.이 글을 읽고나서 webpack의 번들링이 “왜 필요하고” → “내부에서 어떻게 작동하며” → “번들링 결과물의 형태를 이해”할 수 있을 것이다.💡 핵심 요약1. webpack은 브라우저가 모르는 모듈 시스템(import/require)을 이해시켜준다.2. webpack은 의존성 그래프를..

1. 들어가며… 얼마 전에 컨텐츠를 접었다 펼칠 수 있는 UI가 필요해, 아코디언(accordion) 컴포넌트를 만들었다. 이때 라이브러리의 아코디언을 참고했는데, 공통으로 제공하는 기능이지만 구현 방식이 조금씩 다른 걸 볼 수 있었다. 그래서 이번 시간에는 구현 시 참고했던 라이브러리들의 구조를 조금 더 살펴보는 시간을 가져보겠다. 2. 라이브러리별 아코디언 구조 맛보기 📌 라이브러리의 아코디언은 어떤 구조를 가질까? 여러 UI 라이브러리 중 MaterialUI, NextUI, Vuetify의 아코디언 구조를 확인해보았다. 1) 아코디언이 뭘까? 아코디언은 사용자가 필요한 정보를 보거나 숨길 수 있는 UI이다. 주로 Q&A나 FAQ와 같이 많은 정보를 효율적으로 표시할 필요가 있는 곳에서 사용된다. 아..