데이터를 JS로 DOM 조작

const li = document.createElement('li');
li.className = 'discussion__container;

이런 식으로 작성하면 li 엘리먼트를 만들고 class 이름을 정해줄 수 있다.

DOM 트리 구조를 잘 파악하고, DOM을 활용하여 Data를 넣어서 HTML을 조작한다.

DOM을 이용해 기본적인 틀 잡기

const convertToDiscussion = (obj) = {
  	// 필요한 DOM을 먼저 설정 해준다.
	const li = document.createElement("li");
    li.className = "discussion__container"; 
  	const avatarWrapper = document.createElement("div");
  	avatarWrapper.className = "discussion__avatar--wrapper";
  	const discussionContent = document.createElement("div");
	discussionContent.className = "discussion__content";
	const discussionAnswered = document.createElement("div");
	discussionAnswered.className = "discussion__answered";

	// data.img
	const img = document.createElement("img");
	img.src = obj.avatarUrl;     // DOM은 객체기 때문에 Dot notation 사용가능
	avatarWrapper.append(img);

	// data.link
  	const aLink = document.createElement("a");
  	aLink.setAttribute("href", obj.url);
  	aLink.textContent = obj.title;
  	const title = document.createElement("h2");
  	title.append(aLink);
  	discussionContent.append(title);
  
	// data.information
    const discussionInformation = document.createElement("div");
    discussionInformation.className = "discussion__information";
    discussionInformation.textContent = `${obj.author} / ${new Date(obj.createdAt).toLocaleString()}`;
    discussionContent.append(discussionInformation);
  
  	// checkBox
    const checkBox = document.createElement("p");
    checkBox.textContent = obj.answer ? "☑" : "☒";
    discussionAnswered.append(checkBox);


    li.append(avatarWrapper, discussionContent, discussionAnswered);
    return li;
};

엄청 길어보인다. 하지만 수많은 데이터들을 각각 하나씩 처리해서 디스커션을 추가하는 것보다 함수로 만들어서 하는 것이 훨씬 좋다. 잡일은 컴퓨터에게.

배열 데이터에 새 데이터 추가

form.addEventListener("submit", (event) => {
  event.preventDefault();    //  이벤트 발생시, 새로고침 방지
  const date = new Date();
  
  // input value
  let author = elInputName.children[1].value;
  let title = elInputTitle.children[1].value;
  let text = elInputQuestion.children[1].value;

  // newQuestion
  let newQuestion = {
    answer: null,
    author,
    avatarUrl: "https://avatars.githubusercontent.com/u/12145019?s=64&u=5c97f25ee02d87898457e23c0e61b884241838e3&v=4",
    bodyHTML: text,
    createdAt: date.toISOString(),
    id: date.getTime(),
    title,
    url: "https://github.com/codestates-seb/agora-states-fe/discussions/45",
  };
  
  agoraStatesDiscussions.unshift(newQuestion); // 배열 데이터 앞에 붙이기
  while (ul.firstChild) {    // 기존에 render 되었던 모든 디스커션 삭제
    ul.removeChild(ul.firstChild);
  }
  render(ul);   // 추가되었던 배열 데이터를 다시 렌더링. render 함수는 데이터를 converToDiscussion 함수에 넣어 돌리고 HTML에 렌더링하는 역할.
});

submit 버튼을 이용해 데이터를 추가하는 법. 추가해서 디스커션을 늘릴 수 있다.

마지막으로

좀 정리하기가 어렵다. 디스커션 나열은 어찌저찌 할 수 있지만 고급기술인 Pagination 어떻게 하는지 모르겠다. 자주 쓰일 거 같으니 한번 제대로 배워놔야 할거 같다.