J-BBang J-BBang

혹시 Vue3 시작하기를 보고 오신 분들 중에서npm create vue@3를 하셨을 때 위와 같이 뜨시는 분들은 Node버전을 꼭 체크해주시길 바랍니다! SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs' 위와 같은 에러는 Node.js 버전이 낮기 때문에 parseArgs를 지원하지 않기 때문에 생기는 오류라고 합니다. parseArgs에 생소한 저또한 찾아본 결과Node.js 16.17.0 이상에서 새롭게 도입된 함수로커맨드라인에서 전달된 인자들을 쉽게 처리하기 위한 내장 함수라고 합니다.import { parseArgs } from 'node:util';const args = parseA..

포스팅 이전에 앞서 💡 Vue.js의 라이프사이클(Lifecycle)이란?Vue 컴포넌트는 단순히 한 번 만들어지고 끝나는 게 아니라, 탄생부터 소멸까지 일련의 단계를 거칩니다. 이 과정을 컴포넌트 생명주기(Lifecycle)라고 부릅니다.쉽게 말하면, 컴포넌트가생성되고 (create), DOM에 붙고 (mount), 업데이트되고 (update), 사라지기까지 (unmount) 이 전체 흐름을 Vue가 내부적으로 관리하고 있으며, 가장 중요한 요소는특정 시점마다 실행할 코드를 직접 작성할 수 있다는 것입니다. 이때 사용하는 게 바로! 라이프사이클 훅(Lifecycle Hooks) 입니다. Vue 3에서는 컴포넌트의 생명주기 동안 특정 시점에 실행할 수 있는 라이프사이클 훅(Lifecycle Hooks)..

Vue.js의 컴포넌트 시스템은 애플리케이션을 재사용 가능한 작은 단위로 나눌 수 있도록 도와줍니다.이 과정에서 부모와 자식 컴포넌트 간의 데이터 전달과 이벤트 처리가 중요합니다.Vue3의  1-2. 자식 컴포넌트 자식 컴포넌트 {{ msg }}   결과 부모 컴포넌트의 메시지가 자식 컴포넌트로 전달되어 화면에 출력됩니다. defineProps는 Vue3의  2-2. 자식 컴포넌트 자식 컴포넌트 이벤트 발생시키기   결과  자식 컴포넌트에서 버튼을 클릭하면 이벤트가 발생하고, 부모 컴포넌트가 해당 이벤트를 처리하여 알림을 띄웁니다. defineEmits는 Vue3의 문법에서 자식 컴포넌트가 부모 컴포넌트에 이벤트를 전달할 때 사용하는 함수입니다. emit을 통해 자식 컴..

1. 템플릿 문법이란?Vue.js의 템플릿은 HTML 기반으로 작성되며, 일반 HTML 태그에 Vue만의 특별한 문법을 추가하여 동적인 콘텐츠를 쉽게 표현할 수 있습니다. 템플릿은 데이터와 DOM을 연결하는 역할을 하며, 사용자 인터페이스(UI)를 구성하는 기본 단위입니다. 대표적으로 보간법이 있습니다. 보간법 (Interpolation)Vue 템플릿 문법의 핵심은 보간법입니다. 이중 중괄호(콧수염 괄호) {{  }} 를 사용해 데이터를 템플릿에 렌더링할 수 있습니다. {{ title }} {{ new Date().toLocaleDateString() }} 위 코드에서는 title 데이터와 현재 날짜가 동적으로 화면에 렌더링됩니다. 데이터가 변경되면 화면도 즉시 업데이트됩니다. 2. 데이터 바인딩이란..

1. 컴포넌트란?Vue에서 컴포넌트는 UI의 재사용 가능한 단위입니다.주로 Vue에서 화면의 영역을 구분하여 개발하는데 사용합니다. 그럼 컴포넌트를 사용하는 이유는?🤷‍♂️코드의 가독성을 높인다.유지보수가 용이하다.코드의 중복을 줄일 수 잇다.Vue에서는 각 컴포넌트는 고유의 데이터, 메서드, 템플릿을 가지고 동작합니다.페이지에서 주로 Header, Body, Footer와 같은 UI 요소를 컴포넌트로 만들고,다른 곳에서도 재사용할 수 있어 관리가 편합니다. 컴포넌트를 설명하면서 추가로 말씀드리면,이전까지의 Vue2에서의  컴포넌트는 options API를 기반으로 작성되었습니다.하지만 Vue3에서는 Composition API가 도입되었고,그 중에서도 {{ doubleCount }} ..

여느때와 같이 npm run dev로 프로젝트를 열려고 하니 위와 같은 에러가 떴습니다. SyntaxError: Unexpected token '??='??= 는 Javascript의 최신 문법으로 변수가 null or undefined 일 때만 값을 할당하는 연산자입니다.근데 제 프로젝트에서는 저러한 문법을 사용하지 않았습니다. 그럼 이는 종속성(dependencies) 중 하나가 해당 연산자를 사용하고 있을 가능성이 큽니다.예를 들어, 프로젝트에 사용된 라이브러리나 빌드 도구(ex: Vite, Webpack, Babel)가 이 연산자를 포함하는 최신 JavaScript 문법을 사용하고 있을 수 있습니다. 해당 문법을 사용하려면 Node.js는 16.9.0 이상이 필요합니다.만약 Node.js 버전이 ..

Vue3에서는 컴포넌트를 더욱 직관적이고 간결하게 만들기 위해   : 컴포넌트의 HTML 구조를 정의합니다.: 컴포넌트 로직을 작성하는 부분으로, Vue의 ref, reactive 같은 상태 관리 기능을 쉽게 사용할 수 있습니다.: 컴포넌트에 대한 스타일을 지정하는 부분입니다.ref, reactive란?ref : 기본 데이터 타입(문자열, 숫자 등)이나 객체를 반응형으로 만들기 위해 사용하는 API입니다. reactive : 객체를 반응형으로 만들기 위해 사용하는 API입니다. reactive를 사용하면 모든 속성이 반응형이 됩니다. // refimport { ref } from 'vue';const count = ref(0); // count변수를 반응형 변수로 만듭니다.function incremen..

Vue.js란?🤷  Vue.js는 사용자 인터페이스와 싱글 페이지 애플리케이션(SPA)을 쉽게 구축할 수 있도록 도와주는 가벼운 프론트엔드 JavaScript 프레임워크입니다. 직관적인 API와 반응성 시스템을 통해 개발자가 효율적으로 웹 애플리케이션을 개발할 수 있도록 설계되었습니다. Vue.js는 현대 웹 개발에서 주목받는 프론트엔드 프레임워크입니다. 단순히 UI를 만드는 도구를 넘어, 개발자에게 효율성과 즐거움을 선사합니다.😆😆 1. 컴포넌트 기반 아키텍처Vue.js는 UI를 작은 컴포넌트로 나누어 관리합니다. 이 접근법은 코드의 재사용성을 높이고, 애플리케이션을 더 이해하기 쉽게 만듭니다. 2. 반응성 시스템Vue의 반응성 시스템은 데이터와 UI를 자동으로 동기화합니다. 데이터가 변경되면 U..