TwentyTwentyOne

Vue.js 완전 기초 시리즈 ④ – 데이터 바인딩과 반응형 시스템프론트엔드 입문자들이 Vue.js를 배우며 가장 먼저 마주하는 핵심은 **데이터 바인딩(Data Binding)**입니다. 사실 이 부분을 이해하지 못하면 Vue가 왜 “배우기 쉽다”는 평가를 받는지 체감하기 힘들어요. 이번 글에서는 Vue의 반응형(Reactivity) 시스템과 함께, 실제로 어떻게 데이터가 화면과 연결되는지 풀어보겠습니다.1. 데이터와 화면이 연결된다는 것보통 바닐라 자바스크립트로 화면을 업데이트하려면 document.querySelector()로 DOM 요소를 찾고, innerText를 바꿔야 합니다. 그런데 Vue는 그 과정을 자동화해줍니다. {{ message }}👉 message 변수가 바뀌면 자동으로 화면이..

Vue.js 완전 기초 시리즈 ③ – Vue 프로젝트 구조와 기본 문법지난 글에서 Vite로 Vue 개발 환경을 세팅했죠. 이제 본격적으로 프로젝트 안을 열어볼 차례입니다.처음 npm create vite@latest로 프로젝트를 만들고 npm run dev까지 성공했다면, 프로젝트 안에 여러 파일들이 생성되어 있을 거예요. 아마 이런 구조일 겁니다.1. Vite + Vue 프로젝트 기본 구조my-vue-app/├─ index.html├─ package.json├─ vite.config.js├─ node_modules/└─ src/ ├─ main.js ├─ App.vue └─ assets/주요 파일 설명index.html우리가 보는 최상위 HTML. Vue 앱이 여기 안에 삽입됩니다.src/m..

Vue.js 완전 기초 시리즈 ② – 개발 환경 세팅하기 (CDN, Vite, Vue CLI)지난 글에서는 Vue.js가 왜 좋은지, 어떤 철학을 가지고 있는지 이야기했죠.오늘은 드디어 실습할 준비를 해봅시다.Vue.js는 배우기 쉽게 세 가지 방식으로 시작할 수 있습니다.CDN 방식 – HTML에 한 줄 추가Vite 방식 – 최신 표준 기반, 가볍고 빠른 개발 환경Vue CLI 방식 – 예전부터 많이 쓰인 전통적인 프로젝트 템플릿 생성기각각의 차이와 언제 쓰면 좋은지 비교해드릴게요.1. CDN 방식 – 가장 빠른 Hello Vue!Vue.js를 배우기 시작할 때 가장 부담 없는 방법이에요. 그냥 HTML 파일에 Vue CDN을 붙이면 끝납니다. {{ message }} const { cre..

Vue.js 완전 기초 시리즈 ① – Vue는 왜 배우는가?프론트엔드 공부를 처음 시작했을 때, 저는 "React가 대세라는데 그거부터 해야지!" 하고 달려들었어요. 그런데 막상 React를 붙잡고 있으면 문법도 낯설고, 설정도 복잡하고, "내가 이걸로 서비스까지 만들 수 있을까?" 싶은 생각이 들더라고요. 그러다가 Vue.js를 접했는데, 솔직히 처음에는 그냥 비슷한 프레임워크겠지 싶었습니다. 하지만 며칠 써보니… **와, 이거 입문자한테 훨씬 친절하다!**라는 느낌이 확 왔어요.이 시리즈는 그런 제 경험을 바탕으로 Vue.js를 전혀 모르는 사람을 위한 가이드입니다. 이 글만 따라가도 Vue를 처음부터 서비스 배포까지 경험할 수 있도록 쭉 안내할 거예요.Vue.js는 뭐길래?Vue.js는 2014년에..