👨🏻💻 오늘의 알고리즘 공부
변수.toString()
: 변수가 아닌 숫자열 등은 toString()은 문자열로 변환이 안됨
: 오로지 변수에만 해당되는 매서드
reverse()
: 문자열 순서 반전 기능
👨🏻💻 오늘의 강의 내용
mongoose(ODM)을 활용한 데이터 저장/조회
mongoose는 데이터 객체 를 mongodb에 저장/조회할 수 있게 도와준다
이 모든 것을 진행하기 위해선 모델을 만들어야 함. 쉽게 실습에서 했던 것을 예를 들어 이야기하면 express로 연 서버에 collection을 담을 통(model)을 만들어야 함
몽구스에서 제공해주는 스키마( = 구조)기능을 바탕으로! 만든 후 API를 통해 받은 데이터를 객체 형식으로 통에 담고 통을 통해서 데이터베이스로 전달(조회하기/등록하기..가능)
// models 폴더 따로 하나 만들고 관리하는 게 좋음 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)get 데이터 조회
: 해당 데이터 파일을 데이터베이스로부터 가져와 사용할 수 있게 해줌!!
import { Board } from './models/board.model.js'
const app = express()
app.use(cors())
app.use(express.json())
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerJsdoc(options)));
app.get('/boards', async (req, res) => {
// 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기
const result = await Board.find()
// 2. 꺼내온 결과 응답 주기
res.send(result)
}): 위 코드는 해당 Board collection을 가져와 사용할 수 있도록 result 라는 변수에 담아 응답으로 내보내 주는 코드
: find는 보통 모든 데이터를 조회할 때 사용되며, findOne 은 특정 데이터만 조회할 때 자주 사용!!!!
const result = await Board.findOne({objectkey:value})
// {찾으려는 값 객체 형태}로 넣기post 데이터 등록
//index.js
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(); // board라는 collections에 저장
// 2. 저장 결과 응답 주기
res.send('게시물 등록에 성공하였습니다!!');
});: /board endpoint를 지정해서 POST 요청을 받았을 때 JSON 데이터를 담은 BODY에서 각각의 요소를 하나하나 빼와서 연결해 놓은 mongoDB의 boards collection에 저장
mongoose의 디버그 모드
mongoose를 이용하면 query문을 입력할 필요 없이 간단하게 코드를 입력할 수 있는데, 해당 mongoose 코드(Board.find())를 mongo DB코드(db.board.find())로 변경 결과를 볼 수 있게 해줌
index.js 퍄일에 mongoose.set("debug", true) 입력
mongoose.set("debug",true)mongoose의 숨겨진 비밀
mongo db 내 ‘__V’ 는 몽구스를 통해서 저장시켰을 때 생기는 건데 버전 번호를 의미한다. 배열 수정시 _v 증가함!
Q. mongoose schema랑 mongo DB는 연동이 되는지?
백엔드에서 데이터 저장할 때 모델이라는 통(schema)을 만들고 여기에 데이터를 저장해서 mongoose를 통해 mongo DB로 보냄!
데이터를 mongo db로 보낼 때 schema(=틀)을 잡아주었음.
다시 말해, mogoose는 틀을 잡고 보내주는 역할만 하는거임mongoDB compass에서는 틀을 벗어난 데이터를 mongo DB에 등록 가능
= schemaless (mongodb는 schema가 없다)mongoose가 틀을 만들어 주는 역할을 하는 것이다
Docker-compose의 volumes
로컬 컴퓨터에서 js 파일을 수정할 때마다 해당 docker 컴퓨터를 built하는게 넘 귀찮고 번거로움! 하지만 우리 local 컴퓨터로는 docker 컴퓨터 내 nodemon을 이용할 수 없음
why?
토커컴퓨터 내부에서 nodemon이 켜져 있기 때문에! 로컬 컴퓨터에서 아무리 수정해봤자 노드몬 작동이 안됨.
도커 컴퓨터 내부로 들어가서(docker exec) 직접 수정하면(터미널 vi index.js) nodemon이 리프레쉬 해줌!
하지만 docker 컴퓨터와 내 VS code 간에 파일 공유를 하게 되면 즉각적으로 리프레쉬 할 수 있음
그게 바로 docker volumes
docker volumes
: VS code 수정하게 되면 docker도 따라서 변경됨! 도커를 수정해도 VS code가 변경됨!!
: volumes을 통해 로컬의 소스코드와 docker내의 소스코드를 공유할 수 있다는 말!!
적용 조건
1. 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
: docker-compose.yaml 파일에 공유할 파일을 위처럼 작성
: 앞의 파일명은 내 로컬 내에서 공유할 파일이름 / 뒤는 docker 컴퓨터 내 파일명
2. docker 컴퓨터 내 변경 사항 감지하고 리프레쉬 시킬 노드몬 설치
scraping
: 어떤 특정한 웹 사이트에 가서 그 사이트의 HTML을 '한번' 긁어서 가져오는 것
: 결국 웹 페이지 주소창의 원리는 axios.get요청을 통해 html코드를 받아오는 것과 같다 = scraping도 이 원리를 이용
: DB에 저장 후 이용
그렇다면 언제 사용될까?
: 카톡이나 슬랙을 사용할 때!
: 링크를 공유하면 밑에 자동으로 사이트의 소개와 이미지가 나오는데, 이는 프론트엔드나 백엔드에서 직접 사이트에 가서 정보를 가져오는 것이다.
: 유저가 게시글을 작성해서 등록할 때, 백엔드 API로 글의 내용을 보내주게 되는데,
이때, 글의 내용에 http가 포함된 URL이 있다면, 그 사이트에 접속해서open graph가 있는 내용을 긁어와서 저장하는 방식!
나중에 글의 상세보기를 할 때, 위의 네이버 예시처럼 사이트 소개를 같이 보여줌
: scaping을 도와주는 도구로는 Cheerio가 있다!
: 하지만 다른 사이트를 무단으로 가져오면 법적인 문제가 될 수 있으니 주의하자!
: 반드시 사용되야 할 때는 바로~ 오픈그래프 사용할때!
crawling
: 스크래핑을 정기적으로 반복적/여러번 하는 것을 의미
Puppetteo
웹 서비스 작동원리(브라우저)
브라우저 주소창의 이해
: rest API get 요청(http)!과 동일하다
: 다른 사이트 정보를 가져오는 것
: 쉽게 말해 브라우저 주소창 작동원리는 '포스트맨'과 동일
: 받아온 결과,응답이 html이면 html을 추출해서 css 추가하면서 그림형태로 이쁘게 만들어주는게 크롬 개발자다!
Curl: 터미널 입력창에서 포스트맨처럼 이용할 수 있는 것 (curl http://주소/qqq/3)
open graph
: head 태그 안에 meta 태그들이 있고, 그 중에서 property가 og로 시작하는 태그
: 덕분에 주소만 입력해도 알아서 멘트와 그림이 같이 출력됨
: 제공자(네이버 개발자) 메타 태그에 어떤 정보를 보여줄 것인지 지정
/ 사용자(개발자) og가 들어가 있는 값들 찾아서 보여주는 역할을 함
: 즉 Axios 통해서 결과 받아온 것 result에 담아서 원하는 정보만 이용
: 어떻게 다른 사람들이 쓴 글을 공유할 수 있을까? 에서 시작된 것임
오픈그래프 요청을 어디서 해야하는가?
= 백엔드에서 하는것이다.why???
Axios get으로 요청을 하지만,CORS문제 로 처리가 안될 수도 있음. 그렇기 때문에
대부분 proxy 서버를 통해 백엔드에서 하는게 일반적이다
cheerio
: 스크래핑을 쉽게 도와주는 라이브러리
: html 파일에서 og,오픈 그래프 값만 찾아서 쉽게 추출해줌
설치법
yarn add cheerio받아온 데이터 html 데이터를 cheerio에 넘겨줌
const $ = cheerio.load(html.data)
URL의 HTML 코드를 보면 meta 태그에는 property와 content속성이 있음
이 둘을 걸러내기 위한 코드 작성
//index.js
import axios from 'axios'
import cheerio from 'cheerio'
const createMessage = async () => {
// 입력된 메시지: "안녕하세요~ https://www.naver.com 에 방문해 주세요!"
// 1. 입력된 메시지에서 http로 시작하는 문장이 있는지 먼저 찾기!(.find() 등의 알고리즘 사용하기)
const url = "https://www.daum.net"
// 2. axios.get으로 요청해서 html코드 받아오기 => 스크래핑
const result = await axios.get(url)
console.log(result.data)
// 3. 스크래핑 결과(result)에서 OG(오픈그래프) 코드 골라내서 변수에 저장하기
const $ = cheerio.load(result.data)
$("meta").each((i, el) => {
if($(el).attr("property") && $(el).attr("property").includes("og:")){
const key = $(el).attr("property") // og:title, og:description, ...
const value = $(el).attr("content") // 네이버, 네이버 메인에서 ~~~
console.log(key, value)
}
})
}
createMessage()attr함수와 each함수 참고해보기
https://cheerio.js.org/docs/api/classes/Cheerio#attr
서버실행 후 console.log를 통해 key와 value를 확인해보면 아래와 같이 출력
꿀 단축키
- command + shift + L : 전체 커서 생성!!
- alt 누르고 커서 클릭 클릭하면 커서 여러개 만들어줌
- alt 누르고 방향키 이동하면 위아래 순서 조절 가능
- command + shift + K : 한 줄 삭제
