전체 글

[node.js] Youtube 정보 다루기

이번 글은 node.js를 이용하여 유튜브 정보를 다루는 내용입니다. https://developers.google.com/youtube/v3/quickstart/nodejs Node.js Quickstart | YouTube Data API | Google Developers Complete the steps described in the rest of this page, and in about five minutes you'll have a simple Node.js command-line application that makes requests to the YouTube Data API. The sample code used in this guide retrieves the channel resou..

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

AWS EC2, Flask를 이용한 카카오 챗봇 제작

Ruby on Rails에 이어 Flask기반으로 카카오 챗봇을 개발해보겠습니다. ​ AWS 카테고리의 첫번째 글에서 키페어 파일을 계속 갖고 있으셔야 합니다. (필자는 지워버려서 다시 생성하였습니다..) ​ 저는 맥 OSX에서 개발하였습니다. ​ chmod 400 kim_n.pem 먼저 위와 같이 내게만 읽기 권한을 갖도록 권한을 변경합니다. ​ 테스트로 보여드리는 IP입니다. 지금 다시 주소 변경했습니다. 그 후 위 사진의 DNS 주소를 복사한 후 아래와 같이 입력하여 ssh 접속합니다. ​ ssh -i "kim_n.pem" ubuntu@ec2-15-164-214-51.ap-northeast-2.compute.amazonaws.com 접속이 성공될 경우, 위와 같은 화면을 보실 수 있게 됩니다. ​ ..

AWS Route 53 Adress Record 생성

저는 외부 도메인을 구매하여 이용하였습니다. https://www.hosting.kr/ 호스팅케이알(HK) KISA 고객만족도 최다 선정, 도메인 최저가 제공, 기업/공공도메인, 도메인연결/웹호스팅 무료, 서버, 아마존클라우드(AWS), G Suite, 홈페이지제작 1644-7378 www.hosting.kr ​ aws DNS가 좀 더 가격이 나가서 해당 사이트 DNS를 구입하였습니다. ​ ​ ​ 1. 호스팅 생성 그럼 AWS Route 53 에 접속해봅시다. ​ 호스팅 영역에 들어가 생성을 눌러줍시다. ​ ​ 도메인 이름에 DNS를 입력 후 생성해줍시다. ​ ​ ​ ​ 2. 네임서버 주소 변경 NS 유형에 4개의 주소 값이 생성되었습니다. 해당 주소는 도메인을 등록한 서비스에 접속하여 네임서버를 위에 ..