Develop/Vue

[nuxt.js] 페이지 네이션, 스크롤 페이징

이번 글은 node.js를 통해 데이터를 가져온 후, pagination과 infinite-loading 기법을 적용하는 방법을 정리해 보았습니다. ​ ​ ​ 페이지네이션 (Pagination) ​ ​ 위 그림과 같이 페이지마다 5개의 목록을 가져오도록 하겠습니다. ... data () { return { commentlist : [], curpagenum : 1, datapage : 5 } }, methods: { ... async getCommentlist () { await axios.get(' [ 데이터 가져올 api 주소 ] '+ this.$route.params.id).then( (res) => { this.commentlist = res.data.data // 데이터 배열 저장 }, (err..

[Nuxt.js & Node.js] S3에 다중 이미지 업로드를 해보자

이번 글은 Nuxt.js와 Node.js 를 이용하여 AWS S3에 다중 이미지를 업로드 해보겠습니다. ​ ​ 그럼 Frontend 부터 구현해보겠습니다. ​ ​ ​ 디자인은 위와 같습니다. // main.vue 일단 하나의 뷰를 만들었습니다. 이후, 컴포넌트로 쓸 Update.vue를 만들어봅시다. Drop files to upload upload Drop files anywhere to upload or Select Files Update.vue를 만든 후 axios에 백앤드 api 주소를 입력해주면 됩니다. ​ 그럼 백앤드를 제작해봅시다. const express = require('express'); const multer = require('multer'); const path = require..

[Nuxt.js] 설명 및 Nginx / PM2 연동

Nuxt.js vue.js 기반으로 만들어진 SSR(Server Side Rendering)오픈소스 프로젝트입니다. 홈페이지의 설명을 덧붙이자면, Vue 프로젝트를 진행할 때 서버부분을 미리 구성하여 보다 나은 UI 렌더링을 제공하고, static 페이지를 만들어내는 기능들을 포함되어 있습니다. 비동기 데이터, 미들웨어, 레이아웃등과 같은 클라이언트/서버 사이에 개발해야하는 부분들을 많이 줄어든 프로젝트 입니다. Nuxt.js 설치 이전 글에서 npm을 이용하고 있기에 해당 방법으로 설치하겠습니다. npx create-nuxt-app 자신에게 맞는 형태로 설치하시면 됩니다. UI Framework는 위의 이미지를 보신 후 선택하시면 됩니다. Nginx 설치 Nginx를 설치해봅시다. sudo apt-ge..

Vue 애플리케이션 구현 심화편

이전 글에서 삭제할 때 List.vue와 Footer.vue가 연결되지 않아 삭제할 때 List Data가 삭제되지 않았습니다. 같은 데이터 속성을 사용하기 위해 최상위 컴포넌트인 App 컴포넌트에 Data를 정의하고, 하위 컴포넌트에 props로 전달하면 됩니다. ​ props와 이벤트 전달 최상위 컴포넌트에 이전 글에 선언했던 Data를 구성해야합니다. ... export default { data() { return { ItemLists: [] } } ... } App.vue에 data() 속성을 선언 후, 이전 List.vue에는 props로 전달해야 합니다. List 컴포넌트의 propsdata 속성에 props로 전달하였습니다. ​ ​ export default { props: ['propsd..

Vue 애플리케이션 만들기

프로젝트 초기 설정 반응형 웹 디자인 태그를 설정해봅시다. 반응형 웹 디자인은 하나의 웹 사이트로 다양한 기기에서 깨지지 않고 자연스럽게 레이아웃을 제공해줍니다. //index.html File width=device-width 속성은 기기 너비만큼 웹 페이지의 너비를 지정하는 의미입니다. ​ ​ 아이콘과 폰트 파비콘 등 head 라인에서 추가할 수 있습니다. 저는 구그 폰트와 어썸 아이콘, 파비콘을 아래와 같이 추가하였습니다. 컴포넌트 생성 ​ src 폴더 내의 components 폴더에 vue파일을 만들어줍니다. 저는 Header.vue, Input.vue, List.Vue, Footer.vue를 생성하였습니다. ​ 컴포넌튼는 src/components 폴더에서 관리합니다. 또한 해당 폴더 내의 여러..

Vue 프로젝트 구성

싱글 파일 컴포넌트 체계 .vue 파일로 프로젝트 구조를 구성하는 방식입니다. 그럼 vue 파일을 작성해봅시다. {{ message }} 보시면 template, script, style 구조로 되어있습니다. ​ ​ https://blog.naver.com/rile1036/221690277816 mac 맥에서 Vue.js 설치해보자 최근에 장고 공부하면서 글을 올리다가 vuex 관련 공부를 해보고 싶어 정리겸 올리게 되었습니다.​Vue.js... blog.naver.com 만약 nvm 부터 설치를 원하시면 제가 이전 네이버 블로그에 설치법을 작성하였습니다. 위의 사이트를 클릭하셔서 차례대로 진행하시면 됩니다. ​ Vue CLI 위의 싱글 파일 컴포넌트를 일용하기 위해서는 .vue파일을 인식할 수 있도록 ..