728x90
위와 같이 게시글 목록에서 글 작성자만 수정 및 삭제 기능이 보이게끔 하려고 한다.
- 로그인 유저와 글 작성자가 일치하면 버튼을 보이게 하고
- 일치하지 않으면 버튼을 보이지 않게 한다.
는 비교적 간단한 로직이다!
(list.ejs)
<div style="display: none" class="listWriterId">
<%=글목록[i].user %>
</div>
<a href="/edit/<%=글목록[i]._id %>" class="editBtn">✏️ 수정</a>
<span
class="deletePost"
data-postid="<%=글목록[i]._id %>"
data-userid="<%=글목록[i].user%>"
>
🗑️ 삭제
</span>
<!-- 중략 -->
<script>
let deleteBtns = document.querySelectorAll('.deletePost');
deleteBtns.forEach((btn, index) => {
let writerIds = document.querySelectorAll('.listWriterId');
let writerId = writerIds[index].textContent;
let editBtns = document.querySelectorAll('.editBtn');
let editBtn = editBtns[index];
// 공백대비해서 trim() 처리 해주기
// 글 작성자만 수정, 삭제 버튼 보이게 하기
if ('<%= loginUser %>' == writerId.trim()) {
btn.style.display = 'inline';
editBtn.style.display = 'inline';
} else {
btn.style.display = 'none';
editBtn.style.display = 'none';
}
<!-- 중략 -->
트러블 슈팅
- if ('<%= loginUser %>' == writerId.trim()) {
- 이 부분에서 처음에는 trim()을 사용하지 않고 두 값을 비교했더니 원하는 결과가 나오지 않았다. (모든 버튼이 보이지 않는것으로 보아 어떤 방향으로든 두 값이 일치 하지 않는 결과를 내었다.)
<div style="display: none" class="listWriterId">
<%=글목록[i].user %>
</div>
- 위 부분에서 줄바꿈이 되면서 혹시 공백이 생기나 싶어 공백 없이 적용하려했으나 prettier 자동 적용됨 (흠..)
- 어쨋든.. 정확한 이유는 모르겠지만 혹시 모를 상황을 대비해 trim()으로 공백 제거후에 비교하는 것은 좋은 습관인 것 같다.
복습한 점
display = 'block' 으로 설정하면 아래와 같이 block 요소가 되면서 한 줄을 전체 차지하게 된다.
원하는 대로 한 줄에 모두 구현하려면 display="inline" 으로 설정할 것
728x90
반응형