반응형 프론트엔드/뷰12 [Vue] 12장: 최종 프로젝트 - 미니 블로그 만들기 12장: 최종 프로젝트 - 미니 블로그 만들기지금까지 배운 모든 기술(컴포넌트, Props, 반응성, Vue Router, Pinia)을 총동원하여 간단한 CRUD(Create, Read, Update, Delete) 기능이 있는 블로그 애플리케이션을 만듭니다.1. 프로젝트 개요만들 기능글 목록 보기 (Read): 모든 게시글의 제목을 리스트 형태로 보여줍니다.글 상세 보기 (Read): 특정 게시글의 제목과 내용을 상세하게 보여줍니다.새 글 작성 (Create): 제목과 내용을 입력하여 새로운 글을 추가합니다.글 수정 (Update): 기존 글의 제목과 내용을 수정합니다.글 삭제 (Delete): 특정 글을 삭제합니다.사용할 기술 스택UI: Vue 3 (Composition API)라우팅: Vue Ro.. 2025. 9. 24. [Vue] 11장: 전역 상태 관리 (Pinia) - 컴포넌트의 벽 허물기 11장: 전역 상태 관리 (Pinia) - 컴포넌트의 벽 허물기애플리케이션의 규모가 커지면, 여러 컴포넌트가 공유해야 하는 상태(예: 사용자 정보, 테마, 장바구니 등)가 생깁니다. Props drilling이나 provide/inject 없이 이러한 전역 상태를 효율적으로 관리하는 방법을 배웁니다. 여기서는 Vue의 공식 상태 관리 라이브러리인 Pinia를 사용합니다.1. 핵심 개념전역 상태(Global State): 여러 컴포넌트가 공통으로 접근하고 수정해야 하는 상태.Pinia: Vue 3를 위한 직관적이고 타입-세이프한 상태 관리 라이브러리입니다. Vuex의 차세대 버전으로 간주되며, Composition API와 매우 잘 어울립니다. (npm install pinia 필요)Pinia의 주요 개념.. 2025. 9. 23. [Vue] 10장: Vue Router - 페이지 이동과 목차 만들기 10장: Vue Router - 페이지 이동과 목차 만들기Vue는 기본적으로 단일 페이지 애플리케이션(SPA)이므로, 여러 페이지를 가진 것처럼 보이게 하려면 "라우팅" 라이브러리가 필요합니다. Vue의 공식 라우터인 vue-router를 사용하여 페이지 간 이동을 구현하는 방법을 배웁니다.1. 핵심 개념SPA (Single Page Application): 최초에 하나의 HTML 페이지만 불러오고, 이후에는 서버와 데이터를 교환하며 동적으로 페이지 내용을 갱신하는 방식의 웹 애플리케이션입니다. 페이지를 이동할 때 전체 페이지를 새로고침하지 않아 사용자 경험이 부드럽습니다.vue-router: Vue.js를 위한 공식 클라이언트 사이드 라우팅 라이브러리입니다. (npm install vue-router .. 2025. 9. 23. [Vue] 9장: 스타일링 - 컴포넌트에 옷 입히기 9장: 스타일링 - 컴포넌트에 옷 입히기Vue 컴포넌트의 스타일을 꾸미는 다양한 방법을 배웁니다. 컴포넌트 스코프를 보장하는 이 텍스트는 전역 스타일의 영향을 받습니다. 나는 일반 버튼 예제 2: v-bind를 사용한 동적 스타일링JavaScript 상태를 CSS에 직접 바인딩하여 동적으로 색상을 변경합니다. 이 텍스트의 색상은 아래 버튼으로 바꿀 수 있습니다. Green Blue3. 연습 문제문제 1: 클래스 바인딩으로 경고 메시지 만들기요구사항: Alert.vue 컴포넌트를 만들어, type prop에 따라 다른 스타일의 경고 메시지를 보여주세요.세부사항:type('success' 또는 'error')과 message를 props로 받습니다.문제 2: v-bind로 프로.. 2025. 9. 23. [Vue] 8장: 컴포저블과 반응성 심화 - Vue 능력 끌어올리기 8장: 컴포저블과 반응성 심화 - Vue 능력 끌어올리기Vue 3의 Composition API는 로직을 재사용 가능한 "컴포저블(Composable)" 함수로 쉽게 추출할 수 있게 해줍니다. computed, watch 등 더 깊이 있는 반응성 API를 통해 복잡한 시나리오를 다루는 방법을 배웁니다.1. 핵심 개념컴포저블 (Composable): Vue의 Composition API를 활용하여 상태 저장 로직(stateful logic)을 캡슐화하고 재사용하는 함수입니다. 이름이 use로 시작하는 관례가 있습니다. (예: useMouse, useFetch). 컴포저블은 컴포넌트의 재사용성을 극대화하는 강력한 패턴입니다.computed: 종속된 반응형 상태에 기반하여 계산되는 값을 선언적으로 생성합니다... 2025. 9. 23. [Vue] 7장: 폼과 `v-model` - 사용자의 입력 받기 7장: 폼과 v-model - 사용자의 입력 받기사용자로부터 텍스트, 선택, 파일 등 다양한 입력을 받기 위한 폼(Form)을 다루는 방법을 배웁니다. Vue에서는 v-model 디렉티브를 사용하여 폼 입력과 상태를 매우 쉽게 양방향으로 바인딩할 수 있습니다.1. 핵심 개념v-model: 폼 , , 엘리먼트에 대한 양방향 데이터 바인딩을 생성하는 디렉티브입니다.사용자의 입력을 자동으로 감지하여 JavaScript 상태를 업데이트하고, 반대로 JavaScript 상태가 변경되면 폼 엘리먼트의 값을 업데이트합니다.v-model은 내부적으로 v-bind:value와 v-on:input (또는 다른 이벤트)의 조합으로 동작하는 문법 설탕입니다.다양한 입력 타입과 v-model:텍스트 (text, textare.. 2025. 9. 23. 이전 1 2 다음 반응형