😭11/25 내배캠 React 20일차

🐜 오늘 할 일

• 프로젝트 진행하기

---

📆 계획표

시간	내용	결과
8:00~21:00	프로젝트	☁️

---

👩🏼‍🌾 오늘의 줍줍 " " 🌾🌾

드디어 기본 기능 구현을 했다...너무나도 복잡하고 길고길고 길었다...ㅜㅜㅠ 밤을 몇번을 샜는지 모르겠는데, 아직까진 끝이 난건 아니다 ㅜㅠ

Error list
- 웹 페이지 크기를 줄이면 화면 위 nav바에 main-columns이 잘리는 이유
: nav바를 고정하기 위해 position:fixed로 지정해놨다. 그걸 position:sticky로 변경하니 해결되었다.
fixed = 일반문서흐름과 완전히 다르게 제외되어 고정하는 값 -> main-columns들이 인식을 못하여 margin값이 반영되지 않았다.
sticky = 고정되어 있지만, 일반문서흐름과 같이 반응하고, 상위요소와 달라붙기 때문에 main-columns을 인식하여 margin값이 반영되어 반응형으로 만들 수 있었다.

- 검색기능 구현

export function fill() {
  let value, title, item, name, i, content;

  value = document.getElementById("main_search_1").value;
  // "main_search_1"아이디에 포함된 모든 문자열의 입력값을 value에 넣어준다.
  //쉽게 보면 글검색창에 단어를 입력시 value에 넣어준다라고 생각하면됨
  // console.log(value);
  item = document.getElementsByClassName("main_contents");
  // "profile_post_side"클래스, 즉 이미 있는 글내용과 닉네임이 있는 클래스에 포함된 모든 문자열을 item에 넣어준다.

  for (i = 0; i < item.length; i++) {
    // item에는 item[0], item[1], item[2] 현재 이렇게 담겨져있다.

    title = item[i].getElementsByClassName("main_title");
    // 각 아이템 배열에서 클래스 contents, 즉 글내용 부분을 담는다.
    name = item[i].getElementsByClassName("main_name");
    // 각 아이템 배열에서 클래스 nick, 즉 닉네임 부분을 담는다
    // content = item[i].getDocs(collection(dbService, "post")); //여기에 content도 불러와야하는데 어떻게 불러오는지 일단 모르겠다.
    // console.log(title[0].innerHTML, name[0].innerHTML, name);
    if (
      title[0].innerHTML.indexOf(value) > -1 ||
      name[0].innerHTML.indexOf(value) > -1
      // || content[0].innerHTML.indexOf(value) > -1 //여기에 content도 불러와야하는데 어떻게 불러오는지 일단 모르겠다.
    ) {
      // console.log(name, title, item);
      // innerHTML은 HTML의 컨텐츠, 즉 내용에 접근할 수 있는 변수이고
      // indexOf()는 괄호안 값 문자열의 위치가 0,1,2,3,4... 인지 반환, 만약 없으면 -1을 반환한다.

      //만약 첫번째 글내용에 HTML의 컨텐츠값인 value(이건 검색창에서 입력한 문자열)가 존재하거나
      //|| 혹은 첫번째 닉네임에 HTML의 컨텐츠값인 value(이건 검색창에서 입력한 문자열)이 존재할경우

      item[i].style.display = "block";
      // 지금 전체 글내용중에서 해당 번째의 글내용을 보여준다
    } else {
      item[i].style.display = "none";
      // 지금 전체 글내용중에서 해당 번째의 글내용을 보여주지 않는다.
      console.log(item[i]);
    }
  }
}

이 전에 코드를 작성하고, 반영하였을 때, 내가 가져오려 하는 title,name값은 console.log를 찍었을 때 값이 나왔지만,
item[i].style.display = "block"으로 읽은 값을 해당 게시물을 표시하고 싶었지만, 왠지 모르게 계속 하나의 값이 아닌 그것에 해당하지 않는 값들 까지 불러오게 되었다.
if문이 잘못된건지, 다른 것들이 잘못 된건지 확인했을 때 이상이 없었고,
" 쿠쿠댜니, 샤이준호, 뮤트정익, 재현, 준호, 하나 " 님들이 도와주셔서 문제를 해결하게되었다. 진심으로 감사감사감사드립니다🧡🧡🧡
문제는 해당 글 내용을 가져 오고 다시 display할 때, 상위div값을 불러오게 되어 큰 덩이리를 한 묶음으로 인지하게 되었다.
그래서 그 div값을 다 불러오니 당연히...이런 기본적인 실수를 하게 되었다.

일요일에 다같이 모여서 마무리 하기로 했다. cute7 홧🔥