태태코딩

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..

웹펙 데브 서버 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구웹팩의 빌드 대상이 변경되면, 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브러우저를 새로고침 해준다. ex) "dev":"webpack-dev-server"로 해야한다.  코드를 변경할 때 마다 재 컴파일을 해서 바로 반영한다.하지만 원래 있어야할 bundle.js 가 안보이는데 빌드가 된다. -> memory상으로만 빌드하고 파일 시스템으로는 보이지 않는 것이 특징

웹팩프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.ex) 웹 어플리케이션을 구성하는 자원을 모두 각각 모듈로 보고 이를 조합해서 결과물로 만든 것. webpack.config.js 파일을 만들어서 설정 파일을 관리하면 좋다. var path = require('path') -> path에서 라이브러리를 가져와서 실행한다.entry: -> entry에있는 파일로 빌드를 해서output: -> 폴더안에있는 파일에 할당을 한다는 뜻

웹펙 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(); // 입력 필드 초기화 ..

Mapstate Vuex에서 사용하는 state, getter, action, mutation 을 쉽게사용하기 위해 helper가 제공하는 기능중 하나를 소개하겠다. 기본적으로 state는 state: arr[] return this.$store.state.name 이런식으로 길게 작성해야한다. import {mapState} from 'vuex' computed:{ ...mapState(['state이름', 'state이름2']) } 이렇게 하면 위에서 This.stateName을 통해서 바로 사용할 수있는 간편한 다.

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

const & let - 새로운 변수 선언 방식블록 단위로 변수의 범위사 제한 되어있음, { } const -> finallet -> 선언한 값에 대해서 다시 선언할 수 없음 const a =10;a =20; //오류var c = 10;c = 20; //동작let a = 10;let a = 20; //오류a= 30; // 가능하다. ES5의 특징 - 변수의 Scopevar sum = 0;for(var i =1; i for문 안에서 선언했어도 밖에서도 값을 구경할 수 있다. Hoisting -> 끌어올려진다.function willBeOveridden(){ return 10;}willBeOveridden(); //5//함수 선언문function willBeOveridden(){ return 5;}//함수 ..

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