[TIL]231024_개인과제 리뷰 (+코멘트 추가)/팀프로젝트시작

👨🏻‍🏫 개인 과제 리뷰

우선 올려주신 개인과제 리뷰영상을 보면서 내가 어려움을 겪었던 부분을 어떻게 쓰면 좋을지 이해하는것에 힘써보았다.

💡 그 과정에서 알게된 내용

1. 브라우저마다 html태그에 기본적으로 들어가있는 css스타일이 있는데 한번 초기화한 후 작업하면 모든 브라우저마다 동일한 스타일 적용 가능!

➡️ css 작업시에 reset.css 파일을 만든 후 작업

2. html파일에 js파일 링크걸때 type=module 기능을 이용하면 자바스크립트 태그를 지연실행하면서 파싱을 끝까지 이어갈 수 있음

3. semantic : (형용사)의미론적인 / 개발자가 많이쓰는 용어

내가 해결하지 못한 부분을 유심히 보면서 내 코드에 적용하려고 했는데 쉽지 않았다.
계속 시도중인데 해결하면 코드를 추가할것이다!!🥹👊🏻

(드디어 코드를 적어 넣을 수 있다)

튜터님들과 팀원분의 도움과🙇🏻‍♀️ 사랑으로🫶🏻 탄생한 코드이기 때문에 계속 보면서 '이 코드가 어떤 작업을 위한거지?' 이해하고 활용할 수 있도록 해야겠다!

//영화 API요청 코드
const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3OWU4MmZkM2YyNmQ1MzBmNDYyMGUxYWRlYTdlNTNmYyIsInN1YiI6IjY1MzA3ZTJjYWQ1OWI1MDBlMTI5ZTMwNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.XDs5Jyz-CPhJWQNlUDpXWh3eXjhxYxrD6AnbdRLUB98"
  }
};

const movieListWrap = document.getElementsByClassName("movieListWrap")[0];
const movieList = document.getElementsByClassName("item");
//const allList -> let allList // const는 한번 할당되고 나면 재할당할 수 없음
let allList = [];

//fetch 바깥으로 빼서 여러번 적을 필요 없이 함수를 이용해서 재사용 가능
function renderMovie(results) {
  results.forEach((movie) => {
    
    //새로운 노드 생성하는 코드로 수정 & 클래스명 입히기
    const item = document.createElement("div");
    item.classList.add("movieCard");
    const title = document.createElement("h2");
    title.classList.add("card-title");
    const text = document.createElement("p");
    text.classList.add("card-text");
    const poster = document.createElement("img");
    poster.classList.add("moviePoster");

    poster.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;
    title.innerHTML = `${movie.title}`;
    text.innerHTML = `${movie.overview} <br><br>⭐⭐⭐<br>${movie.vote_average}`;

    //영화 id alert 창 띄우기...
    item.addEventListener("click", () => {
      alert("영화ID : " + movie.id);
    });

    //item안에 세가지 요소 넣기
    item.appendChild(poster);
    item.appendChild(title);
    item.appendChild(text);

    movieListWrap.appendChild(item); //movieListWrap 안에 item 요소들을 넣겠다
  });
}
fetch("https://api.themoviedb.org/3/movie/now_playing?language=ko-KR&page=1", options)
  .then((response) => {
    if (!response.ok) {
      throw new Error("네트워크 오류");
    }
    return response.json(); // JSON 데이터 가져오기
  })
  .then((data) => {
    console.log(data);
    const results = data.results;
    allList = results;
    renderMovie(results);
  })
  .catch((error) => {
    console.error("오류 발생:", error);
  });

//input에 검색어를 입력
const searchInput = document.querySelector("#inputValue");
const searchForm = document.querySelector("#searchForm");
// console.log(searchButton);

// form태그 안에서 -> input에 엔터나, 버튼 클릭을 하면 submit 이벤트가 발생함
const searchMovie = (event) => {
  event.preventDefault(); //submit 이벤트를 이용했을때 form 태그가 기본적으로 가지고 있는 새로고침 기능을 작동하지 않게 하는 코드
  let searchText = searchInput.value;
  if (searchText === "") {
    alert("제목을 입력해주세요");  //검색어가 없을때 창 띄우기
  }
  console.log(searchText);
  console.log(allList);

  //filter 기능을 이용해서 검색어에 맞는 영화만 남기고 지우는 과정
  const filtered = allList.filter((movie) => {
    return (
      movie.title === searchText || movie.title.replace(/ /g, "") === searchText || movie.title.includes(searchText)
    );
  });
  movieListWrap.innerHTML = ""; //영화카드 지우기
  console.log(filtered); //검색어에 맞게 필터된 영화만 남기기
  renderMovie(filtered);
};

searchForm.addEventListener("submit", searchMovie);

✍🏻 개인과제에서 받은 코멘트

• 프리티어를 아시는군요! 깔끔하고 일관성 있는 코드를 위해 프리티어를 사용하면 좋습니다.
• README는 저장소 첫화면에 안보이게 하려고 assets에 넣으신걸까요?
• 한국어 페이지에는 html lang="ko" 적용해주세요.
• 카드의 높이가 제각각입니다. 최대 높이를 정해두고 몇 줄 말줄임을 하시면 일관성 있는 높이를 적용할 수 있습니다.
• element의 id나 class를 카멜케이스보다 케밥케이스나 스네이크 케이스로 통일해주세요. 반드시 지켜야되는건 아니지만 일반적으로 이렇게 사용합니다.
• 지마켓 폰트를 불러오지않으셔서 font-family 적용이 안되고 있습니다.
• createElement, appendChild를 사용해서 카드를 잘 구성하셨습니다.

코멘트와 리뷰내용을 토대로 리팩토링을 해야겠다.

👥 팀 과제 발제

목표

🚩 [자바스크립트 팀 과제]

• Javascript과정을 마무리하며, 팀원들과 함께 JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다.
• 기존에 개인 과제에서 TMDB를 이용하여 수행하신 과제의 심화 버전으로 진행합니다.
  
  

요구사항

• TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)
• 영화정보 상세 페이지 구현
• 상세 페이지 영화 리뷰 작성 기능 구현

우리팀의 계획

• 클릭 시 상세페이지 이동
  • developer.themoviedb.org/reference/movie-details
• 영화 리뷰 작성 기능(작성자, 리뷰, 확인 비밀번호)
  developer.mozilla.org/ko/docs/Web/API/Window/localStorage
• 이름순, 별점순 정렬
• 페이지기능 추가
• Validation Check (모든 곳에 들어가야함)

<파일관리>

• 📂 assets
• 📂 src
  • app.js -> 정렬, 상세페이지 이동 기능
  • paging.js -> 페이지 기능
  • 📂 details
    • detail.js -> 상세 페이지
    • review.js -> 리뷰 기능
• 📂 style
  • style.css -> 메인페이지, 정렬 스타일
  • paging.css -> 페이지기능 스타일
  • 📂 details
    • detail.css -> 상세페이지 스타일
    • review.css -> 리뷰창 스타일
• index.html
• detail.html