vue.js7 [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의 Instance와 속성 Instance 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다. Vue를 설치한 후, new 키워드로 Vue 생성자 함수를 호출해 새로운 인스턴스를 만들 수 있다. new Vue( ... ); Vue의 정보를 객체 상태로 넘겨주기만 하면 앱을 생성할 수 있다! 인스턴스 내부에는 여러 속성이 올 수도 있는데 자주 사용하는 속성들에 대해서 나열하면 다음과 같다. new Vue({ el: 인스턴스가 그려지는 화면의 시작점 (특정 html 태그) components: 화면에 표시할 요소 data: 뷰의 반응성이 반영된 데이터 속성 computed: 계산된 데이터 속성 methods: 화면의 동작과 이벤트 로직을 제어하는 메소드 created: 뷰의 라이프 사이클과 관련된 속성 watch: data에서.. 2023. 5. 24. 이전 1 2 다음
