📌 오늘의 내용
오늘은 ODM을 활용한 데이터를 저장,조회를 다뤄보고 스크래핑 기능까지
배우고 간단한 실습을 해보았다
오늘의 내용에 대해 알아보자!
mongoose(ODM)
어제 배운 NoSql을 쉽게 사용하게 해주는 도구인 ODM의 한 종류인 몽구스를 사용해 보자!
$ yarn add mongoose -> 몽구스 설치// board.model.js
import mongoose from 'mongoose'
const boardSchema = new mongoose.Schema({
writer: String,
title: String,
contents: String
})
export const Board = mongoose.model("Board", boardSchema)위 예제 코드처럼 model메소드와 Schema 메소드를 사용하면된다!
model -> 담는 통
Schema -> 구조
위 사진은 schema 데이터 타입 종류이다!
get 데이터 조회
mongoose를 Import하여 적용 시킨 후 get api를 통해 조회 해보자!
// index.js
import express from "express";
import cors from "cors";
import { Board } from './models/board.model.js'
const app = express()
app.use(cors())
app.use(express.json())
mongoose
.connect("mongodb://my-database:27017/myDocker")
.then(() => console.log("db접속에 성공하였습니다."))
.catch(() => console.log("db접속에 실패하였습니다."));
app.get('/boards', async (req, res) => {
const result = await Board.find()
res.send(result)
})post 데이터 등록
조회를 해보았으니 데이터 등록도 해보자!
import express from "express";
import cors from "cors";
import { Board } from './models/board.model.js'
const app = express()
app.use(cors())
app.use(express.json())
mongoose
.connect("mongodb://my-database:27017/myDocker")
.then(() => console.log("db접속에 성공하였습니다."))
.catch(() => console.log("db접속에 실패하였습니다."));
app.get('/boards', async (req, res) => {
const result = await Board.find()
res.send(result)
})
app.post('/boards', async (req, res) => {
console.log(req.body);
// 1. 데이터를 등록하는 로직 => DB에 접속해서 데이터 저장하기
const board = new Board({
writer: req.body.writer,
title: req.body.title,
contents: req.body.contents,
});
await board.save();
// 2. 저장 결과 응답 주기
res.send('게시물 등록에 성공하였습니다!!');
});mongoose debug
몽구스를 사용해 실행 된 NoSql문을 확인 할 수 없을까?
몽구스의 debug 기능을 사용하면 가능하다!
// index.js
mongoose.set("debug", true);debug할 파일에 위의 한 줄을 추가 해주면 된다!
Mongoose: phonetokens.findOne({ phone: '010123123' }, {})위 처럼 터미널에서 Mongoose를 활용한 NoSql문을 확인 할 수 있다
Docker-compose의 volumes
로컬 파일을 고칠때 마다 build 해주어야 할까?
nodemon처럼 자동으로 리프레쉬 해줄수 없을까?
가능하다 docker-compose 파일인 .yaml 파일에
volumes를 사용해 도커와 공유할 파일을 적어주면 된다!
version: '3.7'
# 컴퓨터들
services:
# 컴퓨터이름
my-backend:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./index.js:/myfolder/index.js
- ./email.js:/myfolder/email.js
ports:
- 4000:4000
# 컴퓨터이름
my-database:
image: mongo:5
ports:
- 27017:27017스크래핑
스크래핑은 말 그대로 스크랩 한다는 뜻이다
어떤 특정한 웹 사이트에 가서 그 사이트의 HTML 정보를 긁어오는 것을 말한다 긁어온 정보를 DB에 저장해 놓는다면 활용하기 편리하다!
슬랙이나 카톡을 사용할 때, 링크를 공유하면 밑에 자동으로 사이트의 소개와 이미지가 나옵니다!
프론트엔드나 백엔드에서 직접 사이트에 가서 정보를 가져오는 것입니다.
스크래핑 기능을 활용해 위 예제사진처럼 만들어 보자!
import Cheerio from "cheerio";
import axios from "axios";
const createMessage = async (myMessage) => {
// 1. 입력된 메시지에서 http로 시작하는 문장이 있는지 먼저 찾기(.find() 등의 알고리즘 사용하기)
const url = "https://www.naver.com";
// 2. axios.get으로 요청해서 html 코드 받아오기 => 스크래핑
const result = await axios.get(url);
// console.log(result.data);
// 3. 스크래핑 결과에서 OG(오픈그래프) 코드를 골라내서 변수에 담기 => cheerio 도구 사용
const $ = Cheerio.load(result.data);
const ogObj = {}
$("meta").each((index, el) => {
if ($(el).attr("property") && $(el).attr("property").includes("og:")) {
const key = $(el).attr("property"); // ex) og:title
const value = $(el).attr("content"); // ex) 네이버
ogObj[key] = value
}
});
return ogObj
};
http가 포함된 URL이 있다면, 그 사이트에 접속해서 open graph가 있는 내용을 긁어와서 저장합니다.
많은 html 태그중 OG(오픈그래프) 코드를 골라내기 위해 cheerio 도구를 사용하였다!
브라우저 주소창의 이해
브라우저의 주소창은 Api의 get 요청이다
받아오는 데이터가 html이면 브라우저에서 html코드를 인식해서 보여주고
json 데이터 즉 텍스트면 텍스트 그대로 보여준다
실제 우리가 보는 네이버도 naver의 get 요청으로 받아온 html 을 읽고 그려주는 것이다!
하루를 마치며:)
이렇게 배운 내용을 통해 간단한 미니프로젝트를 진행하느라 TIL이 밀렸다.. 그래도 프로젝트를 무사히 완성하고! 밀렸지만 작성했으니 만족한다 ~~
https://github.com/jeongheejun/mini-project
