TwentyTwentyOne

Vue.js 완전 기초 시리즈 ⑨ – Pinia로 상태 관리하기 (Vuex는 이제 안녕👋)지난 편에서는 Vue Router로 페이지 이동을 구현했죠.이제 Vue 앱이 커지면 필연적으로 부딪히는 문제가 있습니다.“컴포넌트가 많아질수록, 서로 공유해야 하는 데이터가 복잡해진다.”로그인 정보, 장바구니, 유저 설정 등은 **모든 컴포넌트가 공유해야 하는 전역 상태(global state)**입니다.이걸 해결하기 위해 등장한 게 Vue의 공식 상태 관리 라이브러리 **Pinia(피니아)**예요.검색 트렌드에서도 "Vuex vs Pinia", "Pinia 예제", "Pinia persist"가 상위권을 차지할 만큼 — Vue 3를 공부하는 사람이라면 꼭 알아야 하는 핵심 주제입니다.1. 왜 Vuex 대신 Pin..

Vue.js 완전 기초 시리즈 ⑦ – Props와 Emit 심화지난 편에서 Vue 컴포넌트의 기본을 익혔습니다.이제 Vue 앱을 제대로 구조화하려면 부모 → 자식(props), 자식 → 부모(emit) 데이터 흐름을 더 깊게 이해해야 합니다. 검색 데이터에서도 "Vue props undefined", "emit 동작 안함" 같은 키워드가 상위에 오를 만큼 입문자들이 가장 많이 막히는 부분이기도 합니다.1. Props – 부모에서 자식으로 데이터 전달Props는 부모가 자식에게 데이터를 내려주는 유일한 공식적인 방법입니다.단순 문자열뿐만 아니라 숫자, 불리언, 배열, 객체까지 모두 전달할 수 있습니다. {{ title }} 좋아요: {{ likes }} 공개됨 {{ ta..

Vue.js 완전 기초 시리즈 ⑥ – 컴포넌트(Component) 기초Vue.js를 본격적으로 배우다 보면 꼭 마주치는 질문이 있습니다."한 파일에 계속 코드를 추가해도 되나?""버튼, 입력창, 리스트… 반복되는 UI는 어떻게 관리하지?"이때 등장하는 개념이 바로 **컴포넌트(Component)**입니다.검색 트렌드에서도 "Vue 컴포넌트 분리", "Vue props 전달 방법" 같은 키워드가 상위권을 차지할 만큼, Vue 학습자와 실무자 모두에게 핵심 주제예요.1. 컴포넌트란 무엇인가?컴포넌트는 UI를 쪼개서 독립적으로 관리할 수 있는 단위입니다.HTML 태그처럼 재사용할 수 있고, 부모-자식 관계로 데이터를 주고받을 수 있어요.비유하자면,레고 블록 하나하나가 컴포넌트블록들을 조립해서 완성하는 게 전체..

Vue.js 완전 기초 시리즈 ⑤ – 이벤트 처리와 계산된 속성 (methods, computed)지난 편에서 우리는 Vue의 핵심 기능인 데이터 바인딩과 반응형 시스템을 다뤘습니다. 이제 데이터를 단순히 표시하는 것을 넘어서 사용자의 행동(이벤트)을 처리하고, 상황에 맞게 계산된 값(computed)을 표시하는 방법을 배워야 합니다.검색 트렌드 상에서도 "Vue 버튼 클릭 이벤트", "Vue computed vs methods" 같은 키워드가 자주 등장하는데, 이건 그만큼 실무와 학습에서 많이 쓰이는 부분이라는 뜻이에요.1. 이벤트 처리 – @click, @inputVue는 HTML 태그에 @이벤트명 문법으로 이벤트를 바인딩할 수 있습니다. +1 -1 현재 값: {{ count }}..

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년에..