mongoDB 설치 및 node.js연결하기
1.npm install mongodb@5
2.ejs 셋팅하기 : app.set('view engine', 'ejs')
const express = require('express')
const app = express()
//public 폴더 안에 있는 파일들을 등록해주어야 사용할수 있다.
app.use(express.static(__dirname+'/public'))
//ejs 셋팅하기
app.set('view engine', 'ejs')
// mongoDB 연결하기 npm install mongodb@5
const { MongoClient } = require('mongodb')
let db; //db 접속용 아이디 비번
const url = 'mongodb+srv://admin:qwer1234@cluster0.bbda3pn.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0'
new MongoClient(url).connect()
.then((client) => {
console.log('DB연결성공')
db = client.db('forum'); //내 db 이름
//db 연결 성공후 서버를 띄우는 식으로 구성하는게 좋다
app.listen(8080, () => {
console.log('http://localhost:8080 에서 서버 실행중')
})
}).catch((error) => {
console.log(err)})
app.get('/',(요청, 응답) => {
//__dirname 현재 프로젝트 파일의 경로 + 프로젝트의 실행시키고 싶은 페이지
응답.sendFile(__dirname + '/index.html' )
})
//재시작 귀찮으면 nodemon => 수정될때 마다 자동으로 업데이트 해주는 라이브러리 npm install -g nodemon
//nodemon server.js로 실행하면 저장시 바로바로 재시작 가능
// 누가 news로 접속하면 db에 뭔가 저장해보자
app.get('/news', (요청, 응답)=>{
db.collection('post').insertOne({title:'어쩌구'}) //colloction이름을 선택.insertOne({js 객체형태})
// 응답.send('오늘 비옴')
})
app.get('/shop', (요청, 응답)=>{
응답.send('쇼핑페이지입니다')
})
==> mongoDB에 설정한 접속용아이디와 비번을 사용하여 url링크를 구성한다.
원하는 db를 선택한후 연결한다. connect()
// mongoDB 연결하기 npm install mongodb@5
const { MongoClient } = require('mongodb')
let db; //db 접속용 아이디 비번
const url = 'mongodb+srv://admin:qwer1234@cluster0.bbda3pn.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0'
new MongoClient(url).connect()
.then((client) => {
console.log('DB연결성공')
db = client.db('forum'); //내 db 이름
//db 연결 성공후 서버를 띄우는 식으로 구성하는게 좋다
app.listen(8080, () => {
console.log('http://localhost:8080 에서 서버 실행중')
})
}).catch((error) => {
console.log(err)})db.collection(원하는 컬렉션 이름)을 사용하여, 원하는 컬렉션에 데이터를 저장한다.
// 누가 news로 접속하면 db에 뭔가 저장해보자
app.get('/news', (요청, 응답)=>{
db.collection('post').insertOne({title:'어쩌구'}) //colloction이름을 선택.insertOne({js 객체형태})
// 응답.send('오늘 비옴')
}) db에 저장된 데이터 가져오기
app.get('/list', async(요청, 응답) => {
let result = await db.collection('post').find().toArray()
console.log(result)
응답.send('DB에 있던 게시물')
})
특정 데이터만 가져오기
app.get('/list', async(요청, 응답) => {
let result = await db.collection('post').find().toArray()
console.log(result)
console.log(result[0].title)
응답.send(result[0].title)
})
가져온 데이터를 html 파일로 출력하기[ejs]
- template engine을 사용하면 가능하다.
- ejs 문법을 사용하면 편리함
- npm install ejs
- views 폴더안에 .ejs 파일을 만들어서 사용한다.[html과 동일하게 사용]
- app.get을 사용하여, 원하는 데이터를 가져온 후 ejs파일로 전달한다.(render사용)
- ejs 파일 안에서 <%=데이터이름%>
app.set('view engine', 'ejs')
//ejs를 셋팅한다.
ejs 코드
/list 페이지에 render하기, ejs 파일은 sendFile이 아니라 render() 사용한다.
app.get('/list', async(요청, 응답) => {
let result = await db.collection('post').find().toArray()
응답.render('list.ejs')
//응답은 한개만 작성가능, 여러개 작성하면 첫줄만 실행됨
})
서버데이터를 ejs 파일에서 렌더링하기
응답.render(’데이터를 보낼파일’, { key : ‘보낼데이터’} )
app.get('/list', async(요청, 응답) => {
let result = await db.collection('post').find().toArray()
응답.render('list.ejs', { 글목록 : result})
//데이터를 보낼 파일, 보낼 데이터 Object 형으로 전달
//응답은 한개만 작성가능, 여러개 작성하면 첫줄만 실행됨
})
ejs에서 렌더링하기
단순히
<%=key %> 형식으로 사용하게 되면 데이터가 깨지므로
JSON.stringify(key) 함수를 사용하여 자바스크립트 코드를 JSON 문자열로 변환해주어야한다.
<!-- html 파일인데 서버파일을 집어넣을수 있다는 차이가 있음 -->
<body class="grey-bg">
<%= JSON.stringify(글목록) %>
<div class="white-bg">
<div class="list-box">
<h4><%= 글목록[0].title %></h4>
<p>글내용임</p>
</div>
<div class="list-box">
<h4>글제목임</h4>
<p>글내용임</p>
</div>
</div>
</body>
반복문으로 표현하기
<% %> : ejs 안에서 자바스크립트 문법을 사용할수 있다.
<% for (var i = 0; i < 3; i++){ %>
<h4>안뇽</h4>
<% } %> (list.ejs)
<body class="grey-bg">
<% for (var i = 0; i < 글목록.length; i++){ %>
<div class="white-box">
<div class="list-box">
<h4><%= 글목록[0].title %></h4>
<p>글내용임</p>
</div>
</div>
<% } %>
</body>
html을 조립식으로 첨부하기(include)
nav바 등 필요한 부분 파일로 생성
(views/nav.ejs)
<div class="nav">
<a class="logo">Appleforum</a>
<a>page1</a>
<a>page2</a>
</div>사용하고 싶은 파일에
<%- include(’ejs파일’) %>로 사용할수 있다.
<!-- html 파일인데 서버파일을 집어넣을수 있다는 차이가 있음 -->
<body class="grey-bg">
<%- include('nav.ejs')%>
<% for (var i = 0; i < 글목록.length; i++){ %>
<div class="white-box">
<div class="list-box">
<h4><%= 글목록[0].title %></h4>
<p>글내용임</p>
</div>
</div>
<% } %>
</body>🎇SSR server side rendering 서버사이드 렌더링 방식임
요새 유행은 다시 ssr로 가는중
