Node/Express

Node.js - express (19) WebSocket

이번 포스팅에서는 WebSocket을 사용해서 간단한 채팅 기능을 구현해보고자 한다. WebSocket ?? WebSocket으로 채팅 기능 구현하기 1. WebSocket ?? 웹소켓(WebSocket)은 HTTP 같은 통신 프로토콜의 일종으로서 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위해 등장한 개념이다. 위키백과에서는 다음과 같이 웹소켓을 정의하고 있다. "웹소켓은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다" (출처 : 위키백과) 새로운 개념이 등장했을 때는 내가 기존에 알고 있던 것과 비교해 보면서 차이점을 중심으로 이해하고 받아들이는게 좋은 방법이라고 생각한다. HTTP 와 WebSocket의 차이점에 대해 살펴보면서 웹소켓에 대해 알..

Node.js - express (18) multer (2)

이번 포스팅에서는 파일업로드 창이 여러개일 때 multer를 사용해서 해당 이슈를 해결하는 방법과 비동기 파일 업로드에 대해 다뤄보려고 한다. 이전에 작성한 multer(1)과 이어지는 글이므로 기본적인 세팅법과 메인 서버 파일인 server.js 파일의 내용은 아래 글을 참고하도록 하자. 2022.03.15 - [Node.js/express] - Node.js - express (17) multer (1) Node.js - express (17) multer (1) 이번 포스팅에서는 파일업로드에 사용되는 라이브러리인 multer에 대해 알아보고자 한다. multer를 사용해서 이미지 파일들을 업로드 해보도록 하자. multer 세팅하기 single 파일 업로드 multip bitkunst...

Node.js - express (17) multer (1)

이번 포스팅에서는 파일업로드에 사용되는 라이브러리인 multer에 대해 알아보고자 한다. multer를 사용해서 이미지 파일들을 업로드 해보도록 하자. multer 세팅하기 single 파일 업로드 multiple 파일 업로드 1. multer 세팅하기 multer는 파일업로드를 도와주는 외부 라이브러리이므로 터미널 창을 열고 multer를 설치해주도록 하자. npm install multer --save html을 이용해 파일업로드 창을 만들기 위해서는 다음과 같이 엘리먼트를 작성해주면 된다. input 박스의 type을 "file"로 설정하고 엘리먼트의 속성으로 enctype을 지정해주도록 하자. 이때 enctype을 "multipart/form-data"로 지정해줘야 한다. (참고로 엘..

Node.js - express (16) CORS

이번 포스팅에서는 CORS에 대해서 알아보고자 한다. CORS ?? 서버 나누기 (프론트서버 & 백서버) app.use( cors( ) ) 1. CORS ?? CORS란 "Cross-Origin Resource Sharing"의 약자로 "교차 출처 리소스 공유"라는 의미를 갖고 있다. 위키백과를 살펴보면 다음과 같은 설명이 나온다. 교차 출처 리소스 공유(CORS)는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. (출처 - 위키백과) 브라우저에서는 보안상의 이슈로 교차 출처(cross-origin)의 HTTP 요청들을 제한하게 된다. 쉽게 얘기해서 브라우저를 열고 네이버에 접속한 상태에서 브라우저의 javascript..

Node.js - express (15) Ajax - fetch , axios

이번 포스팅에서는 JavaScript에서 지원하는 내장객체인 fetch , 그리고 외부라이브러리 axios를 이용해서 Ajax 기능을 구현해보고자 한다. promise fetch axios 1. promise fetch 와 axios를 사용하기 위해서는 promise(프로미스) 객체에 대한 이해가 선행되어야 한다. 프로미스 객체가 어떤 것인지 간략하게 알아보고 넘어가자. (심도 있는 설명은 나중에 따로 포스팅 할 예정,,) 프로미스 객체를 사용하는 이유에 대해 먼저 간단히 언급하면, 다음과 같이 함수 안에 비동기 코드가 들어갈 경우 함수를 호출해서 비동기의 결과값을 얻는 것이 불가능하기 때문이다. 함수를 사용했을 때 비동기의 결과물을 얻고 싶은 경우 사용하는 것이 프로미스 객체이다. 즉, 비..