js / instgram 클론 MockData를 활용해 댓글추가시키기

◾ Js로 MockData만들고 댓글란에 댓글 추가시키기!

오늘은 MockData라는 것을 배웠다!!

지금 클론중인 intagram의 댓글창에는 내가 HTML에 직접 하드코딩한 댓글들이 들어가잇는데

댓글란의 <li>태그를 전부 지우고 Mock데이터를 json확장자로 저장한 후에 서버에서 받아오듯이

코드를 짜서 피드에 추가하는 작업을 해보았다.

✌ 결과화면

위의 결과화면처럼 댓글란에 댓글들이 들어가있는데 HTML 문서안에 댓글란에는

분명 하드코딩하지 않았다. 현재 HTML문서를 보게되면

 <!-- 댓글 창 -->
          <ul class="comment-ul">
          </ul>

<li> 태그가 들어있지 않다.!!

Mock데이터를 활용해 실제 서버에서 받아오는 것처럼 미리 해본것인데

나의 Mock데이터는 이러하다

◾ Mockdata

{
  "feed_comment": [
    {
      "id": "1",
      "name": "ear Ah",
      "comment": "사진부터 장난질이냐",
      "commentLike": true
    },
    {
      "id": "2",
      "name": "gone Kim",
      "comment": "증거있어?",
      "commentLike": true
    },
    {
      "id": "3",
      "name": "gwangRyul_Go",
      "comment": "돈벌자고 하는겁니까 재밌자고하는거지 안그래요?",
      "commentLike": false
    },
    {
      "id": "4",
      "name": "nine Ho",
      "comment": "예림이 내가 예림이 때문에 인생을 다시a 느껴!",
      "commentLike": true
    }
  ]
}

json이라는 확장자로 이루어진 객체형태의 파일이다.

객체안에 배열이있고 그안에 다시 객체형태로 데이터들이 담겨있는데

id와 name 그리고 내가 쓸 댓글들이 담겨있고 아래 commentLike는 나중에

댓글에 좋아요 표시기능을 수행하기위해 만들어놓았다.

이것을 자바스크립트안에 fetch함수로 가져와서 댓글란에 추가를 했는데

fetch함수는 이렇게 만들었다.

마지막의 commentArea는 전역스코프 변수이고 html파일에서 댓글란의 <ul> 태그이다.

let comments_list;
fetch("./DATA/comments.json", {
  method: "get",
})
  .then((res) => res.json())
  .then((data) => {
    comments_list = data.feed_comment;
    comments_list.forEach((value) => {
      for (let i = 0; i < commentArea.length; i++) {
        const li = document.createElement("li");
        const nameSpan = document.createElement("span");
        const textSpan = document.createElement("span");
        const img = document.createElement("img");

        nameSpan.textContent = value.name;
        textSpan.textContent = value.comment;
        img.src = "./img/heart.png";

        nameSpan.className = "nickname";
        textSpan.className = "comment-text";
        img.className = "comment-like-img";

        li.append(nameSpan, textSpan, img);
        commentArea[i].appendChild(li);
      }
    });
  });

fetch(''json파일의 위치'', { method : OO})

아직 method는 Get밖에 배우지않았지만 기본값이 Get이고 이는 생략해도 상관없다. 하지만 수업목적상

넣은 것이고 나도 학습목적상 생략하지 않았다.

.then((res) => res.json())

응답을 받고나면 응답받은 파일을 json형태로 변환한다.

json형태의 파일인데 응답을 받고 다시 json으로 변환한다고???

.then((res) => res.json()) | 이 부분을 | .then((res) => console.log(res)) 이렇게 작성하여 콘솔로 찍어보면

이렇게 나온다 내가 작성한 객체형태의 파일을 불러오지 못한다.

따라서 json 형태로 다시 바꾸어준다고 입력한 후

.then((res) => res.json())
  .then((data) => { console.log(data)}

확인해보면

객체형태로 잘 불러오는 것을 확인할 수 있다. 그래서 res (응답을 받으면) res.json() 응답받은 파일을

json형태로 바꿔줘라 라고 하는 것이다.

.then((data) => { }

그리고나서 data에 내가 넣을 기능들을 중괄호 안에 작성해주면 된다.

나는 피드가 3개이기때문에 각각의 피드에 댓글을 넣는 기능을 구현했는데

그렇기에 for문을 이용하여 각각의 <ul>태그 안에 넣어주었다.

🔥 느낀점

이번 과제를 통해 배운점은 항상 하드코딩을 했을때 도대체 어떻게 서버에서 데이터를 받아서 어떤식으로

이런 부분 저런부분에 넣는 거지?? 궁금했었는데 이런식으로 데이터를 받아오고 또 백엔드 부분에서 아직

data들을 작업중일 때 프론트에서 어떤식으로 미리 작업을 해보고 시뮬레이션 해보나 궁금했었는데

Mockdata라는 개념을 배운 후에는 이런식으로 하는구나 라고 알게되었고 내가 지금 얕게 알고있는 API라는

개념을 조금 더 공부해봐야겠다 라고 느꼈다!!! 그리고 처음 코드를 작성했을 때 댓글을 한번에 작성해서

ul태그에 append 시키면 되는줄 알았는데 append의 특성상 마지막요소에만 추가되는 특징이있다는 것도

배웠다. 배울수록 비엔나소시지처럼 자꾸 뭐가 딸려나오는데 그게 매력인것같다. 다 먹어치워주겠다!!🔥