반응형
어디 블로그를 뒤져봐도 Angular의 가장 최신버전에서 Node.js로 DB연동해서 작은 게시판을 만드는 튜토리얼같은 예제가 없고 복사 붙여넣어봐도 제대로 작동하지 않아서 외국 사이트들을 뒤져보다가 발견한 후 최대한 분석하면서 공부해봤다.
한국에서 Angular의 시장은 크지 않지만 그래도 아예안쓰는 것도 아닌데 왜이렇게 공부할 예제가 없는지모르겠지만 내가 찾고 직접 해보면서 작성하면 되지않는가 싶었습니다.
아마 저처럼 Angular를 이용해서 미니 게시판을 만들어 보며 공부하고싶은 사람들이 있을것같아 주석도 최대한 달면서 작성해봤으니 같이 공부 해봅시다!
기본 셋팅
- 일단 기본적으로 어떤것을 사용하는지 알아봐야하는데 가장 인기있는 Node.js 웹 프레임 워크 Express
- 당연하게도 Node.js는 기본적으로 깔고 사용해야한다.
- Angular12버전 가장 최신버전으로 진행할것이다
- 많은 IDE들이 있지만 저는 코드에디터인 VSCode로 사용할것입니다.
- 필요없을지도 모르겠지만 그래도 GUI로 확인하기위한 MongoDBC Compass
위 상황들이 준비되면 다음은 완전히 새로운 폴더를 만들어서Open해준다
폴더설정(프로젝트설정)
- 이후 ctrl+shift+` 를 사용하여 터미널을 열고 아래 명령어를 입력한다.
//디렉토리 생성 명령어 mkdir nodejs-express-mongodb // 디렉토리접근 cd nodejs-express-mongodb - 그렇게하면 빈 폴더하나가 생성될텐데 그 다음은 아래 명령어를 입력하면 패키지 이름부터 나올건데 의미가 있는건 그렇게 많지않다(많은가?) package.json을 만들어주는걸뿐
npm init Press ^C at any time to quit. package name: (nodejs-express-mongodb) // 안건들여도됨 version: (1.0.0) // 안건들여도됨 description: // Node.js Restful CRUD API with Node.js, Express and MongoDB 이렇게 작성 entry point: (index.js) server.js // server.js만 넣으면됨 test command: // 안건들여도됨 git repository: // 안건들여도됨 keywords: // nodejs, express, mongodb, rest, api 이렇게작성 author: issac // 내이름 license: (ISC) // 안건들여도됨 Is this ok? (yes) // yes라고 하세요 - 그리고 웹프레임워크인 Express와 MongoDb프레임워크인 mongoose와 cors를 설치하기위해 다음과같은 명령어를 입력합니다!
npm install express mongoose cors --save - 여기까지하면 폴더현황
이제 서버용작업을 위한 가독성을 높이기위해 폴더에 맞춰 정리할건데 js파일들이라서 그냥 미리 만들어놓으면 밑에서 따라오기 쉬울것 같다.
Express에서 웹 서버 설정파일 작업
- server.js파일에 아래와 같은 코드를 작성합니다.
-
// express와 cors 모듈 가져오기 const express = require("express"); const cors = require("cors"); // app에다가 express메서드 저장하기위해 선언 const app = express(); var corsOptions = { origin: "http://localhost:8081" }; app.use(cors(corsOptions)); // application/json 메서드저장 app.use(express.json()); // application/x-www-form-urlencoded 메서드저장 app.use(express.urlencoded({ extended: true })); // 기본 라우터(localhost:8080에 접속하면 뜨는 첫 화면) app.get("/", (req, res) => { res.json({ message: "Welcome to issac application." }); }); // 포트설정과 요청받는곳 const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); });
여기까지 하셨으면 테스트를 위해 아래 명령어를 터미널에 입력하고 서버가 켜진걸 확인한다!
node server.js
해당 화면이 나왔으면 초기 서버설정은 끝났습니다.
MongoDB 연결하는 Mongoose 설정 작성
- Mongoose를 이용해서 데이터베이스와 서버를 연결해서 RestAPI형식으로 데이터를 처리하게할거다
- db.config.js에는 아래와같은 코드를 작성하면되는데 그냥 DB명을 작성하는것이다.
// 몽고디비 mongodb://localhost:27017/ 로컬호스트와 포트번호 이후는 db명설정입니다. module.exports = { url : 'mongodb://localhost:27017/issac_db' //본인이하고싶은 db이름 }
- index.js로 Mongoose기본 설정을 적용하는것
const dbConfig = require("../config/db.config.js");
const mongoose = require("mongoose");
mongoose.Promise = global.Promise;
const db = {};
db.mongoose = mongoose;
db.url = dbConfig.url;
db.tutorials = require("./tutorial.model.js")(mongoose);
module.exports = db;
- 위 코드가 작성되면 server.js에 아래 코드를 추가하여서버와 db를 연결해야합니다!
// db접속과 모든 설정을 받아오기
const db = require("./app/models");
db.mongoose
.connect(db.url, {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => {
console.log("Connected to the database!");
})
.catch(err => {
console.log("Cannot connect to the database!", err);
process.exit();
});
- Mongoose설정을 위해 ttorial.model.js에 아래 코드 작성
module.exports = mongoose => { var schema = mongoose.Schema( { title: String, description: String, published: Boolean }, { timestamps: true } ); schema.method("toJSON", function() { const { __v, _id, ...object } = this.toObject(); object.id = _id; return object; }); const Tutorial = mongoose.model("tutorial", schema); return Tutorial; }; - 마지막으로 컨트롤러를 만들어서 CRUD함수를 이용할수 있게하기위해 tutorial.controller.js 에 아래 코드를 작성하면됩니다.
const db = require("../models"); const Tutorial = db.tutorials; // 튜토리얼DB 작성과 저장 exports.create = (req, res) => { // Validate request if (!req.body.title) { res.status(400).send({ message: "Content can not be empty!" }); return; } // 샐로운 튜토리얼 작성 const tutorial = new Tutorial({ title: req.body.title, description: req.body.description, published: req.body.published ? req.body.published : false, }); // DB에 저장 tutorial .save(tutorial) .then((data) => { res.send(data); }) .catch((err) => { res.status(500).send({ message: err.message || "Some error occurred while creating the Tutorial.", }); }); }; // DB에서 튜토리얼을 모두 조회 exports.findAll = (req, res) => { const title = req.query.title; var condition = title ? { title: { $regex: new RegExp(title), $options: "i" } } : {}; Tutorial.find(condition) .then((data) => { res.send(data); }) .catch((err) => { res.status(500).send({ message: err.message || "Some error occurred while retrieving tutorials.", }); }); }; // 특정 id로 DB에서 튜토리얼 불러오기 exports.findOne = (req, res) => { const id = req.params.id; Tutorial.findById(id) .then((data) => { if (!data) res.status(404).send({ message: "Not found Tutorial with id " + id }); else res.send(data); }) .catch((err) => { res .status(500) .send({ message: "Error retrieving Tutorial with id=" + id }); }); }; // 요청이 들어온 ID에대한 DB 업데이트 exports.update = (req, res) => { if (!req.body) { return res.status(400).send({ message: "Data to update can not be empty!", }); } const id = req.params.id; Tutorial.findByIdAndUpdate(id, req.body, { useFindAndModify: false }) .then((data) => { if (!data) { res.status(404).send({ message: `Cannot update Tutorial with id=${id}. Maybe Tutorial was not found!`, }); } else res.send({ message: "Tutorial was updated successfully." }); }) .catch((err) => { res.status(500).send({ message: "Error updating Tutorial with id=" + id, }); }); }; // 요청을 받은 ID에대한 DB삭제 exports.delete = (req, res) => { const id = req.params.id; Tutorial.findByIdAndRemove(id) .then((data) => { if (!data) { res.status(404).send({ message: `Cannot delete Tutorial with id=${id}. Maybe Tutorial was not found!`, }); } else { res.send({ message: "Tutorial was deleted successfully!", }); } }) .catch((err) => { res.status(500).send({ message: "Could not delete Tutorial with id=" + id, }); }); }; // 모든 DB 삭제 exports.deleteAll = (req, res) => { Tutorial.deleteMany({}) .then((data) => { res.send({ message: `${data.deletedCount} Tutorials were deleted successfully!`, }); }) .catch((err) => { res.status(500).send({ message: err.message || "Some error occurred while removing all tutorials.", }); }); }; // 게시되어있는 모든 DB불러오기 exports.findAllPublished = (req, res) => { Tutorial.find({ published: true }) .then((data) => { res.send(data); }) .catch((err) => { res.status(500).send({ message: err.message || "Some error occurred while retrieving tutorials.", }); }); };
이후는 2편으로 작성하겠습니다 고생하셨습니다!
반응형