[Vue] 6장(완) API 통신

1. Vue API 통신Vue에서 API 통신을 하기 위해 주로 axios 라이브러리를 사용합니다. 아래는 Vue에서 axios를 사용해 API와 통신하는 기본적입 방법입니다. 먼저 프로젝트에 axios라이브러리를 설치해줍니다.npm install axios && yarn add axios2. API 호출 예제다음은 Vue 컴포넌트에서 API를 호출합니다. API 데이터 {{ item.name }}   GitHub - Koras02/vue-tutorial: https://thinky.tistory.com/category/Front-End/VueJShttps://thinky.tistory.com/category/Front-End/VueJS - Koras02/vue-tuto..

• format_list_bulleted Front-End/VueJS
• · 2025. 3. 16.
• textsms

[Vue] 5장 상태관리

1.Vue 상태관리 Vue.js에서 상태를 관리하는 애플리케이션으로 Vuex를 사용할 수 있습니다. Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴이자 라이브러리로, Vuex를 사용하면 컴포넌트 간에 공유되는 상태를 중앙 집중식으로 관리할 수 있습니다. Vuex의 주요 구성 요소로는 다음과 같습니다.State: 애플리케이션의 상태를 저장하는 객체 Getters: 상태를 계산하여 반환하는 메서드로, 컴포넌트에서 상태를 쉽게 가져올 수 있도록 도움Mutations: 상태를 변경하는 유일한 방법으로, 동기적으로 상태를 변경 Actions: 비동기 작업을 처리하고, 그 결과로 mutations을 호출하여 상태를 변경Modules: Vuex 스토어를 모듈화하여 큰 애플리케이션의 상태를 관리2. Vuex..

• format_list_bulleted Front-End/VueJS
• · 2025. 3. 8.
• textsms

[Vue] 4장 라우팅

1. Vue Router 설치 Vue.js에서 라우팅을 설정하는 방법은 VueRouter를 사용해 SPA(Single Page Application) 네비게이션을 관리할 수 있습니다 먼저 Vue Router를 설치합니다. 아래 명령어를 사용해 Vue Router를 설치합니다.npm install vue-router && yarn add vue-router src/router/index.js 파일을 생성하고 라우터를 설정합니다.import About from '@/components/About.vue'import Home from '@/components/Home.vue'import { createRouter, createWebHistory } from 'vue-router'const routes = [ ..

• format_list_bulleted Front-End/VueJS
• · 2025. 3. 5.
• textsms

[Vue] 3장 리스트와 키

1. 리스트 렌더링Vue.js에서 리스트를 렌더링할 때는 v-for 디렉티브를 사용해 배열이나 객체를 반복할 수 있습니다. 이 때 각 항목에 대해 고유한 key 속성을 사용하는 것이 중요합니다. key 속성은 Vue가 각 항목의 변경 사항을 추적하고 성능을 최적화하는 데 도움을 주는 렌더링 입니다. {{ item.name }} key 속성의 중요성key 속성은 리스트의 각 항목을 식별하는 데 사용됩니다. Vue는 이 key를 사용해 항목의 추가, 삭제 및 변경을 효율적으로 처리일반적으로 항목의 고유한 ID를 사용하는 것이 좋음2. Key 속성을 사용하지 않을 경우의 문제아래와 같이 Key 속성을 사용하지 않으면 Vue의 항목의 변경 사항을 효율적으로 추적하지 못할 수 있으며, 이로 인해 성..

• format_list_bulleted Front-End/VueJS
• · 2025. 2. 28.
• textsms

[Vue] 2장 기본 컴포넌트

1.Vue.js의 컴포넌트 구조Vue.js 애플리케이션에서 컴포넌트를 모듈화해 관리하는 것이 중요합니다. 각 컴포넌트는 별도의 파일로 만들어, 이를 통해 재사용성과 유지보수성을 높일 수 있습니다. src/components 폴더를 만들어 그 안에 컴포넌트를 저장합니다.src/└── components/ ├── ChildComponent.vue └── ParentComponent.vueChildComponent.vue이 컴포넌트에는 부모로부터 전달받는 메시지를 표시합니다.템플릿: HTML 구조를 정의합니다. {{ message }} 를 사용해 부모에서 전달받은 메시지를 표시스크립트: props를 사용해 부모 컴포넌트에서 전달된 데이터를 받아옴스타일: 컴포넌트에만 적용되는 CSS 스타일을 정의 ..

• format_list_bulleted Front-End/VueJS
• · 2025. 2. 23.
• textsms

[Vue] 1장 Vue란 무엇인가?

1. Vue의 탄생 Vue.js는 2014년 2월 Vue의 개발자 Evan You에 의해 개발된 사용자 인터페이스(UI)를 구축하기 위한 프로그레시브 자바스크립트 프레임워크입니다. Vue는 컴포넌트 기반 아키텍처를 지원해, 재사용 가능한 UI 컴포넌트를 만들 수 있고, 반응형 데이터 바인딩과 가상 DOM을 사용해 성능을 최적화할 수 있는 언어입니다.2.Vue의 탄생 계기Vue.js는 2014년 에반 유(Evan You)라는 개발자가 Google에서 AngularJS를 사용해 개발하면서 Angular를 기반으로 가벼운 프로그래밍 언어를 만들어볼까?라며 개발하게된 언어입니다. Vue.js는 다음과 같은 목표를 가지고 있습니다.간결함: 학습 곡선이 낮고 간단한 API를 제공함유연성: 점진적인 채택이 가능해 필..

• format_list_bulleted Front-End/VueJS
• · 2025. 2. 23.
• textsms