미니프로젝트

한글날 연휴동안 코멘트 박스 색 칠하기를 구현해 보았다.
이전에 튜터님께 조언 받을때 각 p태그(코멘트의 태그)들에 index를 부여하여 이 값을 홀 짝으로 분류하면 내가 하고 싶은것을 구현 할 수 있을 것이다 이야기 해주셨다.
어떻게 해야할지 고민을 해보았지만 번쩍 떠오르지는 않았다. 그리고 연휴 마지막날 문득 이런 생각이 들었다.

array는 배열 배열이면 순서가 있고 그 순서를 index로 사용하면 되지 않을까?

const minseok_comment_list = []

async function get_minseok() {
  const q = query(collection(db, "minseok"), orderBy("date"))
  const querySnapshot = await getDocs(q)

  querySnapshot.forEach((doc) => {
    const row = doc.data();
    const comment = row['comment'];
    minseok_comment_list.push(comment)
  })
   minseok_comment_list.forEach((a) => {
    const commentColor = minseok_comment_list.indexOf(a) % 2  //동일한 글자 입력시 처음 입력한 순서로 출력됨
    if (commentColor === 0) {
      const temp_html = `<p class='comment_background_white'>${a}</p>`;
      $('#commented_minseok').prepend(temp_html);
    } else {
      const temp_html = `<p class='comment_background_gray'>${a}</p>`;
      $('#commented_minseok').prepend(temp_html);
    }
  })
}
get_minseok()

쿼리를 통해 받은 데이터들을 forEach를 통해 코멘트를 따로 담을때 앞에 만들어둔 코멘트 리스트를 통해 담아냈다.
그리고 이 리스트를 forEach를 한번 더 실행하여 리스트 내의 index 를 기준으로 홀짝을 분류하니 반은 성공 하였다.

문제는 반이다...
각각 다른 문자열들은 상관없지만 a와같이 똑같은 문자열이 있을경우 배열중 처음에 있던 a의 index를 받아 색이 겹치는 경우가 생긴다.
내일 이 문제를 해결해야겠다.