[TIL] 내일배움캠프 React 과정 2024.05.01

오늘의 한 일

• 팀 프로젝트용 git 생성
  • git 링크
• 와이어프레임 제작
  • figma 링크
• 역할 분담
  • notion링크
• 필수 기능 구현
• 일부 코드 리팩토링

오늘의 문제 해결

문제

• 역할 배분에서 문제가 발생했다
• 새로 추가되는 기능의 종류가
  • 영화 상세 정보 화면
  • 댓글 기능
• 로 크게 2가지이다 보니 5명이서 역할 배분에 대한 고민이 생겼다.

튜터님의 조언

• 첫 번째 튜터님은 기능을 세분화 해서 역할을 나누는 것이 어떻냐고 하셨다
  • 메인 페이지 라우팅 + 정보 보내기
  • 상세 페이지에서 영화 정보 읽기
  • 상세 페이지 댓글 정보 저장
  • 상세 페이지 댓글 정보 불러오기
  • 상세 페이지 댓글 정보 삭제하기
  • 충돌 가능성에 대해서는 기능별로 파일을 나누는 것에 대해 설명해 주셨다.
  • 그러나 개인과제에서 파일을 나눴을 때 튜터님이 브라우저 환경에 적합한 코드를 작성해달라고 했던것이 떠올랐다.
• 그래서 찾아간 두 번째 튜터님은 역시 페이지 하나에 html 하나, js 하나에 대응하는 기본적인 방식을 권유하셨고, 역할 역시 크게크게 페이지 별로 역할을 나누는 것이 어떻냐고 하셨다.
  • 영화 메인 페이지 (수정)
  • 영화 상세 페이지 상세 정보
  • 영화 상세 페이지 댓글 기능
  • 위처럼 크게 나누어 충돌 가능성을 낮추는 방식을 추천하셨다.
• 너무 상반된 두 튜터님의 조언에 마지막으로 다른 튜터님께 조언을 얻으러 갔다.
• 마지막 세 번째 튜터님은 두 번째 튜터님에 가까운 의견을 주셨고, 대신 역할을 나누기에 부족한 기능에 대해서 어떤 기능을 추가하면 좋을 지 같이 고민해주셨다!
  • 검색 페이지 (별도의 페이지로 분리)
  • 영화 메인 페이지 영화 예고편 영상 캐러셀
  • 그 외 반영은 안 되었지만 괜찮았던 아이디어들
    • 영화 배우 페이지
    • 마이 페이지
    • css 깎기

문제 해결

• 튜터님들의 조언을 바탕으로 큰 단위로 기능을 나누었고, 역할도 나누었다.
  • notion링크

팀 프로젝트 진행 사항

• 검색시 새로운 페이지로 이동 및 검색 결과를 화면에 보여주는 데 성공
• 검색 후 화면을 다시 그리는 searchMovies 함수를 수정하였다.

function searchMovies(searchTerm) {
  window.location.href = `searchResult.html?word=${searchTerm}`;
}

• 추가적으로 카드를 생성해서 정보를 보여주는 displayMovie 함수와 데이터를 불러오는 fetchGetData 함수를 분리하는 리팩토링을 진행하였다

//리팩토링 전
function displayMovies(url) {
  document.getElementById("movie-container").innerHTML = ""; // 이전에 표시된 영화 목록 제거
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const movies = data.results;
      movies.forEach((movie) => {
        const { id, poster_path, title, overview, vote_average } = movie;
        const moviePosterPath = `https://image.tmdb.org/t/p/w500${poster_path}`;
        const movieCard = `
            <div class="movie" data-movie-id="${id}">
              <img src="${moviePosterPath}">
              <h2>${title}</h2>
              <p>${overview}</p>
              <p>평점: ${vote_average}</p>
            </div>
          `;
        document.getElementById("movie-container").innerHTML += movieCard;
      });
    })
    .catch((error) => console.error("Error fetching movies:", error));
}

//리팩토링 후
async function displayMovies(url) {
  document.getElementById("movie-container").innerHTML = ""; // 이전에 표시된 영화 목록 제거
  const data = await fetchGetData(url);
  const movies = data.results;
  movies.forEach((movie) => {
    const { id, poster_path, title, overview, vote_average } = movie;
    const moviePosterPath = `https://image.tmdb.org/t/p/w500${poster_path}`;
    const movieCard = `
            <div class="movie" data-movie-id="${id}">
              <img src="${moviePosterPath}">
              <h2>${title}</h2>
              <p>${overview}</p>
              <p>평점: ${vote_average}</p>
            </div>
          `;
    document.getElementById("movie-container").innerHTML += movieCard;
  });
}

async function fetchGetData(url) {
  let APIData = await fetch(url)
    .then((response) => {
      if (response.ok) {
        return response.json();
      }
      alert("해당하는 데이터가 없습니다!");
      throw new Error("에러 발생");
    })
    .catch((error) => {
      throw new Error(error);
    });
  return APIData;
}

오늘의 회고