2025/08/25 2

Vue - Pinia

Vue 애플리케이션 내부에서만 쓰이는 상태 State 관리 도구프론트엔드에서만 동작하는 공통 저장소 역할Vue 앱 내 임시 메모리 -> 새로 고침하면 사라짐보통 백엔드에서 데이터를 가져와 Pinia에 저장해두고 화면에서 활용 1. 여러 컴포넌트가 공유하는 데이터 저장-> 예) animals 배열을 A컴포넌트에서 추가하면, B컴포넌트에서도 자동으로 같이 반영됨-> 컴포넌트끼리 props로 계속 전달할 필요 없어짐 2. 상태(모드, 선택값 등) 유지-> mode = 'add' | 'modify', selectedIndex 같은 UI상태를 저장-> 화면을 이동하거나 컴포넌트를 바꿔도 이 값들이 유지됨 3. 공통 로직/함수 ㅓㅈ장-> 예) addAnimal(), removeAnimal(), updateAnima..

Vue 프로젝트 생성부터 실행까지 — Windows PowerShell 기준

PowerShell에서 create-vue를 이용해 프로젝트를 만들고, 실행 서버를 띄우는 과정을 단계별로 정리 0. 프로젝트 실행할 폴더 접속1. 프로젝트 생성 명령어 실행npm create vue@latestnpm create vue@latest → 공식 Vue CLI 스캐폴딩 도구 실행.내부적으로 npx create-vue를 호출하여 최신 템플릿 기반 프로젝트를 생성2. 프로젝트 설정 과정Project name: 프로젝트 이름 입력 (예: layout03)Select features: Router(라우팅), Pinia(상태 관리) 등을 선택 가능Experimental features: 현재는 none 선택Skip example code?: 예제 코드 포함 여부 → 학습 시에는 No가 편리➡️ 입력이..

카테고리 없음 2025.08.25