[프로젝트] 게시판 | 5. 글 작성자만 수정, 삭제 버튼 보이게 만드는 법

 

 

 

 

 

 

 

위와 같이 게시글 목록에서 글 작성자만 수정 및 삭제 기능이 보이게끔 하려고 한다.
- 로그인 유저와 글 작성자가 일치하면 버튼을 보이게 하고
- 일치하지 않으면 버튼을 보이지 않게 한다.

 

는 비교적 간단한 로직이다!

 

(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" 으로 설정할 것