# vue

149개의 포스트
post-thumbnail

기업협업 - 5 vue.js axios

npm i axios --save위와 같이 get 요청을 할 수 있고 JSON 형태를 JS형태로 따로 변환하지않아도 axios 라이브러리가 알아서 해주는 듯 하다.API 주소로 data를 정상적으로 받아 온다면 .then이 적용되고data를 받아오지 못하고 오류가 난다

약 1시간 전
·
0개의 댓글
post-thumbnail

기업협업 - 4 vue.js 디렉토리 활용하기

Vue에서는 다양한 vue디렉토리를 제공한다.vue디렉토리를 잘 활용하면 유용하게 쓰일수 있다.React에서는 map함수를 활용하여 중복되는 코드 반복을 줄여줄 수 있었다. vue에서는 v-for 디렉티브를 활용하여 반복적인 코드를 줄일 수 있다.위와 같이 v-for를

약 1시간 전
·
0개의 댓글
post-thumbnail

기업협업 - 3 vue.js router

vue.js router 적용하기src 폴더에 "routes"폴더를 생성한 후 "index.js" 파일 생성index.js 파일에 router를 가져와 전역에서 사용할수 있게 등록한다.App.vue 파일에 <router-view></router-view>을

약 2시간 전
·
0개의 댓글

Vee-Validate 라이브러리 사용법

최근 Vue 프레임워크로 프로젝트를 진행하게 되면서, 새로운 라이브러리를 사용할 기회가 많아졌다. 이번에 사용해본것은 Vee-Validate 라는 Validation 라이브러리이다. 공식 홈페이지 주소 https://logaretm.github.io/vee-vali

약 2시간 전
·
0개의 댓글
post-thumbnail

CSS 프레임워크를 직접 개발해보았습니다.

웹 프론트엔드 개발을 하다보면 CSS 프레임워크는 거의 필수적으로 사용하게 됩니다.저는 웹 개발할 때 Vue.js를 주로 사용하는데, 그 동안 이것저것 많이 사용해보았지만, 기능적으로나 디자인적으로 Element UI가 괜찮아서 그 동안 10개가 넘는 기업 웹사이트를

2일 전
·
0개의 댓글
post-thumbnail

프론트(feat Vue, Vuex)로 단위테스트 - 3 : Vuex TDD

1)2)3)Vuex는 순수 js 파일이기에 다른 특별한 방법이나 모듈이 필요로 하지 않다.Vuex의 기본적인 개념은 다루지 않는다.지금 만들고 있는 컴포넌트에서 Vuex로 다룰 수 있는 것들은 다음과 같다.count를 state에서 관리한다.버튼을 클릭하면 action

3일 전
·
0개의 댓글
post-thumbnail

웹페이지에 구글 애널리틱스 적용해보기

Vue를 이용한 SPA에 Vue-analytics 라이브러리를 이용해 구글 애널리틱스를 적용해본다.

6일 전
·
0개의 댓글

기업협업 - 2 vue.js WebPack

WebPack? Package Bundler: 여러 모듈을 번들로 묶어 HTTP 호출을 줄임 스크립트가 많아지면서 효율적으로 관리하기위해 사용 많은 스크립트를 하나로 합침 WebPack 설정 npm init -> package name 설정 후 나머자 엔터 npm

2020년 9월 20일
·
1개의 댓글

Vue 기본 문법

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. 디렉티브 v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (v-for는 예외) 일부 디렉티브는 콜론으로 표시되는 “전달인자”를

2020년 9월 20일
·
0개의 댓글
post-thumbnail

Vue 기초구조, 생명주기 일부

vue 기초 구조

2020년 9월 20일
·
0개의 댓글
post-thumbnail

프론트(feat Vue, Vuex)로 단위테스트 - 1 : 서문 및 기본 컴포넌트 생성

요약 프론트(이하 Vue)를 단위 테스트 하려면 크게 3가지 관점으로 접근하자 Component Vuex 두개의 연동 컴포넌트 테스트는 vm.data / 각 html 엘리먼트들의 위치와 연동 등 vue가 연동이 잘되는지 확인하는데 집중 Vuex의 경우

2020년 9월 19일
·
0개의 댓글
post-thumbnail

v-on 이벤트 핸들링

v-on 디렉티브

2020년 9월 18일
·
0개의 댓글
post-thumbnail

v-model 양 방향 데이터 바인딩

v-model 디렉티브

2020년 9월 18일
·
0개의 댓글
post-thumbnail

v-for HTML 위의 for-loop

v-for디렉티브

2020년 9월 18일
·
0개의 댓글
post-thumbnail

v-bind 엘리먼트 속성 설정

v-bind 디렉티브

2020년 9월 18일
·
0개의 댓글
post-thumbnail

Vue 시작하기

vue 시작부터 디렉티브까지

2020년 9월 17일
·
0개의 댓글

[TIL] Vue.js basic 2

input 태그에 입력한 값을 화면에서 확인하고 싶다면 아래와 같이 로직을 작성할 수 있을 것이다.하지만 아래와 같이 v-model 을 사용하여 양방향 바인딩을 할 수도 있다.템플릿 내에 아래와 같이 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어렵다.이와같이

2020년 9월 15일
·
0개의 댓글

기업협업 - 1 vue.js 초기세팅

Node.js와 NPM이란? React,Vue,Angular 같은 프레임워크를 사용했을 때 Node.js 기반으로 설치하고 그것을 효율적으로 관리해주는 것이 NodePackageManager이다. npm: 자바스크립트 관련 라이브러리들의 공개 저장소 npm의 장점 p

2020년 9월 14일
·
0개의 댓글

[TIL] Vue.js basic

vue.js 란 웹페이지 화면을 개발하기 위한 프론트엔드 프레임 워크이다.vue 를 사용하여 대규모 어플리케이션을 구축할 때 npm 을 이용한 설치가 권장된다. npm 은 webpack 과 같은 모듈 번들러와 잘 작동한다.npm install vue예제에서는 공식문서에

2020년 9월 14일
·
0개의 댓글
post-thumbnail

vue css variable 동적으로 변경 / css-vars-ponyfill(ie)

runtime 중에 선택한 테마에 따라 동적으로 css variable을 변경해보자cssvue (script)css root 변수를 지정하고 var 키워드로 사용한다. css 파일을 import 하고,script 영역에서 setProperty로 변수 지정값을 변경할 수

2020년 9월 14일
·
0개의 댓글