개발하는 고라니

전통적인 페이징은 와 같은 형태를 지닌 Object를 눌러 페이지를 이동시키며 해당 페이지에 해당하는 데이터가 보여지게끔 하는 방식이었다. 하지만 근래에는 다양한 방법으로 페이징 처리를 한다. 예를 들어 댓글 같은 경우, [더보기] 버튼을 눌러 더 많은 댓글을 append 하는 방식을 사용하거나, 페이스북, 인스타그램 같은 SNS에서는 어느정도 데이터를 보고 나면 저절로 밑에 더 생기는 것을 볼 수 있을 것이다. 위 방식이 스크롤에 따른 페이징 처리인지는 정확히 모르겠으나, 이번 포스팅에서는 [ 스크롤 이동에 따른 페이징 처리 ]를 설명해보고자 한다. 나는 Scroll이 맨 아래에 닿을 때 추가적인 데이터를 불러오도록 코딩하였다. 페이징 처리를 위한 API는 다 준비가 되어있다는..

팀 프로젝트를 진행하다가 JQuery를 안쓰고 Ajax를 사용하려니 코드량도 길고 반복되는 코드가 많아져서 조잡하지만 간단하게 ajax를 사용할 수 있는 모듈을 만들어보았다. 실용성은 그다지 모르겠으나.. 나의 의도대로 잘 동작하긴 한다. 이는 요긴하게 쓰일 수 있는 모듈이므로 차차 업데이트를 진행할 예정이다. function ajax(obj){ const xhr = new XMLHttpRequest(); var method = obj.method || 'GET'; var url = obj.url || ''; var data = obj.data || null; if(obj.contentType) xhr.setRequestHeader('Content-Type', obj.contentType); /* 성공/..

Ajax Ajax이전의 웹 요청은 문서요청이라서 매 요청마다 문서를 새로 받아왔다. 웹 개발을 하다보면 페이지를 새로고침 없이 데이터를 받아오거나, 데이터를 보내거나 등 작업이 요구될 때가 많은데 이같은 작업을 위해선 비동기적인 방법이 필요하다. Ajax(Asynchronous Javascript and XML)은 Javascript 라이브러리 중 하나이다. 비동기식 요청의 대표적인 라이브러리이다. 브라우저가 갖는 XMLHttpRequest 객체를 이용해 페이지를 다시 요청(Refresh)하지 않아도 데이터를 가져올 수 있는 기술이기도 하다. Javascript를 이용한 비동기 통신, 클라이언트와 서버간 XML 데이터를 주고받는다. 데이터 전송 Ajax를 알아보기 전에 동기식과 비동기식 데이터 전송은 어..

이벤트 트리거로 파일을 업로드하는 방법도 있다면 요즘엔 드래그 앤 드랍 방식으로도 많이 사용한다. 그 방법을 알아보자. 먼저 이벤트 중에 drag라는 이벤트가 있는데 이를 좀더 자세히 보면 다음과 같이 있다. Drag & Drop 파일 업로드 네모난 박스에 파일을 드래그 했을 때 그 파일의 정보를 가져오는 것을 알아보기 전에 사전 준비를 해보자. HTML과 그에 필요한 Javascript 작성한다. HTML / JS 작성 파일업로드 : DND & Trigger 파일선택 var sec9 = document.querySelector('#ex9'); var btnUpload = sec9.querySelector('.btn-upload'); var inputFile = sec9.querySelector('inp..

일전에 Node를 통해 MongoDB에 데이터를 저장하고, 가져오고, 수정하고 삭제하는 것을 구현해보았다. 우리에게 익숙한 RDBMS와 다르게 NoSQL인 MongoDB는 스키마(Schema)가 없다는 특징이 있었다. 이는 때로는 편리할지도 모르지만, 어쩌면 더 복잡할 지도 모르겠다. 그래서 사용하는 것이 mongoose이다. mongoose는 MongoDB를 사용할 때 스키마를 지정해서 사용할 수 있게 해준다. 스키마 타입 (Schema Type) String 문자열 타입 Number 숫자 타입 Boolean 이진 타입 Array 배열 타입 Buffer 버퍼 타입, 바이너리 데이터를 저장할 수 있다. Date 날짜 타입 ObjectId 각 문서(Document)마다 만들어지는 ObjectId를 저장할 ..

파일 업로드 - multer node.js를 이용해 파일업로드 하는 것을 공부해보자. 파일을 업로드 하는 방법에는 크게 ajax를 이용한 비동기적인 방법과 form태그를 이용해 multipart로 보내는 방법이 있다. 우선 파일을 업로드 하기 위해서는 express, http 같은 모듈 외에 어떤 것이 필요한지 보자. 이 포스팅에서는 라우팅 및 서버에 관한 설명은 하지 않는다. var multer = require('multer'); var cors = require('cors'); var fs = require('fs'); var static = require('serve-static'); fs같은 경우 내장 모듈이라 따로 설치할 필요가 없지만, 'multer', 'cors'는 npm을 통해 설치하여야..

Node.js File System 모듈 Node의 file system 모듈은 컴퓨터의 파일 시스템에서 작업하는 것을 허락한다. File System 모듈을 추가하기 위해서는 'fs'를 require 한다 const fs = require('fs'); 일반적으로 File System 모듈은 다음의 용도로 쓰인다. 파일 읽기 파일 생성하기 파일 수정하기 파일 삭제하기 파일 이름 변경하기 # 파일 읽기 fs.readFile(path[, options], callback) /* path : | | | 파일이름, 파일 명세 options : | - encoding : (default - null) - flag : 아래 참고 (default - 'r') - signal : ??? callback : - err ..

예전에 '생활코딩'의 Node.js 수업을 들으며, node가 어떤 것이고, 얼마나 간편하고 대단한 것이며 자바스크립트를 이용해 프론트와 백단을 어우를 수 있는 것을 배웠으나, 한동안 사용하지 않다보니 모두 망각하게 되었다. 그래서 쌩기초부터 다시 시작해보고자 한다. Node.js Node.js 란? Node.js는 오픈소스 서버 환경 Node는 무료 Node는 다양한 플랫폼에서 동작한다(Windows, Linux, Unix, Mac OS X, ...) Node는 서버에서 JS를 사용한다. 왜 Node.js 를? Node.js는 비동기 프로그래밍을 사용한다. 웹 서버에서 일반적인 작업은 서버 위에서 파일을 열 수 있고 클라이언트에게 컨텐트를 반환한다. Node.js는 파일 요청을 다음과 같이 처리한다. ..