이 사이트(nutalk.co.kr)도 Vue 3로 만들었다. 사실 Vue를 처음 쓰기 전까지는 React만 쓰다가 작년에 프로젝트를 새로 시작하면서 Vue 3로 넘어왔다. 그때의 경험을 바탕으로 비개발자분들도 웹 서비스가 어떻게 돌아가는지 이해할 수 있게 정리해 보려 한다.
코딩을 전혀 모르는 분들도 이 글을 읽고 나면 웹 개발자와 대화할 때 훨씬 수월해질 것이다.
Vue 3, 대체 뭔가
Vue(뷰)는 사용자 인터페이스(UI)를 만드는 자바스크립트 프레임워크다. Vue 3는 2020년에 출시된 최신 버전이다.
React, Angular와 함께 3대 프론트엔드 프레임워크로 불리는데 Vue는 그 중에서 진입 장벽이 가장 낮다. 공식 문서가 매우 친절하게 작성되어 있어 독학으로도 충분히 배울 수 있다.
내가 React에서 Vue로 넘어온 이유는 단순하다. 코드가 더 직관적이고 설정이 덜 복잡하다. 프로젝트 하나를 띄우는 데 드는 시간이 체감상 절반 이하로 줄었다.
핵심 개념 — LEGO 블록 이해하기
Component (컴포넌트)
컴포넌트는 웹페이지의 부품이다. 네비게이션 바, 푸터, 글 카드가 각각 하나의 컴포넌트다. 이걸 조립해서 전체 페이지를 만든다. LEGO 블록과 같다.
한 번 만든 버튼 컴포넌트를 여러 페이지에서 재사용할 수 있다. 코드 중복이 줄어들고 수정이 필요할 때 한 곳만 바꾸면 모든 곳에 반영된다.
State (상태)와 반응성
상태는 웹페이지의 데이터다. Vue 3의 반응성(Reactivity) 시스템은 상태가 변경되는 즉시 화면에 반영한다. 개발자가 직접 화면을 업데이트하는 코드를 작성할 필요 없이 Vue가 알아서 처리한다.
이게 Vue의 가장 큰 장점이라고 생각한다. React도 비슷한 메커니즘이 있지만 Vue의 반응성이 더 직관적이다.
Props와 Emit — 부모와 자식
프롭스는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다. 자식은 받은 프롭스를 직접 수정할 수 없고 대신 이벤트(emit)를 통해 부모에게 변경을 요청한다.
Router (라우터)
라우터는 페이지 간 이동을 관리한다. Vue Router를 쓰면 필요한 부분만 교체되어 매우 빠른 페이지 전환이 가능하다. 이게 SPA(단일 페이지 애플리케이션)의 핵심 원리다.
폴더 구조 — 사이트의 설계도
- index.html: 웹사이트의 입구
- App.vue: 최상위 컴포넌트
- views/: 페이지 컴포넌트
- components/: 재사용 가능한 작은 컴포넌트
- router/: 라우터 설정
- data/: 고정 데이터
개발 과정 — 건축에 비유하자면
- 프로젝트 설치: npm create vue@latest
- 컴포넌트 작성: .vue 파일로 HTML, CSS, JS를 작성
- 라우터 설정: 페이지별 URL 정의
- 데이터 연결: API나 파일에서 데이터 가져오기
- 빌드: npm run build로 웹사이트 파일 생성
- 배포: Cloudflare Pages, Vercel 등에 업로드
각 단계는 건축과 비슷하다. 설계도를 그리고 골조를 세우고 인테리어를 하고 마감한 뒤 입주하는 것.
비전문가가 이걸 알면 뭐가 좋은가
웹 서비스의 구조를 파악할 수 있고 버그가 왜 나는지 감을 잡을 수 있다. 가장 큰 이득은 외부 개발자와 협업할 때 커뮤니케이션 비용이 줄어든다는 것이다.
직접 해보고 싶다면
- Node.js 설치: nodejs.org
- 프로젝트 생성: npm create vue@latest my-app
- 로컬 실행: npm run dev
- 브라우저에서 http://localhost:5173 열기
Vue 공식 튜토리얼(vuejs.org/tutorial)은 브라우저에서 직접 코드를 수정하면서 학습할 수 있다. 학습 순서는 시작하기 → 핵심 가이드 → 예제 순을 추천한다.