Vue21 Pinia 기본 사용 방법 (vuex의 새로운 이름) 목차 Vue 기본 구조 Pinia 기본 구조 State (Vue) State (Pinia) Getters (Vue) Getters (Pinia) Actions (Vue) Actions (Pinia) Vue 기본 구조 기본 구조 설명 - Composition API 방식( 다른 방식으로는 Option API 방식이있음 export default{} ) Current Count: {{ counter.count }} Pinia 기본 구조 기본 구조 설명 Option Store방식 기존 방식처럼 state, getters, actions를 직관적으로 표현한다. stores/todos-store.js import { defineStore } from 'pinia' export const useTodosStore .. 2023. 11. 20. [vue]컴포넌트 자세히 알아보기 1. 섹션 소개 컴포넌트 등록 및 스타일에 대해 Component Registration & Styling 컴포넌트를 스타일링 하는 방법과 특정 스타일이 특정 컴포넌트에만 영향을 미치도록 하는 방법도 알아본다 슬롯과 동적 컴포넌트 Slots & Dynamic Components 컴포넌트 이름과 프로젝트 폴더 구조 Naming & Folder structure 2. 전역 컴포넌트Global Components와 지역 컴포넌트Local Components main.js에서 app.component('the-header', TheHeader); 처럼 설정하는건 vue앱의 전역에서 사용할 수 있는 컴포넌트다. 하지만 컴포넌트를 등록하는 방법 중에서 가장 좋은 방법은 아니다. 한가지 잠재적 단점이 있다. 모든 컴.. 2023. 1. 10. [vue]컴포넌트 통신 세션8: 컴포넌트 통신 Component Communication & Reusable 1. 이번 세션 학습 컴포넌트로 UI를 구성하는 방법 어떻게 컴포넌트끼리 통신하는지, 컴포넌트 사이에서 어떻게 데이터를 주고 받는지 어떤 접근법이 있고, 어떻게 선택 해야하는지 2. 외부에서 데이터 받아오기 중요!같은 컴포넌트를 여러번 사용할때 매번 다른 데이터로 설정한다는 개념 props property의 약자로 커스텀 html 속성을 의미한다. props 로 설정한 것을 vue가 인식하게 하려면 받는 component 에서 props 를 추가해주어야한다. 가장 단순하게 받는 방법은 [ ] array 이다. props: [], 그 다음 모든 커스텀 속성을 추가해준다. props: [ 'name', 'phoneNumbe.. 2023. 1. 2. [vue2 - error] Vue packages version mismatch: 온라인에서 다운로드받은 nuxt 프로젝트에서 오류가 발생했다. npm install > npm run dev 실행했더니 Vue Package version mismatch : 라는 오류가 발생. Vue packages version mismatch: - vue@2.6.14 - vue-server-renderer@2.6.12 package.json 파일에서 vue와 vue-server-renderer 의 버전이 명시되어있지 않아서 자동으로 최신 버전으로 업뎃을 했고, 그 결과 vue 와 vue-server-renderer의 버전이 일치하지 않는다는 내용. package.json 파일에 다음을 추가해준다. "vue": "^2.6.12", "vue-server-renderer": "^2.6.12", packa.. 2022. 1. 31. [vue] eslint 가 아닌 prettier 가 적용 될 때 vs code 에서 별다른 설정을 만지지 않았음에도 불구하고 내가 원했던 대로 개행이 되지 않았다. 또한 자꾸 스크립트 부분에 작은 따옴표를 사용한다고 설정 해두었는데 저장할때마다 큰 따옴표로 변경되어 불편함을 느꼈다. 검색해보니 설정이 바뀌어있었다. vscode 의 단축키 ctrl + shift + p 로 메뉴 검색을 열어서 Open Settings (JSON) 을 열어준다. ctrl + f로 formatter 라고 검색해보면 "editor.defaultFormatter": "esbenp.prettier-vscode", 이렇게 eslint 가 아닌 prettier 로 설정되어 있음을 알 수 있다. 그 부분을 아래와 같이 eslint 로 변경해주면, 성공적으로 원하던 부분에서 개행이 된다. "editor.. 2021. 12. 25. 패스트캠퍼스 프론트엔드 수강 중간 후기 (진도율38%) 후기에 작성하기 전에.. 광고나 홍보가 아닌 개인적인 후기임을 알린다. 수강 계기 vue나 react를 공부하고 싶어서 웹서핑을 하다 보면 꼭 만나는 광고가 있다. 패스트 캠퍼스, ㅈㄹㅂㅇㅅ, 국비 학원 등등... 패스트캠퍼스 사이트에 들어가면 마지막 할인은 ㅇ일 ㅇ시간 남았다며 구매를 독촉하는 느낌이 들어 이미지가 좋지 않았지만 상세 페이지의 내용들은 그야말로 사람을 현혹시키는 내용이었다. 이럴 때야말로 실제 후기를 열심히 찾아보고 수강 신청해야겠다는 생각이 들었는데 패스트캠퍼스의 전반적인 후기는 썩............. ...호평은 아니었다. 혹평 혹은 비난에 가까운 게시물도 여럿 있었고, 신고를 받은 건지 알 수는 없지만 삭제된 게시물도 여럿 있었다. 하지만, 가난한 직장인으로서 다른 온라인 강의.. 2021. 11. 3. [vue3] 동기? 비동기? promise // function a(callback){ // setTimeout(()=>{ // console.log('A') // callback() // },1000) // } // function b(callback){ // setTimeout(()=>{ // console.log('B') // callback() // },1000) // } // function c(callback){ // setTimeout(()=>{ // console.log('C') // callback() // },1000) // } // function d(callback){ // setTimeout(()=>{ // console.log('D') // callback() // },1000) // } // a(function (){ .. 2021. 10. 21. [vue3] props, context setup 내부에서 props 와 context 사용하기 // App.vue Apple //MyBtn.vue ㅇ 2021. 10. 19. [vue3] component api 적용/미적용 예제 // 컴포넌트 api적용 XXX {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} //컴포넌트 API 적용 OO {{ count }} {{ message }} 2021. 10. 19. [vue3] composition api 컴포지션 API 기존에 배운 내용대로 코드를 짜게된다면 다른 로직이 서로 섞여있어서 읽기쉬운 코드가 아니다. 컴포지션 API를 사용하므로써 같은 로직은 한데 모아서 처리할수있게된다 {{ count }} 2021. 10. 19. vue3 ref //App.vue Hello~~~~~.vue~~ Good!!! 2021. 10. 19. vue3 provide, inject app.vue -> parent -> child 부모에서 자식으로 내릴때는 props라는 개념사용. 하지만 부모에서 손자로 내릴때는 provide, inject 사용하면 더욱 편리하다. 값을 넘길때 parent 에는 필요 없는 부분을 작성해줘야했는데 그걸 편리하게 하고자 변경! app.vue에서 provide로 데이터값을 지정하고 child.vue에서 inject 로 값을 받아줄수있다. ! 주의 할점 반응성 제공을 하지않는다. 1) 한번만 출력하게 만들거나 2)반응성을 유지하게 작성하려면 추가작업을 해야함. computed (계산된 데이터) import { computed } from 'vue'를 통해 provide 에 return computed ~.. //App.vue 클릭 App: {{ messag.. 2021. 10. 19. vue3 slot //App.vue Banana (B) //MyBtn.vue 2021. 10. 19. 이전 1 2 다음 반응형
