Node.js + MongoDB App 만들기 (1)

Node.js + MongoDB를 이용하여 간단한 게시판, SNS, 채팅 기능을구현하는 작업을 순차적으로 보여주는 Post이다.
사용 기술 : Node.js, Express, MongoDB, EJS, Bootstrap, AJAX, google cloud, socket.io

 

Index

- 서버(express) 초기 세팅

- Bootstrap을 활용한 간단한 웹 페이지 UI 만들기

- MongoDB(NoSQL Database) 연동하기

- DB 데이터 저장 및 출력

- 로그인 기능

- google cloud를 통한 서버 배포

- 이미지 전용 서버 만들기 및 이미지 업로드

- Socket.io를 활용한 실시간 채팅 기능

 

 

1. 서버(express) 초기 세팅

파일 트리
우선적으로는 동일한 위치에 서버를 구축하기 위한 최소의 파일을 생성한다.

NodeApp
├── index.html
├── write.html
├── server.js
├── node_modules
├── package.json
└── package-lock.json

• $ npm init -y를 통해 package.json을 만든다.
• $ npm install express를 통해 express 설치
• 서버 역할을 담당할 sever.js 파일 생성

// server.js

const express = require("express");
const app = express();

const PORT = 8080;

// 터미널위치를 작업중인 파일에 놓고 $ node server.js를 실행한다.
// 이후 Browser에 주소창에 localhost:8080을 입력하면 index.html을 확인할 수 있다.
app.get("/", (req, res) => {
	res.sendFile(__dirname + "/index.html");  // 현재파일위치(절대경로) + 응답으로 보낼 파일명
});

// 서버를 실행하기 위한 method
// 서버가 실행되면 "This server listening at port : 8080"을 터미널에서 확인 할 수 있다.
app.listen(PORT, () => {
  console.log(`This server listening at port : ${PORT}`);
});

• Hompage를 담당할 index.html 파일 생성
• post 요청을 위한 페이지 write.html 파일 생성

 

2. Bootstrap을 활용한 간단한 웹 페이지 UI 만들기

Bootstrap은 반응형이며 모바일 우선인 웹 프로젝트 개발을 위한 가장 인기 있는 HTML, CSS, JS 프레임워크입니다.
미리 짜인 HTML + CSS 자료를 가지고 원하는 UI를 예제 모음을 통해 손쉽게 만들 수 있다.
npm을 활용하여 Bootstrap module을 설치할 수 있지만, 여기에서는 bootstrap CDN 서버를 통해 간단한 예제 모음을 활용했다.
Browser의 호환성을 위해 bootstrap v4.4를 활용하였다.

 

• index.html 파일에 기본 Bootstrap 코드를 복붙 한다.
• bootstrap(v4.4) 사이트에서 navbar를 검색한다.
• 기본적인 틀을 만들기 위해 body tag 안에 원하는 navbar 코드를 넣어준다.
• 현재 서버가 켜있는 상태라면 ctrl + c 통해 껐다가 다시 서버를 실행한다
  • $ npm install -g nodemon 설치를 통해 저장과 동시에 서버가 자동 재실행되는 module을 추가한다
• Browser에 localhost:8080을 확인하면 bootstrap의 적용된 웹페이지를 확인할 수 있다.
• server.js 파일에 "localhost:8080/write" GET 요청 URL과, "localhost:8080/add" POST 요청을 추가한다.

const express = require("express");
const app = express();
// HTML을 통해 browser의 input 데이터를 받게 해주는 library
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
// body-parser는 input안에 적힌 내용을 해석하는 기능을 한다.

const PORT = 8080;

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

// 게시물을 올릴수 있는 페이지를 만든다.
app.get("/write", (req, res) => {
  res.sendFile(__dirname + "/write.html");
});

// HTML 파일(write.html)에서 form tag를 통해 POST 요청 기능을 추가한다.
app.post("/add", (req, res) => {
  res.send("complete data upload");
  console.log(req.body); // { title: '제목', date: '22.12.13' }
});

app.listen(PORT, () => {
  console.log(`This server listening at port : ${PORT}`);
});

• bootstrap에서 forms를 검색하여 처음 나오는 form을 write.html의 navbar 코드 밑에 넣어준다.

<div class="container mt-3">
  <!-- form tag 뒤에 action="/add" method="POST" 을 추가한다 -->
  <form action="/add" method="POST"> 
    <div class="form-group">
      <label>오늘의 할일</label>
      <!-- form tag 활용: 서버에서 input을 구분하기 위해 name='title'을 꼭 써야한다 -->
      <input type="text" class="form-control" name="title" />
    </div>
    <div class="form-group">
      <label>Due date</label>
      <!-- form tag 활용: 서버에서 input을 구분하기 위해 name='date'을 꼭 써야한다 -->
      <input type="text" class="form-control" name="date" />
    </div>
    <button type="submit" class="btn btn-danger">Submit</button>
  </form>
</div>

• form tag안에 action, method 옵션을 추가하여 POST 요청 기능을 수행할 수 있다.
• 현재 두 개의 input box가 있는데 box별로 data를 구분하기 위해 name filed를 추가한다.
• /write 페이지에서 input box에 data를 넣고 submit을 클릭하면 /add POST 요청이 활성화되고 데이터를 서버에서 받을 수 있다.

 

 

 

해당 자료는 코딩애플님의 "Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기" 자료를 기반으로 작성되었습니다.
https://codingapple.com/course/node-express-mongodb-server/