Project/축구모임 홈페이지개발
[축구모임 홈페이지개발] 01/14 개발일지 Nodejs
한33
2024. 1. 15. 01:11
문제가 생겼다.
일단 지금 디자인도 구현을 어느정도 해냈고, 기능을 추가하고 있는데 공지 탭처럼 글과 댓글을 가져올 때 :id 값을 주소에 띄우고 그 값을 param 으로 가져와서 해당 댓글과 글 정보를 가져왔었다.
근데 인스타처럼 한 번에 보여지려고 하다보니까 어떻게 해야할지 고민중이다.
일단 당장 생각나는 것은 param 으로 id 값을 가져오는 게 아니라 display : none; 으로 설정을 해놓고 게시글에 id 값을 지정을 해놓고 그 id 값을 기준으로 가져오면 되지않을까 한다.
또 글이 점점 쌓이면 로딩이 오래걸리게 될텐데 이를 페이스북이나 인스타그램처럼 어느 정도 글만 먼저 로딩해오고 추가로 아래방향으로 스크롤을 할 시에 로딩을 더 하는 식으로 해볼 수 있으면 좋을 것 같다.
제일 처음 스와이프를 하면 인식을 하지 않고 한 번은 next 또는 prev 버튼을 눌러야 넘어가는 오류가 있었다.
그래서 script 에
document.addEventListener('DOMContentLoaded', function () {
var myCarousel = new bootstrap.Carousel(document.querySelector('#carouselExampleIndicators'), {
interval: false, // 자동 슬라이드 비활성화
touch: true // 터치로 스와이프 활성화
});
});
위를 추가해줘서 해결을 해줬다.
<form action="/photo-comment" method="POST">
<input name="parentId" value="<%= 포토[i]._id%>" style="display: none;">
<div id="story-photo-add-comment-input-area0" style="display: none;">
<div id="story-photo-add-comment-input-area" class="story-photo-add-comment-input-area">
<input name="content" class="story-photo-add-comment-input" type="text" autocomplete="off">
<button type="submit" class="story-photo-add-comment-inputBt">게시</button>
</div>
</div>
</form>
app.post('/photo-comment', async (req, res) => {
await db.collection('photo-comment').insertOne({
content: req.body.content,
writerId: new ObjectId(req.user._id),
writer: req.user.username,
parentId: new ObjectId(req.body.parentId)
})
res.redirect('back')
}
)
<% if (typeof 포토[i].comments !=='undefined' ) {%>
<% for (let comment of 포토[i].comments) { %>
<div style="display: flex; align-items: baseline;">
<div class="story-photo-comment-writer">
<strong>
<%=comment.writer%>
</strong>
</div>
<span class="story-photo-comment-text">
<%=comment.content%>
</span>
<div class="story-photo-comment-deleteBt">x</div>
</div>
<% } %>
<% } %>
app.post('/photo-post', async (req, res) => {
const timeZone = 'Asia/Seoul';
let Today = new Date().toLocaleDateString('ko-KR', { timeZone });
let Time = new Date().toLocaleString('ko-KR', { timeZone });
upload.array('img1',10)(req, res, async (err) => {
if (err) return res.send('업로드에러')
try {
if (req.body.title == '') {
res.send('제목입력안했음')
} else {
const imageArray = req.files.length > 0 ? req.files.map(file => ({ filename: file.filename, location: file.location })) : [];
await db.collection('photo').insertOne(
{
today: Today,
time : Time,
content: req.body.content,
img : imageArray,
user: req.user._id,
username: req.user.username
}
)
res.redirect('/photo')
}
} catch (e) {
console.log(e)
res.status(500).send('서버에러남')
}
})
})
app.get('/photo', this.isLoggedIn, async (req, res, next) => {
try {
let result = await db.collection('photo').aggregate([
{
$lookup: {
from: 'photo-comment',
localField: '_id',
foreignField: 'parentId',
as: 'comments'
}
},
{
$sort: {
_id: -1
}
}
]).toArray();
console.log(result.comments);
res.render('photo.ejs', { 포토: result });
} catch (error) {
console.error(error);
next(error);
}
});