반응형 개발/Vue6 [Vue] Vuex 개념 정리 Vuex - 여러 개의 component가 같은 상태를 유지하기 위한 상태 관리를 해주는 역할 - 중앙 저장소에 데이터를 모아서 상태 관리 - 규칙을 설정하며, Vue의 반응성을 효율적으로 사용하는 상태 관리 기능 - 다음 명령어를 통해 사용 가능 vue create vuex-app cd vuex-app vue add vuex export default new Vuex.Store({ state { }, getters:{ }, muations:{ }, actions:{ }, modules:{ } }) state - 중앙에서 관리하는 모든 상태 정보 - vue 인스턴스의 data에 해당 - $store.state로 state 데이터에 접근 Mutations - 실제로 state를 변경하는 방법 - Muta.. 2023. 5. 8. [Vue] Props & Emit Event 정리 Pass Props - 요소의 속성을 사용하여 데이터를 전달함 - props는 상위 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성 - 하위 컴포넌트는 props 옵션을 사용하여 수신하는 props를 명시적으로 선언 - 부모에서 넘겨주는 props는 kebab-case로 작성 - 자식에서 받는 props는 camelCase로 작성 - 단방향 바인딩을 형성하므로 하위 컴포넌트에서 props를 변경 불가 // Parent.vue Partent // child.vue Child {{ staticProps }} // ---------------------------------------------- // Dynamice Props // Parent.vue Partent :dynamic-props="dyna.. 2023. 5. 8. [Vue] compute, watch, filter 개념 computed - 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속서 - computed 객체에 정의한 함수를 페이지가 최초 렌더링 될 때 호출하여 계산함 // 기본표현식 {{ number1 + number2 }} // computed 사용시 {{ result }} computed{ result(){ return number1 + number2 } } watch - 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행 + filters - 화면에 표시되는 텍스트의 형식을 쉽게 변화해주는 기능 {{ message | change }} 2023. 5. 7. [Vue] 기초 속성 및 바인딩 개념 정리 기초 속성 el (elemnt) - Vue instance와 DOM을 연결하는 옵션 - View와 Model을 연결 - Vue instance와 연결되지 않은 DOM 외부는 Vue의 영향을 받지 않음 {{ message }} // 정의 되지 않았다는 경고 출력 {{ message }} // {{ message }} 그대로 출력 data - Vue instance의 데이터 객체 혹은 인스턴스 속성 - 기본 객체여야하며, 객체 내부 아이템들은 모든 타입의 객체를 가질 수 있음 {{ message }} // Vue 출력 ... methods - Vue instance의 method를 정의하는 곳 - method를 호출하여 data 변경이 가능함 ----- // 콘솔창에 명령어 사용 app.start.. 2023. 5. 7. [Vue] VScode에서 vue 설치 후에 Create가 안될 때 해결 방법! 사용 환경이 노트북에서 데스크탑으로 바뀌면서 또 Vue 설치 시 에러가 발생하기 시작했다. vue create vue-cli 뷰를 설치 후에 create를 시도해보니 아래처럼 오류가 발생했다. 어.. 라? 제대로 vue가 설치가 안 돼서 그런가? 싶어서 다시 설치를 시도했다. npm install -g @vue/cli 재 설치 후에 다시 생성을 시도했으나, 같은 오류가 계속 발생했다. 그래서 원인을 찾아 버그 로그를 위에서부터 읽어보았는데, npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@achrinza/node-ipc@9.2.6', npm WARN EBADENGINE required: { npm WARN EBADENGINE.. 2023. 5. 5. [Vue] VScode에서 vue 설치해도 동작 안할 때 해결 방법 VSCode를 이용해서 다음과 같은 명령어를 통해 vue/cli를 설치했다. npm install -g @vue/cli 설치가 완료된 후에 vue를 통해 cli를 만들려 시도했다. vue create vue-cli 그랬더니 다음처럼 오류가 떴고, 심지어 vue --version을 통해 버전 체크를 하려 해도 동일한 오류가 계속 발생해서 진행할 수가 없었다. 원인이 뭐지하고 계속 삭제하고, 다시 설치하고를 반복했으나 정상적으로 작동하지 않았다. 인터넷에 다른 분들이 사용한 환경 변수 설정이라던지, uninstall을 통한 오류 해결이라던지 이것저것 해봤는데 계속해서 vue 명령어가 전혀 듣지 않았다. 이를 해결하기 위해 이것저것 시도해 본 중에 원인을 발견하였고, 다음과 같은 이유로 실행이 되지않았다. 📌.. 2023. 5. 2. 이전 1 다음 반응형
