mongoDB 사용법에 대해서는 따로 글을 남기지 않는다.
나는 강의에 따라 forum이라는 collection을 만들고, 그 안에 post라는 document를 만들어서 사용했다.
출력을 위해 ejs 라이브러리를 설치하였고,
(셋팅은 server 코드 상단에 서버이름.set('view engine', 'ejs')라고 넣어주면 된다.)
db연결 시 서버를 열어주면 식으로 코드를 작성해야 한다.
db에 접근할 때에는 async, await 키워드를 사용해서 비동기로 접근해야 한다.
키워드나 메소드는 이전 글에서 설명했기 때문에,
전체 코드를 살펴보고,
이해가 안된다면 공식문서를 참고하거나 구글에 검색해보도록 하자.
서버 코드
const express = require('express');
const { MongoClient } = require('mongodb');
const app = express();
const PORT = 8080;
app.set('view engine', 'ejs');
let db;
const url =
'mongodb+srv://[Database Access ID]:[Database Access PW]@[Cluster Name].ruwth8d.mongodb.net/?retryWrites=true&w=majority&appName=[Collection Name]';
new MongoClient(url)
.connect()
.then((client) => {
console.log('DB 연결 성공');
db = client.db('forum');
app.listen(PORT, () => {
console.log(`서버가 http://localhost:${PORT} 에서 실행 중입니다`);
});
})
.catch((err) => {
console.log('DB 연결 실패:', err);
});
app.get('/list', async (req, res) => {
try {
let result = await db.collection('post').find().toArray();
res.render('list', { posts: result });
} catch (err) {
console.log('데이터베이스 오류:', err);
res.status(500).send('서버 오류');
}
});
서버 코드에서 list.ejs 파일에 db에서 가져온 데이터를 넘겨주도록 작성해놓았다.
데이터를 사용할 때에는 ejs 문법을 활용해서 데이터를 넣어주면되는데
<%= [Data Name] %> 이런 형태로 사용하면 직접 넣을 수 있고,
javascript 문법을 대부분 그대로 적용할 수 있어서
아래 코드를 보면 for문의 시작과 끝 부분(js문법이 들어가는 모든 열)을 <% %>이걸로 감싸주면 된다.
세번째로 <%- %> 으로 감싸서 사용하는 문법도 있다.
ejs문법 요약
1. 문자 그대로 or 데이터 1개를 삽입하고 싶을 때 : <%= %>으로 감싼다.
2. 해석 된 코드의 형태로 삽입하고 싶을 때 : <%- %>으로 감싼다.
(include 메소드를 사용했을 때 %-으로 하면 nav.ejs파일에 만들어 둔 navbar가 그대로 출력되고,
%=으로 하면 nav.ejs 파일에 들어있는 html 코드가 그대로 출력된다.)
3. javascript 반복문, 조건문 등 사용하고 싶을 때 : <% %>으로 코드가 들어간 열들을 감싼다.
- 상세 내용은 공식 문서나 아래 코드를 보고 파악해보도록 하
list.ejs 코드
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>게시물 리스트</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body class="grey-bg">
<%- include('nav.ejs') %>
<!-- 두번째 인자로 객체 데이터 전달할 수 있음 -->
<!-- -랑 = 차이는 =는 html을 그대로 문자로 출력함 -->
<div class="white-bg">
<% for (let i = 0; i < posts.length; i++){ %>
<div class="list-box">
<h4><%= posts[i].title %></h4>
<p><%= posts[i].content %></p>
</div>
<% } %>
</div>
</body>
</html>
'Node.js' 카테고리의 다른 글
| nodejs express CRUD 만들기 2(READ) (0) | 2024.08.06 |
|---|---|
| nodejs express CRUD 만들기 1(CREATE) (0) | 2024.08.06 |
| express 라이브러리 이용해서 서버 만들기 (0) | 2024.08.01 |
| NPM (0) | 2024.01.14 |
| node.js - npm 프로젝트 시작하기 (1) | 2024.01.14 |