'WEB개발이야기'에 해당되는 글 66건
WEB개발이야기
WEB개발이야기/Vue.js 2019.06.18 18:19 ${data.list[i].commentCount}
Vue의 NUXT 템플릿을 쉽게 설치하는 3가지 방법
Vuejs의 장점은 매우 가볍고 쉽고 빠르게 기존에 있는 웹서비스에 접목해서 사용하는 것입니다. 새로운 웹프로젝트에도 쉽고 빠르게 적용을 할 수 있습니다. 하지만 쉽다고 해도 Vuejs의 최대 성능을 끌어 올려서 처음부터 파일을 만든다는 것은 생각보다 쉽지 않습니다. 더욱이 개발자 마다, 또는 개발할때마다 기본 틀이 달라진다면 혼자 개발할때는 문제가 없지만 통일된 규격을 가지고 있어야 할 대규모 프로젝트를 진행하기에는 어려운 점이 너무나 많습니다. 그래서 React의 NEXT처럼 Vue에서도 NUXT를 제공하고 있습니다. NUXT는 일반적인 Vue.js 어플리케이션을 정해진 규격에 맞게 만드는 프레임워크라고 할 수 있습니다. NUXT 설치하기 NUXT에 대한 설명은 나중에 포스팅을 하도록 하겠습니다. 여..
WEB개발이야기/웹퍼블리싱 2019.05.24 00:38 ${data.list[i].commentCount}
현재 가장 모던한 모바일 터치 슬라이더 swiper
현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다. 모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다. MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다. 홈페이지 http://www.idangero.us/swiper DEMO http://www.idangero.us/swiper/demos/ Install 아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다. bower로 설치할 경우 $ bower install swiper 또는 Atmosphere as Meteor 패키지로 설치할 경우 $ meteor add nolimits4..
WEB개발이야기/Vue.js 2019.04.24 18:49 ${data.list[i].commentCount}
Vue.js용 페이지 네비게이션 인 vuejs-Paginate Component를 소개합니다
Vue.js를 사용하다보면 수많은 사람들이 만들어서 무료로 공유해 놓은 Components들이 많이 있습니다. 라이선스를 꼭 확인해야 하겠지만 대부분 사용에 안전한 MIT라이선스를 주로 사용합니다. 그중에 보통 게시판 리스트 하단에 페이지를 넘기는데 사용하는 Paginate 컴포넌트를 소개해 볼까 합니다. 이 컴포넌트는 디자인은 Bootstrap3을 사용하고 있기때문에 Bootstrap3도 같이 설치를 해야 합니다. 설치하기 npm이나 yarn을 사용한다면 설치는 쉽습니다. NPM으로 설치 $ npm install vuejs-paginate bootstrap@3.3.x --save Yarn으로 설치 $ yarn add vuejs-paginate bootstrap@3.3.x CDN으로 설치 CDN은 설치라..
WEB개발이야기/Vue.js 2019.04.24 12:42 ${data.list[i].commentCount}
Vue.js에서 axios를 사용하여 서버통신하는 방법
웹 또는 앱을 개발하다 보면 거의 대부분이 서버가 필요하게 됩니다. 서버에 내용을 저장하고 웹이나 앱에서 서버의 저장된 내용을 불러다가 사용자에게 보여주게 되는데요. 이때 javascript에는 axios라는 아주 훌륭한 플러그인이 있습니다. axios는 javascript용 플러그인으로 많이 사용하지만 Vue.js에서도 매우 요긴하게 사용되어 집니다. axios는 Promise 기반의 자바스크립트 비동기 처리방식을 사용합니다. 그래서 요청후 .then()으로 결과값을 받아서 처리를 하는 형식으로 구성되어 있습니다. axios.get('/api/data').then(res => { console.log(res.data) }) /api/data에서 데이터를 불러옵니다. 불러온 데이터는 .then()의 re..
WEB개발이야기/Vue.js 2019.04.17 15:14 ${data.list[i].commentCount}
Vuejs의 컴포넌트 사용 시 알아두면 좋은 6가지
Vue.js의 컴포넌트를 사용할때 알아두면 유용한 6가지에 대해서 포스팅을 해보겠습니다. 이것을 알게계시면 소스코드도 많이 줄일 수 있고 보기에도 좋은 코딩을 할 수 있습니다. 케밥표현과 카멜표현 컴포넌트의 영역에서 다른 컴포넌트 명을 작성할 때 2개 이상의 단어가 조합된 이름 일 경우 꼭 케밥(-) 형식으로 작성해야 합니다. HTML에서는 대소문자를 구별하지 않기 떄문에 hongGilDong 과 honggildong을 동일하게 처리하기 때문입니다. 컴포넌트의 영역에서 이름을 카멜형식(hongGilDong)으로 작성했더라도 영역에 작성할 때는 케밥형식으로 변경하여 작성하면 됩니다. Vue.js가 자동으로 같은 컴포넌트로 인식을 합니다. 케밥 형식 : 단어와 단어 사이를 '-'로 연결시키는 표현 (예 : ..
WEB개발이야기/Vue.js 2019.03.29 00:03 ${data.list[i].commentCount}
Vue-CLI 도구 활용방법
Vue를 활용하여 개발 한다면 Vue-CLI는 반드시 알고 있어야 하는 도구 입니다. Vue-CLI가 Vue의 코어는 아니지만 개발자가 쉽게 Vue 프로젝트를 개발 할 수 있게 해주는 아주 유용한 도구입니다. Vue-CLI 란 무엇인가??? Vue-CLI에서 CLI는 Command Line Interface의 약자로 윈도우에서는 Command 창, 맥에서는 터미널 창에서 타이핑으로 명령어를 입력하여 원하는 바를 실행 시키는 도구를 말합니다. Vue-CLI은 내부적으로 Webpack을 활용합니다. Vue-cli로 명령을 실행 시키면 cli가 자동으로 최적화된 Webpack 형태의 결과물을 생성 시켜 줍니다. Vue-CLI로 할 수 있는 것은 무엇인가??? 그럼 Vue-cli로 할 수 있는 것이 무엇이냐??..
WEB개발이야기/Vue.js 2019.03.27 18:46 ${data.list[i].commentCount}
javascript(Vue.js)로 배열에서 ID를 활용하여 Index값을 찾을때 요긴한 함수
Vue.js에서 배열에 있는 특정 id의 Index값을 찾아서 그 배열을 처리하는 요긴하면서 쉬운 함수를 공유합니다. 아래의 예제는 todolist배열을 화면에 나열해 놓고 그 중에 항목을 하나 클릭할 경우 doneToggle(id) 또는 deleteTodo(id)를 불러와서 반대 값으로 토글 시키거나 항목을 삭제하는 함수입니다. {{ a.todo }} (완료) × doneToggle : function(id) { var index = this.todolist.findIndex(function(item){ return item.id === id; }) this.todolist[index].done = !this.todolist[index].done } 핵심은 findIndex() 함수입니다. 함수에서 받..
WEB개발이야기/웹퍼블리싱 2019.02.22 18:57 ${data.list[i].commentCount}
javascript ECMAScript 2015(ES6)로 개발할 때 반드시 알아야할 9가지
ECMAScript2015로 개발하기 위해 알아야 할 9가지를 정리해 보려고 합니다. 먼저 간단하게 ECMAScript를 소개 하겠습니다. ECMAScript 옛날 옛적에 넷스케이프(NE)와 인터넷익스플로러(IE)가 주도권 경쟁을 하던 시절~~ 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 내가 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 망하기는 했지만 넷스케이프도 그렇게 호락호락하지 않았습니다. 자신이 밀고 있던 javasc..
