# vue
기업협업 - 5 vue.js axios
npm i axios --save위와 같이 get 요청을 할 수 있고 JSON 형태를 JS형태로 따로 변환하지않아도 axios 라이브러리가 알아서 해주는 듯 하다.API 주소로 data를 정상적으로 받아 온다면 .then이 적용되고data를 받아오지 못하고 오류가 난다
기업협업 - 4 vue.js 디렉토리 활용하기
Vue에서는 다양한 vue디렉토리를 제공한다.vue디렉토리를 잘 활용하면 유용하게 쓰일수 있다.React에서는 map함수를 활용하여 중복되는 코드 반복을 줄여줄 수 있었다. vue에서는 v-for 디렉티브를 활용하여 반복적인 코드를 줄일 수 있다.위와 같이 v-for를
기업협업 - 3 vue.js router
vue.js router 적용하기src 폴더에 "routes"폴더를 생성한 후 "index.js" 파일 생성index.js 파일에 router를 가져와 전역에서 사용할수 있게 등록한다.App.vue 파일에 <router-view></router-view>을
Vee-Validate 라이브러리 사용법
최근 Vue 프레임워크로 프로젝트를 진행하게 되면서, 새로운 라이브러리를 사용할 기회가 많아졌다. 이번에 사용해본것은 Vee-Validate 라는 Validation 라이브러리이다. 공식 홈페이지 주소 https://logaretm.github.io/vee-vali
CSS 프레임워크를 직접 개발해보았습니다.
웹 프론트엔드 개발을 하다보면 CSS 프레임워크는 거의 필수적으로 사용하게 됩니다.저는 웹 개발할 때 Vue.js를 주로 사용하는데, 그 동안 이것저것 많이 사용해보았지만, 기능적으로나 디자인적으로 Element UI가 괜찮아서 그 동안 10개가 넘는 기업 웹사이트를
프론트(feat Vue, Vuex)로 단위테스트 - 3 : Vuex TDD
1)2)3)Vuex는 순수 js 파일이기에 다른 특별한 방법이나 모듈이 필요로 하지 않다.Vuex의 기본적인 개념은 다루지 않는다.지금 만들고 있는 컴포넌트에서 Vuex로 다룰 수 있는 것들은 다음과 같다.count를 state에서 관리한다.버튼을 클릭하면 action
기업협업 - 2 vue.js WebPack
WebPack? Package Bundler: 여러 모듈을 번들로 묶어 HTTP 호출을 줄임 스크립트가 많아지면서 효율적으로 관리하기위해 사용 많은 스크립트를 하나로 합침 WebPack 설정 npm init -> package name 설정 후 나머자 엔터 npm
Vue 기본 문법
모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. 디렉티브 v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (v-for는 예외) 일부 디렉티브는 콜론으로 표시되는 “전달인자”를
프론트(feat Vue, Vuex)로 단위테스트 - 1 : 서문 및 기본 컴포넌트 생성
요약 프론트(이하 Vue)를 단위 테스트 하려면 크게 3가지 관점으로 접근하자 Component Vuex 두개의 연동 컴포넌트 테스트는 vm.data / 각 html 엘리먼트들의 위치와 연동 등 vue가 연동이 잘되는지 확인하는데 집중 Vuex의 경우
[TIL] Vue.js basic 2
input 태그에 입력한 값을 화면에서 확인하고 싶다면 아래와 같이 로직을 작성할 수 있을 것이다.하지만 아래와 같이 v-model 을 사용하여 양방향 바인딩을 할 수도 있다.템플릿 내에 아래와 같이 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어렵다.이와같이
기업협업 - 1 vue.js 초기세팅
Node.js와 NPM이란? React,Vue,Angular 같은 프레임워크를 사용했을 때 Node.js 기반으로 설치하고 그것을 효율적으로 관리해주는 것이 NodePackageManager이다. npm: 자바스크립트 관련 라이브러리들의 공개 저장소 npm의 장점 p
[TIL] Vue.js basic
vue.js 란 웹페이지 화면을 개발하기 위한 프론트엔드 프레임 워크이다.vue 를 사용하여 대규모 어플리케이션을 구축할 때 npm 을 이용한 설치가 권장된다. npm 은 webpack 과 같은 모듈 번들러와 잘 작동한다.npm install vue예제에서는 공식문서에
vue css variable 동적으로 변경 / css-vars-ponyfill(ie)
runtime 중에 선택한 테마에 따라 동적으로 css variable을 변경해보자cssvue (script)css root 변수를 지정하고 var 키워드로 사용한다. css 파일을 import 하고,script 영역에서 setProperty로 변수 지정값을 변경할 수