React란? React & ReactDOM Component 클래스형 Component 함수형 Component 1. React란? React 공식 홈페이지에서는 React를 다음과 같이 정의하고 있다. "사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" 말 뜻 그대로 React는 JavaScript 라이브러리 혹은 웹 프레임워크라고 생각하면 된다. (라이브러리 보다는 프레임워크에 가깝다고 생각한다.) 라이브러리와 프레임워크의 차이를 간략히 기술하자면 폴더 구조가 없는 형태를 라이브러리, 폴더 구조가 있는 형태를 프레임워크라고 볼 수 있다. 따라서 프레임워크를 사용할 때는 특정 디렉토리 안에서 작업을 해줘야만 하는 특성이 있다. React는 Facebook에서 제공해주는 오픈..

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

이번 포스팅에서는 파일업로드 창이 여러개일 때 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...

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

이번 포스팅에서는 Node.js의 내부 라이브러리인 path에 대해 알아보도록 하자. path.join( ) / path.resolve( ) path.extname( ) path.dirname( ) path.basename( ) path 라이브러리는 외부 라이브러리와 다르게 npm install을 할 필요없이 다음과 같이 작성하여 바로 사용 가능하다. const path = require('path') 해당 라이브러리의 용도에 대해 조금 언급하자면, 개발을 하는 과정에서 디렉토리를 컨트롤 해야하는 경우가 굉장히 많이 발생한다. 이 때 path 라이브러리를 사용하면 좀 더 쉽게 디렉토리 및 경로를 컨트롤 할 수 있다. 아래는 path 라이브러리에서 자주 사용되는 함수 위주로 정리해 본 내용이다..