2023 - 06 - 07 댓글 CRUD 기능 3. Read (조회)

 

오늘 할일

조회 Read 함수 

 

오늘 배운 것

조회 Read 함수 만들기

 

HTML 태그

<ul id="datalist">

</ul>

 

 

조회 기능은 댓글 생성, 댓글 삭제, 댓글 수정(업데이트)처럼 클릭,submit같은 이벤트발생에서 호출되는게 아닌,

자체호출되도록 함. 

 

우선 댓글생성에서 유저로부터 받아온 값은 아이디, 비밀번호, 댓글 3개인데,

조회에서 필요한 값은 비밀번호와 댓글 2개.

 

처음 Object매서드를 이용해서 Object.entries(localStorage)로 저장된 key값과 value값을 모두 가져온다.

[Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]

0['1686139717521', '{"id":1686139717521,"name":"123123","pw":"ss","content":"ss"}']

1['1686141188794', '{"id":1686141188794,"name":"dd","pw":"dd","content":"dd"}']

2['1686139871937', '{"id":1686139871937,"name":"ss","pw":"ss","content":"ss"}']

3['1686142963977', '{"id":1686142963977,"name":"123","pw":"123","content":"123"}']

4['1686141512031', '{"id":1686141512031,"name":"dd","pw":"dd","content":"dd"}']

5['1686141193654', '{"id":1686141193654,"name":"dd","pw":"dd","content":"dd"}']

6['1686142621554', '{"id":1686142621554,"name":"123","pw":"123","content":"123"}'] 

7['1686141512799', '{"id":1686141512799,"name":"dd","pw":"dd","content":"dd"}']

length  8

여기서 우리는 인덱스 1번째값, 즉 value값에서도 name과 content 두가지를 가져오면 된다.

그리고 배열 하나하나 조회업로드 해야하므로 forEach문을 쓰고

그 괄호는 댓글폼까지 완료되고 onload함수 직전에 닫는다.

 

forEach문 매개변수(돌릴 key값) k로 지정하고,

문자열로 저장되있던 localStorage를 JSON.parse를 사용해 가져온다.

우리가 가져와야 할 값은 name과 content가 포함된 value값, 1번째 인덱스이므로 대괄호표시한다.

점 찍고 name하면 이름요소를, 점 찍고 content하면 댓글내용요소를 가져올 수 있다.

가독성을 위해 매번 변수선언하면 이해하기도 편하고 보기도 편함.

---

여기까지 value값에서 이름과 댓글내용을 가져오는 작업 끝, 이제 댓글창 부분

기본 폼은 html에 있고 DOM제어 api목록을 활용해 작성한다,

 

 

코멘트박스는 기존 html에 있는 <ul>태그에, 새로 <li>태그를 생성해서 넣을거임.

<ul>태그의 아이디값(또는 클래스값)을 가져와 querySelector로 해서 변수선언하고

<ul>태그에 들어갈 클래스명을 setAttribute로 지정하고

append매서드 사용해서 생성된 <li>태그의 변수를 <ul>태그 변수에 넣음.

innerHTML로 댓글목록창 만들기.

 

이해하기 쉽게 <ul> <li> </li> </ul> 에서

<ul>태그는 parentCommentBox로 변수선언했고,

<li> 태그는 childCommentBox로 변수선언했다.

 

 

그리고 맨 마지막으로 onload함수를 통해 자체실현되도록 함.

window.onload=read(); 이렇게 window.onload=함수명() 써도 된다,

function read() {
  const entries = Object.entries(localStorage);
  entries.forEach((k) => {
    const values = JSON.parse(k[1]);
    const name = values.name;
    const comment = values.content;

    const childCommentBox = document.createElement("li");
    childCommentBox.setAttribute("class", "smallbox");
    const parentCommentBox = document.querySelector("#datalist");
    parentCommentBox.append(childCommentBox);
    childCommentBox.innerHTML = `
        <div class="review">
        <h4>ID: ${name}</h4>
        <p>Comment: ${comment}</p>
        </div>
`;
  });
}

window.read(onload);

위 html부분은 아래와 같음

 

<ul id="datalist">
<li class="smallbox">
<div class="review">
        <h4>ID: ${name}</h4>
        <p>Comment: ${comment}</p>
        </div>
</li>
</ul>