태태코딩

Routingvue의 롸우팅이란?vue.js에서 페이지 간 이동을 위한 라이브러리이다. 설치방법 terminal에서 아래와 같은 명령어를 실행하면 dependency에 router에 대한 라이브러리가 명시된다.npm install vue-router --save  import Vue from 'vue';import VueRouter from 'vue-router';import Hello from './Hello';Vue.use(VueRouter);export default new VueRouter({ routes: [{ path: '/', redirect: '/home' }, { path: '/info', component: Hell..

웹펙 NPM은 자바스크립트 라이브러리들이 모여있는 곳이다.Jquery , tensorflow  npmnpm init -> 프로젝트 생성 -y를 통해서 기본 값으로 설정 가능하다.npm install jquery -> jquery라는 라이브러리를 다운받겠다는 뜻.npm unistall gurp -> 의존성을 삭제해준다.npm install jquery --global -> 전역설치 (시스템 레벨에서 사용한다) npm을 사용하면 좋은 이유.html안에서 태그 안에서 의존성을 넣어서 돌린다면..? 단점:1. 긴 코드에서 누가 어떤 의존성을 넣었는지 찾아야한다.2. 버전이 바뀌었을 경우 다 하나씩 일일이 찾아야한다. 장점:1. npm은 package.json에 모아서 개발하기 떄문에 보기 편하다.2. 페이지..

Computed 기본적으로 Computed를 사용하는 경우는 변수 즉 값이 계속 변하는 수를 변환시킬 때 Computed를 사용하여 이를 처리한다.  컴퓨티드(computed) API는 컴포지션(Composition API)에서 사용된 컴퓨티드 속성을 의미한다.   {{ reversedMessage }} 기본 Computed는 다음과 같이 사용할 수 있다.  {{ reversedMessage }} Set up() 을 사용하여 Computed API를 사용한다면 아래와 같이 사용하면 된다.

mapMutationsvuex는 state , getter, mutation, actions 로 나뉜다. 앞서 state를 쉽게 mapState를 통해 가져오는 것을 보았으니, 이번에는 Mutation를 가져오는 방법을 봐보겠다.  import { mapMutations, mapState } from 'vuex'; methods:{ ...mapMutations(['addOneItem']), // Vuex mutation 매핑 addTodo() { if (this.newTodoItem !== '') { this.addOneItem(this.newTodoItem); // Vuex mutation 호출 this.clearInput(); // 입력 필드 초기화 ..

VUE *vuex = 복잡한 애플리케이션의 컴포넌트들을 단순하게 관리할 수 있다.* ->  flux 패턴으로 복잡한 애플리케이션의 문제점들을 해결하고 있었다.그렇기 때문에vue의 리엑티비티와 flux를 공존할 수 있게 하는 방법을 만들어냈다. Vuex정의: 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리.React의 Flux 패턴에서 기인함. (앱이 커졌을 때 효과적으로 관리할 수 있는 방법)  Vuex 라이브러리중 state(data),getters(computed),mutations( method ), actions(비동기 method) 를 학습하겠다.Vuex를 더 쉽게 코딩할 수 있는 Helper기능이있다.  FluxMVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발..

모달 컴포넌트 slot -> vue의 기능: 특정 컴포넌트의 일부 부분을 재사용하게 해준다.실제 사용 부분에서 오버라이딩 해준다면 , 그 값으로 바뀌게된다.  트렌지션list에 따라서 리스트에 트렌지션 기능을 주는 부분.ES6vue js를 간단하고 편하게 해주는 문법. (시간을 절약할 수 있다.)const & let , Arrow Function, Enhanced Object Literals, Modules를 학습. -> 나머지는 추후에 Vuex를 할때 사용. ECMAScript 2015와 동일한 용어이다. Vue는 ES6를 잘 몰라도 되겠지만, 피해가는 것은 좋은 기술들이 있는데 쓰지않는 것과 같다.(정말 좋은 기술이다.) BabelES6는 모든 브라우저에서 지원되는 것이아니다. -> babel로 tr..

기본 컴포넌트   Todo App을 관리하기 위하여 각각 Input부분과 List부분에 배열을 넣어주어 localStorage에 저장하는 코드로 작성을 해보았다. 문제점이 바로바로 로딩이 안된다는 것이였다. 그렇기 때문에 배열을App.vue에  놓아두고 Input과 List의 기능들이 emit을 통해서 이벤트를 일으키면 그에 맞게 localStorage를 변형시키고 ,App.vue 에 있는 배열을 즉각 갱신하여 이 단점을 보완했다.

프로젝트 단축키 관리자 권한으로 VisualStudio 실행.sudo /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron  명령어를 통해서 프로젝트 생성.create vue3-cli  vbc : 기본 형식을 맞춰주는 단축키(아래 참조) Vue의 기본구조템플릿스크립트스타일  vda: 데이터받아오기  결론 코드: ID: PW: Submit