겨리의 개발일기

업무 중에 vuetify 쓰다가 삽질한 거 기록하려고 쓴다. [문제] DB에서 select 해온 데이터 리스트를 v-select에 넣어서 선택하면 @click 으로 클릭 이벤트 걸어서 리턴값으로 객체를 통으로 넘겨주고 싶었는데 아무리해도 값이 안 넘어가는 것이다! 😭😭😭😭😭 v-model에 변수 설정해두고 그걸로 가져오려고 콘솔을 계속 찍어왔는데 아무리해도 단일값만 넘어옴 계속 보다보니 :item-value에 설정한 값만 넘어오는 걸 발견했다 // 참고로 내가 말하는 리스트 형태는 이렇게 생겼다. memberList [ { name:'뷰', age: '11' }, { name:'뷰티파이', age: '111' }, ... ] 공식 문서 계속 뒤지다가 'return-object' 라는 속성값을 발견 이름부..

Programming/Vue.js 2022. 4. 24. 18:28

프로젝트에서 store를 열심히 써먹었지만 Vuex 개념이 아리송해서 다시 정리..😂 Vuex - 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 - React의 Flux 패턴에서 기인함 ✔ Flux란? - MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴- Unidirectional data flow Action → Dispatcher → Model → View 1. action : 화면에서 발생하는 이벤트 또는 사용자의 입력 2. dispatcher : 데이터를 변경하는 방법 3. model : 화면에 표시할 데이터 4. view : 사용자에게 비춰지는 화면 * 데이터의 흐름이 여러 갈래로 나뉘지 않고 단방향으로 처리됨 Vuex가 왜 필요한가? - 복잡한 애플리..

Programming/Vue.js 2022. 3. 16. 16:50

Nuxt.js란 - 일반적인 Vue.js 어플리케이션을 만드는 프레임워크 - 2016년 10월 25일, zeit.co의 개발팀이 Next.js 프레임워크를 발표한 후 Next.js 처럼 서버사이드 렌더링 Vue.js 어플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 Nuxt.js가 탄생했다. cf) Next.js : React로 만드는 서버사이드 렌더링 프레임워크 cf) SSR(Server Side Rendering) : 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법 Nuxt.js의 특징 - Vue 파일 사용(*.vue) - 코드 분할 자동화 - 서버 사이드 렌더링 - 비동기 데이터 기반의 강력한 라우팅 시스템 - 정적 파일 전송 - ES2015+ 지원 - J..

Programming/Vue.js 2022. 3. 8. 17:05

컴포넌트 통신 방식 - 뷰 컴포넌트는 각각 고유한 데이터 유효범위 가지기 때문에 컴포넌트 간에 데이터를 주고 받기 위해서는 규칙을 따라야함. Props 속성 - 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 - 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성 Props 속성 코드 형식 - props 속성을 사용하기 위해서는 하위 컴포넌트의 컴포넌트 내용과 상위 컴포넌트의 템플릿에 각각 코드를 추가해줘야함 // 하위 컴포넌트의 내용 var childComponent = { props: ['프롭스 속성 명'] } ✔ tip - HTML 속성은 대소문자를 구분하지 않으므로 문자열이 아닌 템플릿을 사용할 때는 camelCased prop 이름에 해당하는 kebab-case(하이픈 구분)를 ..

Programming/Vue.js 2022. 3. 7. 16:37

Vue Component - 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능. - 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 컴포넌트 생성하기 컴포넌트 생성 후 표시하기 [간단한 앱 헤더 컴포넌트 만들기] ❗ 위에서 등록한 컴포넌트를 화면에서 표시하려면 아래와 같이 컴포넌트 태그(이름)을 추가해야한다. div 태그에 뷰 인스턴스가 생성되어있다는 가정하에 위의 템플릿 코드는 결과적으로 아래와 같이 표시된다. Header Component ✔ 컴포넌트를 등록하고 해당 태그를 추가해주면 컴포넌트를 사용할 수 있다! 컴포넌트 등록 방법 두 가지 1. 전역 컴포넌트 등록 // 등록 Vue.component('my-component', { template: ..

Programming/Vue.js 2022. 3. 7. 16:32

뷰의 템플릿 문법 - 뷰로 화면을 조작하는 방법으로 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다. 데이터 바인딩 - 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법 - 가장 기본적은 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag) 이다. {{ message }} ✔ div 태그에 Mustache Tag를 이용해 뷰 인스턴스의 message 속성을 연결! 출력결과 디렉티브 - 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법으로화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공 - html 태그 안에 v-접두사를 가지는 모든 속성들을 의미 기본 디렉티브 1. v-text : innerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자 그대로 보여줌 e.g. 2. v..

Programming/Vue.js 2022. 3. 7. 16:28

Vue instance - 뷰로 개발할 때 필수로 생성해야 하는 코드. - 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작한다. Vue instance 생성하기 var vm = new Vue({ // 옵션 }) 관례적으로 Vue 인스턴스를 참조하기 위해 변수 vm(ViewModel의 약자)를 사용한다. instance의 속성, API들 new Vue({ el: , template: , data: , methods: , created: , watch: }); - el : 대상이 되는 html element 혹은 css selector - template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성 - data : 화면을 그리는데 사용하는 data를 반환하는..

Programming/Vue.js 2022. 3. 7. 16:20

Reactivity 란 : 반응성. 값이 변했을 때 이를 감지하고 곧바로 반응하는 것을 의미한다. Reactivity는 vue의 특징 중 하나로 데이터의 변화를 라이브러리에서 감지하여 화면에 알아서 그려주는 것을 뜻한다. 쉽게 말해 데이터의 변화에 따라 화면이 자동으로 그려짐! [기존 웹 개발 방식(HTML, Javascript)] vue를 사용하면 위의 예제처럼 매번 함수를 생성하지 않아도 된다! [Reactivity 구현] - Object.defineProperty() 활용하기 Object.defineProperty(대상객체, 객체의 특정 속성, { //정의할 내용... }) : 객체의 특정 속성의 동작을 재정의하는 API → 이 API를 활용하면 대상객체에 접근할 때와 할당할 때 특정한 액션을 취해..

Programming/Vue.js 2022. 3. 7. 16:02