본문 바로가기

vue9

[Vue.js] v-model 양방향 바인딩 문제 (feat. input event) v-model 양방향 바인딩 Vue.js의 경우에는 v-model을 통해 양방향 바인딩을 제공한다고 알고 있었다. Vue.js를 학습하며 토이 프로젝트를 진행 중, 영어의 경우에는 문제없이 입력값이 전부 잘 저장되지만, 한국어의 경우에는 계속 마지막 입력이 잘려 저장되는 문제를 발견하게 되었다. 처음에는 데이터를 상위 컴포넌트에서 관리하고 하위 컴포넌트에서 input을 받아 v-model로 데이터를 상위로 올려주었는데, 이 event를 호출하는 과정에서 문제가 생긴 줄 알고 하나로 합쳐도 봤다가, 로그만 찍어봤다가 해봤는데도 문제가 생겨 골머리를 앓고 있었다😂😂 해결 방법 당연히 v-model의 문제라고 생각 안 하고 문제점들을 찾다가, 혹시나 해서 찾아보게 됐는데... 공식 문서에서 다음과 같은 안내를.. 2023. 6. 1.
[Vue.js] Vuex (feat. Flux pattern) Vuex란? Vue.js를 위한 상태 관리 패턴이면서 라이브러리이다. 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙을 사용하여 응용 프로그램의 모든 구성 요소에 대한 중앙 집중식 저장소 역할을 한다. 각 컴포넌트들이 관리하고 있는 상태를 props로 전달하는 것에는 한계가 있다. 또한 상태를 변경하기 위해 event를 emit 하는 것은 더욱 복잡해진다. 이때, 중앙 집중화된 상태 정보를, 사용하는 컴포넌트에서만 갖다 쓰는 방식이라면, props로 계속 넘겨주지 않아도 되고, 유지보수 측면에서도 훨씬 유리해진다. Vue는 MVVM 모델이기 때문에 상태가 바뀌면 ViewModel 객체가 바라보고 있다가 감지하여 UI를 자동으로 변경하는데, 이렇게 중요한 상태가 어느 컴포넌트나 메서드에 의해서,.. 2023. 5. 28.
[Vue.js] Vue Router (Nested Router vs Named Views) Router Vue에서는 Vue Router라는 라이브러리를 사용하여 SPA(Single Page Application)을 구현한다. 라이브러리는 npm을 통해 설치할 수도 있고, 아래 예시처럼 CDN으로 가져올 수도 있다. const router = new VueRouter({ routes: [ { path: '경로명', component: { template: '' } } ] }); new Vue({ el: '#app', router: router, }); vue-router로부터 VueRouter를 가져와 새 라우터를 정의해 준다. VueRouter안에는 routes라는 속성의 값으로 route들을 객체 형식으로 배열에 정의할 수 있다. 정의한 VueRouter는 Vue 인스턴스에 router라는 .. 2023. 5. 27.
[Vue.js] Vue.js Style - CSS scoped vs CSS module SFC에서의 CSS Single File Component로 개발을 하면 생성한 .vue 파일에는 각각의 코드 블록에 HTML, JavaScript, CSS를 작성할 수 있다. 그중, CSS는 Style이라는 코드 블록에 작성을 한다. 각 .vue 파일은 여러 개의 style 태그를 포함할 수 있다. style 태그는 현재 컴포넌트에 스타일을 캡슐화하는 데 도움이 되도록 scoped 또는 module 속성을 가질 수 있다. 캡슐화를 통해 다른 컴포넌트들과의 중첩을 방지할 수 있다. 두 방법 모두 캡슐화를 할 수 있기 때문에 동일하게 느껴지지만 다른 점이 있다. 아래서는 이 차이점에 대해 알아보도록 하겠다. scoped style 태그에 scoped 속성을 추가함으로써 사용할 수 있다. 해당 CSS는 현재.. 2023. 5. 26.
[Vue.js] Single File Component: SFC Single File Component 전역 컴포넌트는 Vue.component를 사용해 정의되고, 다음에 모든 페이지의 app 요소를 대상으로 하는 new Vue({el: '#app'})가 정의된다. 이 방법은 중소 규모 프로젝트에서는 유용하지만 복잡한 프로젝트나 프론트엔드가 JavaScript 기반인 경우에는 아래와 같은 단점이 생긴다. 전역 정의로 인해 모든 컴포넌트에 고유의 이름을 붙여야 함 문자열 템플릿 사용으로 html의 문법 강조가 되지 않음 HTML과 JavaScript가 컴포넌트로 모듈화 되어 있으나 css 스타일링 작업은 거의 불가 ES5를 이용하여 계속 앱을 작성할 경우 Babel 빌드가 지원되지 않음 SFC, Single File Component란 HTML과 유사한 문법을 사용하여.. 2023. 5. 25.
[Vue.js] Vue (MVVM, Props와 Event, v-model) Vue란? Vue는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크다. 표준 HTML, CSS, JavaScript를 기반으로 구축되며, 단순한 것부터 복잡한 것까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반의 프로그래밍 모델을 제공한다. 선언적 렌더링과 반응성 Vue에는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태를 기반으로 선언적 렌더링을 할 수 있으며, JavaScript 상태 변경을 추적하고, DOM 요소에 연결되어 변경이 발생하면 DOM을 효율적으로 자동 업데이트 하는 반응성이라는 두 가지 핵심 기능이 있다. 이를 바탕으로 Vue는 접근하기 쉽고(Approachable), 변하기 쉬우며(Versatile), 효율적이며(Performant),.. 2023. 5. 24.

티스토리툴바