Grid가 대체 왜 이럴까

이번 과제에서 가장 힘들었을 뿐더러 아직도 해결을 하지 못한 그 친구

그리드 네 이놈

.search_result {
    &::-webkit-scrollbar {
      display: none;
    }
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-top: 120px;
    padding-left: 80px;
    padding-bottom: 80px;
    overflow-y: auto;
    .result_card {
      width: 350px;
      background: #191919;
      border-radius: 10px;
      cursor: pointer;
      .result_card_img {
        width: 100%;
        height: 200px;
      }
    }
  }

평소에는 flex를 애용하는 사람으로서, 그리드를 사용하는 연습을 해보려고 이번에는 그리드를 써 보았다.
그런데 괜히 했다

아니 fraction 주면 된다고 했자나요,,,

---

[ 검색 기능 구현 부분 ]

// 검색창
const searchBox = document.querySelector(".search_box");
const searchResult = document.querySelector(".search_result");

searchBox.addEventListener("input", async (e) => {
  const searchInput = searchBox.value.trim();

  if (!searchInput) {
    searchResult.style.display = "none";
    return;
  }

  const encodedText = encodeURIComponent(searchInput);
  const data = await fetchMovies(
    `https://api.themoviedb.org/3/search/movie?query=${encodedText}&include_adult=false&language=ko-KR&page=1`
  );

  const filtered = data.filter((result) => result.title.includes(searchInput));

  searchResult.innerHTML = "";
  searchResult.style.display = "grid";

  filtered.forEach((item, index) => {
    const resultVote = item.vote_average.toFixed(1);

    const searchItem = document.createElement("div");
    searchItem.classList.add("result_card");
    searchItem.setAttribute("id", `card3_${index}`);

    searchItem.innerHTML = `
      <img class="result_card_img" src='https://image.tmdb.org/t/p/w780/${item.backdrop_path}'>
      <div class="result_card_desc">
        <p class="result_card_title">${item.title}</p>
        <p class="result_card_star">⭐ ${resultVote}</p>
      </div>
      `;

    searchResult.append(searchItem);
  });
});

코드를 지저분하게 짜서 style 속성을 적용하기가 기본적으로 쉽지 않았지만, 이 검색 결과 페이지 구성하는 것은 결국 장렬히 실패할 정도로 어려웠다.

기본적인 문제 : 그리드 속성이 적용되지 않음, 컨텐츠가 화면 내에서 구성되지 않고 밖으로 계속 나감 ㅠㅠ

이게 fixed 속성 때문인지,,(바꿔봄) div 요소로 wrap 을 해줬어야 하는건지,,,,(해봄) 그 아래 result_card 부분을 더 묶어줘야 하는건지,,,(해봄) searchResult.style.display = "grid"; 이 부분 때문인지,,, (flex로 바꿔보고 없애보고 다해봄) inner 속성때문인지,,,(다바꾸고 추가했다가 뺐다가 다해봄) nav 부분 때문인지,,,(묶었다가 풀었다가 다해봄) html 내의 위치 문제인지,,,, (위아래로 다 바꿔봄) script.js 파일에서 요소를 작성해서 그런건지,,,(html 내부로 다바꿔봄) 밤을 샜지만 실패해서 그냥 미련 없이 제출! 히히 :)

프로젝트를 처음부터 다시 해서라도 해결해 볼 것이다. (진짜임)

아무튼 그리드에 대한 스터디 포스트 올리고 다시 한 번 시도해 볼 것.

---

두 번째로 다시 해 볼 것,

모듈화와 script 파일 분리

코드를 꼬아 짜서 분리가 안 됩니다! ^^
하지만 나 구조는 알아,,,시간만 주시면,,,분리를 해 보겠습니다,,,,
import export 알아,,,,진짜임,,,,export Defalut,,,,

---

듣도보도 못한 오류!

얜 또 뭔데.

LF 는 Line-Feed 의 약자이다. MAC OS 의 줄바꿈 문자열!

CRLF 는 Carriage Return Line-Feed 의 약자이다. Carriage Return 은 문장이 끝이 나면, 커서가 다음 라인의 맨 앞으로 이동하는 동작이다. (enter 친 것 같이) 이것은 Window의 줄바꿈 문자열.

즉, 별 거 아니고 그냥 OS 마다 사용되는 줄바꿈 문자열이 다르므로 git에서 어떻게 해야 할 지 몰라 띄운 메세지이다. 이 에러를 해결하지 않는다면 줄바꿈 문자에 의해 커밋 내역이나 파일이 이상해질 수 있으니 통일을 시키자!

해결

core.autocrlf 설정을 통해 해결할 수 있다. Git에 코드를 커밋할 때 LF와 CRLF를 서로 변환해주는 기능이다. 또한 시스템 전체에 적용할 것이라면 global 옵션을 추가해주고, 해당 프로젝트에만 적용한다면 제외하여 작성해주면 된다.

나의 경우 Window OS 를 쓰고 있으므로

$git config core.autocrlf true
$git config --global core.autocrlf true

둘 중에 하나를 써주면 됨!

---