목록2026/07/03 (3)

보급형 개발자의 웹개발 노트

프론트엔드 빌드 툴 webpack 부터 vite 까지

📦 Webpack vs ⚡ Vite: 웹팩은 왜 필요했고, 비트는 왜 나왔을까? (초보자 완벽 가이드)안녕하세요! 프론트엔드 개발에 입문하면 가장 먼저 마주치게 되는 장벽 중 하나가 바로 **‘빌드 도구(Build Tool)’**와 **‘번들러(Bundler)’**라는 개념입니다."그냥 HTML, CSS, JS 파일만 만들어서 브라우저에 띄우면 되는 것 아닌가요?" 라고 생각하셨다면 주목해 주세요! 대세 빌드 도구인 **웹팩(Webpack)**과 **비트(Vite)**가 왜 세상에 나왔는지, 그리고 나에게 맞는 도구는 무엇인지 아주 쉽게 풀어 정리해 드립니다. 😉 https://youtu.be/Q7ToVF3UNJY?si=BFcwKhocllLEVF3h 1. 📦 Webpack은 왜 필요했을까? (라떼의..
바이브코딩 2026. 7. 3. 19:59
디지털 집 짓기 바이브코딩 해설

AI툴이 발달하면서 정말 "딸깍" 하면 "뚝딱" 하고 웹사이트 하나가 만들어지는 세상이 됐습니다.HTML을 몰라도 CSS를 몰라도 AI와 대화하듯 이것 만들어줘, 저것 만들어줘 하기만 하면 됩니다. 디자인도 최근에 나온 구글의 스티치를 이용하면 초안을 잡는데 아주 쉽고, 이것을 피그마로 가져가면 보다 더 정밀하게 디자인할 수도 있습니다. (물론 스티치에서 만든 디자인만으로도 웹사이트 만드는데 문제가 없습니다.) 혹시 내가 원하는 웹디자인이 있다면 핀터레스트 같은 곳이나 실제 웹사이트를 캡처해 던져주기만 해도 비슷한 스타일의 디자인을 만들어줍니다. 그렇게 만든 웹사이트를 다른 사람들에게 보여주려면 "배포" 라는 것을 해야합니다.흔히 깃허브에 올려놓으면 "Page"라는 기능을 통해 외부에 공개가 가능합니다...
바이브코딩 2026. 7. 3. 19:22
AI 만능 어댑터 MCP의 이해

AI 시대가 오면서 다양한 용어들이 나오는데 그 중 AI를 위한 USB-C라고 하는 MCP에 대해 알아보겠습니다. https://youtu.be/ukWiwYWODFI?si=UXyCDnQ-o4G9Mf1Y#1 기초학습 https://youtu.be/7T9JSCkVGYI?si=l0o7sWhtZ5elxP-S #2 심화학습 **MCP(Model Context Protocol)**는 고립되어 있던 AI 모델(LLM)이 외부 데이터나 도구와 소통할 수 있도록 연결해 주는 표준화된 개방형 통신 규약입니다. 초보자들도 이해하기 쉽도록 흔히 'AI 세계의 만능 어댑터' 또는 **'AI를 위한 USB-C'**라고 불립니다.과거에는 AI 애플리케이션이 특정 데이터베이스나 로컬 파일에 접근하려면 각각 맞춤형 연결 코드를 ..
바이브코딩 2026. 7. 3. 18:31
이전 Prev 1 Next 다음