새로운세계

Vue.js의 Composition API는 직관적이고 유연한 방식으로 반응형 데이터를 관리할 수 있게 해줍니다. 오늘은 ref를 사용해 배열 데이터를 갱신하는 간단한 예제를 블로그 글 형식으로 소개하겠습니다. 예제를 통해 특정 조건에 맞는 데이터를 업데이트하는 방법을 알아보겠습니다.문제 상황우리는 아래와 같은 반응형 배열 데이터를 가지고 있습니다:const peresons = ref([ { seqaNo: 1, name: 'Jhon', age: 20 }, { seqaNo: 2, name: 'Tom', age: 23 }]);이제 다음과 같은 업데이트 데이터를 받아서:const update_pereson = ref([ { seqaNo: 2, name: 'Michel', age: 32 }]);pereso..

안녕하세요! 오늘은 Vue.js의 Composition API를 사용해서 배열 데이터에 순차적인 번호(segNo)를 추가하는 방법을 알아보겠습니다. 주어진 데이터는 pereson = [{name:'Jhon', age: 20}, {name:'Tom', age:23}]이고, 여기에 segNo를 추가해서 각 객체에 고유한 번호를 부여해보겠습니다. 코드 설명은 초보자도 쉽게 따라 할 수 있도록 단계별로 진행하겠습니다.목표pereson 배열에 segNo 속성을 추가segNo는 1부터 순차적으로 증가하는 번호로 부여Vue Composition API를 사용해 구현1. 기본 환경 설정먼저 Vue 프로젝트에서 Composition API를 사용하기 위해 3. 코드 설명ref로 반응형 데이터 생성pereson 배열을 r..

안녕하세요, 개발자 여러분! 오늘은 Nuxt와 Vuetify를 결합하여 Composition API를 활용한 실무에서 유용할 만한 다양한 사례를 블로그 형식으로 소개해드릴게요. Vue 3의 강력한 Composition API와 Vuetify의 Material Design 컴포넌트를 Nuxt 환경에서 어떻게 실무에 적용할 수 있는지, 실제로 자주 마주칠 법한 케이스를 중심으로 살펴보겠습니다. 초보자도 따라 할 수 있도록 단계별로 설명할 테니, 차근차근 따라와 보세요!환경 설정: Nuxt와 Vuetify 통합먼저, Nuxt 프로젝트에 Vuetify를 설정하는 방법부터 간단히 짚고 넘어가겠습니다. Nuxt 3와 Vuetify 3를 사용한다고 가정하고, 아래와 같이 설정을 시작합니다.프로젝트 생성 및 Vueti..

안녕하세요, 개발자 여러분! 이번에는 Vue.js의 Composition API를 사용해 CRUD(Create, Read, Update, Delete) UI를 구성하면서 watch와 computed를 실무적으로 활용하는 방법을 블로그 글 형식으로 풀어보겠습니다. Composition API는 기존 Options API보다 유연하고 모듈화된 코드를 작성할 수 있게 해주며, 특히 로직 재사용성이 뛰어납니다.1. CRUD UI의 기본 설정CRUD UI를 구성한다고 가정하면, 사용자 목록을 표시하고 검색, 추가, 수정, 삭제 기능을 제공하는 인터페이스를 구현할 수 있습니다. Composition API를 사용하면 데이터와 로직을 함수 단위로 깔끔하게 분리할 수 있습니다. 먼저 기본 구조를 보겠습니다.  2. c..

안녕하세요, 개발자 여러분! 오늘은 Vue.js에서 v-model을 활용해 반응형으로 라디오그룹, 콤보박스, 체크박스 그룹을 관리하는 방법을 알아보겠습니다. lookup 객체를 정의하고, 이를 반응형 데이터로 만들어 한 페이지에서 세 가지 UI 요소를 모두 사용해보겠습니다.   1. 반응형 Lookup 객체의 필요성Vue에서 v-model을 사용하면 데이터가 UI와 양방향으로 바인딩되며, 반응형으로 동작합니다. lookup 객체를 별도 파일에 정의하더라도, 이를 Vue 컴포넌트에서 반응형으로 활용하려면 reactive 또는 ref를 사용해야 합니다. 이번 예제에서는 reactive를 활용해보겠습니다. 2. Lookup 객체 정의먼저, src/constants/lookups.js 파일에서 lookup 객체..

두 코드 블록은 Vue.js에서 컴포넌트를 작성하는 방식의 차이를 보여줍니다. 하나는 setup() 함수를 사용한 Options API 스타일이고, 다른 하나는 특징: export default와 함께 setup() 함수를 사용합니다. 이는 Vue 3에서 Composition API를 Options API 스타일에 통합한 방식입니다.동작: setup() 함수 안에서 반응형 데이터(reactive)와 함수를 정의하고, 템플릿에서 사용하려면 return으로 노출해야 합니다.장점: 기존 Options API(data, methods 등)와 혼용 가능하며, 구조가 명시적입니다.단점: 코드가 길어질수록 return에 반환할 변수와 함수가 많아져 번거로울 수 있습니다.  import { reactive } f..

Vue.js에서 컴포넌트를 작성할 때 주로 사용하는 두 가지 방식인 Composition API와 Options API에 대해 다뤄보겠습니다. 이 두 가지는 Vue.js 개발에서 자주 비교되는 주제입니다. 각각의 특징, 장단점, 그리고 어떤 상황에서 유용한지를 자세히 살펴보고, 코드 예제와 함께 차이점을 분석해보겠습니다. Vue.js를 처음 접하는 사람부터 오랫동안 사용해온 개발자까지 참고할 수 있도록 가능한 한 명확하게 설명해보려 합니다. 1. Options API: 전통적인 Vue.js의 기반먼저 Options API부터 시작해볼게요. Vue.js가 처음 세상에 나왔을 때부터 함께한 이 방식은 Vue 2.x 시절의 기본 접근법으로, 여전히 많은 개발자들에게 익숙하고 사랑받는 방식입니다. Options..

Vue 3와 Nuxt 3에서 Composition API를 활용하여 서버와 데이터를 주고받는 방법을 살펴보겠습니다. 이 글에서는 ref()를 사용한 반응형 데이터 관리, setup()을 활용한 상태 공유, $fetch()를 이용한 서버 API 호출 방법을 설명하며, 예제 코드와 함께 상세한 설명을 제공합니다.1. 프로젝트 구조 및 개요이 예제에서는 setup()을 이용해 상태를 관리하며, ref()를 활용하여 반응형 데이터를 사용합니다. Nuxt 3의 $fetch()를 사용해 API 호출을 수행하고, 서버에서 클라이언트가 보낸 데이터를 받아 다시 응답하는 구조를 가집니다.1. Vue 템플릿 코드 (컴포넌트에서 데이터 처리)이제 Vue 템플릿과 JavaScript 코드가 어떻게 구성되어 있는지 살펴보겠습니..

Nuxt.js는 Vue.js를 기반으로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공하는 프레임워크입니다. Nuxt에서 컴포넌트를 작성할 때, 위 예제에서 볼 수 있듯이, 인터페이스를 사용하여 복잡한 타입 정의를 간소화할 수 있습니다.withDefaults를 사용하여 속성 기본값을 설정할 수 있습니다.2. 컴포넌트 내 데이터 타입 정의ref 또는 reactive를 사용하여 컴포넌트 내 데이터를 정의할 때 타입을 명시하여 데이터의 안정성을 확보할 수 있습니다.3. 함수 타입 정의함수의 매개변수와 반환 값 타입을 명시하여 함수의 동작을 예측 가능하게 만들고 오류를 방지할 수 있습니다.4. 이벤트 핸들러 타입 정의이벤트 핸들러 함수의 매개변수 타입을 명시하여 이벤트 객체의 속성에 안전하..

Vue.js 애플리케이션에서 데이터를 관리하고 공유하는 것은 필수적인 작업입니다. 이를 위해 Vue.js는 Vuex라는 공식적인 상태 관리 라이브러리를 제공해왔지만, 최근에는 더욱 간결하고 효율적인 Pinia가 등장하여 많은 개발자들의 관심을 받고 있습니다. 본 글에서는 Vuex와 Pinia의 차이점을 심층적으로 비교 분석하여, 어떤 라이브러리를 선택해야 할지 고민하는 개발자들에게 유용한 정보를 제공하고자 합니다.Vuex: Vue.js의 공식 상태 관리 라이브러리Vuex는 Vue.js의 공식적인 상태 관리 패턴으로, 중앙 집중식 저장소를 통해 애플리케이션의 모든 컴포넌트에서 상태를 관리하고 공유할 수 있도록 합니다. Vuex는 mutations, actions, getters 등의 개념을 도입하여 상태 ..