이번 포스트는 아래 영상들을 적극 참조하며 Back-end를 구축하는 과정을 정리하였습니다.
Youtube / Web Dev Simplified ( Project Setup - Node.js/Express/MongoDB Course )
Youtube / Sahul Hameed ( Uploading an Image using Nodejs and Retrive Image in React | Multer | Mongo db )
아직 내 수준에서 완성되어 있는 Back-end 코드를 분석하기는 무리가 있다고 판단하고,
React app에서 mongoDB를 활용하여 이미지를 업로드 하는 영상을 찾아 차근차근 따라해 보고자 하였다.
우선 해당 영상에서 사용된 여러 툴들이 있는데, 코드를 이해하기 위해 해당 툴들을 사용한 목적이 무엇인지를
먼저 알아야 했고, 공식 문서들에서 그 용도를 알아내었다.
1. Express ?
Node.js의 웹 어플리케이션 framework이다.
사실상 Node.js의 표준 웹서버 프레임워크라고 불려질 정도로, 많은 프레임워크들이 이 Express를 기반으로 하고 있다고 한다.
Node.js는 Chrome 브라우저의 V8 엔진을 이용하여 javascript를 브라우저 밖에서도 동작 할 수 있도록 해주는
플랫폼 (런타임 환경)이다. Express는 이러한 Node.js의 원칙과 방법을 이용하여 웹 어플리케이션을 만들기 위한 프레임워크인 것이다.
프레임워크의 도입은, 수많은 개발자들에게 프레임워크의 개발 규칙을 강제하고 코드와 구조의 통일성을 향상시킨다는 장점이 있다. 이러한 프레임 워크 중 가장 많은 곳에서 보편적으로 사용되는 Express 이기 때문에, 여러 레퍼런스들을 찾을 수 있다는 장점이 있다. Express는 꼭 공부를 해보아야 할 프레임워크 같다.
2. Multer ?
사용자가 앱에게 전달하는 정보는 크게 텍스트와 파일 2가지로 나눌 수 있다.
이때, 파일을 업로드하기 위해 사용되는 Node.js의 middleware 라고 한다.
express는 사용자가 업로드한 파일을 받아서 저장하는 기본 기능을 제공하지 않기 때문에
따로 multer와 같은 모듈을 설치해서 사용자가 전송한 파일을 처리하는 작업이 필요하다.
3. Mongoose ?
Node.js와 MongoDB를 연결해주는 ODM 이다.
다행히도 ODM에 관해서 이전 포스트를 작성하며 약간의 개념 이해를 해두어서 큰 거부감이 없었다.
다만, mongoose에 Schema라는 개념이 존재하는데, NoSQL인 mongoDB의 Document에 '데이터를
아무렇게나 입력하여도 에러가 발생하지 않는다' 라는 양날의 검에 안전장치를 추가하는 느낌이였다.
SQL의 table과 비슷한 개념의 Schema를 도입하여, 아래 예시와 같이
앞으로 데이터를 입력할때 Schema에서 선언한 '틀'에 맞게 데이터를 입력할 수 있도록 하는 기능을 한다.
(Typescript와 약간 결이 비슷한 느낌인 것 같기도..?)
const mongoose = require("mongoose");
const imgSchema = new mongoose.Schema({
name: String,
img: {
data: Buffer,
contentType: String,
},
});
4. Nodemon ?
코드를 수정 할 때마다, 서버를 내렸다가 올렸다가 하는 것은 불편하다.
이럴 때 자동으로 서버를 내렸다 올렸다 해주는 툴이 바로 nodemon 이다.
