Vue | Vue.js란

VueJS리액트와의 차이에 관한 글인데 나중에 읽어보고 정리해야겠다.https://jelvix.com/blog/js-frameworks-is-vuejs-better-than-react Vue vs React: Choosing a Front-End Framework for ProjectChoosing between React vs Vue has been an ongoing debate subject. Both frameworks conquered big following, so how do you choose one for your project?jelvix.com Vue의 특징은 컴포넌트 단위로 개발하여 재사용성, 생산성, 이식성이 높다. 가상 돔(Virtual DOM)가상 DOM은 UI의 표현을 메모리..

• format_list_bulleted Frontend/Vue.js
• · 2024. 6. 24.
• textsms

Vue | vue-router를 이용한 라우팅

vue-router를 이용한 라우팅여러 화면을 가진 웹 애플리케이션을 만들 때 동적 컴포넌트만을 이용하여 만든다면 특정 화면으로 직접 이동할 수 없고 반드시 초기 화면을 거쳐야 한다.이러한 방식을 개선하기 위해 URI를 이용한 라우팅 기능을 이용하여 제작할 수 있는데, vue에는 간단하게 라이팅 기능을 이용할 수 있는 vue-router라는 라이브러리가 있다. vue-router를 설치하려면 콘솔에 다음의 명령어를 입력한다.npm i vue-router@next 기존의 a태그를 이용하여 화면 전환을 한 것처럼 router-link 태그를 이용하여 간단하게 구현할 수 있다. 홈 | 대해서  다음으로, 라우터의 역할을 하는 자바 스크립트 파일을 구현한다.//router.js..

• format_list_bulleted Frontend/Vue.js
• · 2024. 5. 31.
• textsms

Vue | Options API, Composition API

Vue.js에서 컴포넌트의 로직을 구성하는 두 가지 다른 방식이 존재하는데 각 옵션별로 구분하여 컴포넌트의 기능을 정의하는 Options API 방식, 관련된 기능을 함께 묶어서 구현하여 코드의 재사용성을 향상 시킨 Composition API 방식이 있다.  Options APIOptions API는 컴포넌트 옵션(data, methods, computed 등)을 명시적으로 분류하여 정의하여 코드의 구조가 명확하다는 장점이 있다.하지만 특정 기능을 여러 컴포넌트에서 재사용하려면 믹스인(mixins)이나 고차 컴포넌트(HOCs) 같은 패턴을 사용해야 하며, 이는 복잡성을 증가시킬 수 있고 재사용성의 한계가 있다. 또한 한 기능을 구현하기 위해 여러 옵션(data, methods, computed 등)에 ..

• format_list_bulleted Frontend/Vue.js
• · 2024. 5. 30.
• textsms

Vue | Slot, Provide/Inject

SPC에서 Style의 적용프로젝트의 규모가 커질 경우 CSS 클래스명이 중복될 가능성이 높아진다. 다른 컴포넌트에 동일한 CSS 클래스명이 있을 때 마지막 import된 style만 적용되는 등 예측과 다른 동작이 나타날 수 있다.이러한 문제는 CSS 속성의 범위를 지정하여 문제를 해결할 수 있다. scoped 안녕!위와 같이 style 태그에 scoped 속성을 사용하면 부모 컴포넌트의 스타일이 자식 컴포넌트로 누출되지 않는다. 하지만 자식 컴포넌트의 루트 노드(자식 컴포넌트의 최상위 HTML 요소)는 부모 컴포넌트의 scoped 스타일과 자식 컴포넌트의 scoped 스타일 둘 모두에 영향을 받는다. CSS 모듈style에 module 속성을 부여하면 CSS 모듈로 컴파일되고, 결과적으로 CSS 클..

• format_list_bulleted Frontend/Vue.js
• · 2024. 5. 29.
• textsms

Vue | 컴포넌트, props, events

Vite에서 컴포넌트란?Vite에서 컴포넌트는 UI 요소를 구성하는 기본 단위이다. HTML, CSS, JavaScript 코드로 이루어져 있으며, 재사용 가능한 독립적인 UI 조각이라고 할 수 있다. 이는 재사용성을 높혀 개발 효율성을 높히고, props, events 등을 통해 유연하게 확장될 수 있다. https://ko.vuejs.org/guide/essentials/component-basics Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org   컴포넌트간 통신컴포넌트는 트리 구조를 띄기 때문에 부모와 자식, 형제 노드로써 존재한다. 이 때 부모(상위 컴포넌트)가 자식(하위 컴포넌트)에게 데이터를 전송할 때 사용하는 방법이 Props,..

• format_list_bulleted Frontend/Vue.js
• · 2024. 5. 28.
• textsms

Vue | parsing error no babel config file detected for... 에러 해결

parsing error no babel config file detected for... 머시기 하면서 오류가 났다.어떤 컴포넌트를 import 해도 빨간줄이 안 사라지길래 찾아봤더니 VScode에서 ESLint 설정 파일을 인식하지 못해서 일어난 에러인 것 같다.  다음의 블로그를 보고 해결할 수 있었다. https://rosedaily101.tistory.com/32#google_vignette 1. setting.json 열기  2. eslint 추가다음의 설정을 추가하면 된다."eslint.workingDirectories": [ {"mode": "auto"}]

• format_list_bulleted Frontend/Vue.js
• · 2024. 5. 27.
• textsms