✔️오늘 한일!
- 알고리즘 문제풀이
- localstorage에 로그인 정보 key, value값 저장기능
- 리뷰 작성기능
- 해당 value값의 리뷰만 삭제가 가능한 기능 (임시)
- 코드 작성 후 팀원과 리뷰해보고 좀 더 효율적인 코드로 변경
발생한 문제
처음 작성한 printReview 함수를 실행했을때 각 li 태그마다 삭제 버튼이 생성이 되어야 하고 버튼 클릭 시 localstorage에 쌓인 데이터도 같이 삭제를 해주어야하는데 하나의 li 태그에 삭제버튼이 누를때마다 붙고 local 데이터도 삭제가 안되는 상황이였다.
section.innerHTML += `<ul>
<li class="review" data-rid="${user.rid}">${user.review}
<button id="modify-btn">수정</button>
</li>
</ul>`;
const button = document.createElement("button");
const li = document.querySelector(".review");
li.id = user.rid;
button.innerText = "삭제";
li.appendChild(button);
button.addEventListener("click", del);section 블록을 만들어서 innerHTML로 붙이는 방법으로 해봤는데 위 코드는 하나의 li태그에 삭제버튼이 전부다 붙는 문제도 있었지만 마지막 삭제버튼만 활성화가 되어 있고 클릭 시 버튼이 다삭제가 되는 문제가 있어 appendChild를 사용하지 않고 직접 html로 붙이고 클래스 선택자로 반복을 돌려보면 어떨까 싶어 아래와 같이 수정해봤다.
section.innerHTML += `<ul>
<li class="review" data-rid="${user.rid}">${user.review}
<button id="modify-btn">수정</button>
<button class="delete-review>삭제</button>
</li>
</ul>`;
const deleteReview = document.querySelectorAll(".delete-review");
deleteReview.forEach((a) => {
a.addEventListener("click", del);
});이번엔 각 li마다 삭제버튼이 붙었지만 삭제버튼을 클릭하면 전체가 다 삭제되는 문제가 발생하였다. 밤늦게 까지 시도해보느라 어떤게 문제였는지 생각을 해볼 시간이 없어서 추후 생각해보기로 하고 이것저것 시도해보다 제일 처음에 작성했던 방법으로 코드를 변경해보기로 했다.
해결방법
setAttribute로 ul과 li에 속성을 부여하고 appendChild로 붙이는 방법으로 작성
function printReview(user) {
const ul = document.createElement("ul");
const li = document.createElement("li");
li.setAttribute("class", "review");
li.setAttribute("data-rid", user.rid);
li.innerText = user.review;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", del);
li.appendChild(button);
ul.appendChild(li);
section.appendChild(ul);
}이 방법으로 작성해보니 생각한대로 삭제버튼도 구현이 됐고 하나씩만 삭제가 됐다.
localstorage가 삭제가 안됐던것은 의외로 간단했다.
function del(event) {
const li = event.target.parentElement;
const rid = li.getAttribute("data-rid");
li.remove();
reviewLists = reviewLists.filter((review) => review.rid !== parseInt(user. rid));
save();
}변수명을 계속 바꾸다보니까 깜빡하고 parseInt 부분의 rid를 user.rid로 해놓고 변경하지 않아 작동되지 않았던 것으로 보여 parseInt(rid)로 수정하니 잘 작동됐다.
To-do-List✔️
- 본인이 쓴 리뷰에만 삭제버튼이 보이고 아닌 댓글은 안보이게 하는 작업
- 리뷰 수정기능 구현
- 팀원분이 로그인기능 작업 완료 시 내가 작업한 것과 합치는 작업
- Import, Export에 대해 알아본 후 적용
- 전체 코드 병합 한 뒤 리팩토링
코린이