과제 코드 리뷰 - Githubissues

전반적으로 팀 프로젝트를 잘 수행해주셨네요! 다만, 몇 가지 더 개선을 하면 좋을 것들이 있어 이 부분에 대해서 피드백을 드리도록 하겠습니다.

main.js

여기서는 기본 이벤트 리스너를 설정하고 TMDB API에서 영화 정보를 가져와 페이지를 초기화하고 계시네요.
엔터키를 사용하여 검색을 트리거하는 것은 좋은 접근입니다!
searchMovie()와 같이 여러 곳에서 쓰일 가능성이 있는 기능들은 가독성, 유지보수성을 위해 향후에는 별도의 클래스로 작성하셔도 좋을 것 같아요!

클래스 코드 예시

class MovieSearcher {
constructor() {
    this.apiKey = 'TMBD API 키'; // 나중에 알게 되시겠지만 API 키는 환경 변수로 관리하는 것이 좋습니다.
    this.baseURL = 'TMDB 서버 URL';
}

async searchMovie(searchTitle, page) {
    try {
        const data = await this.fetchMovies(searchTitle, page);
        this.updateUI(data, page);
    } catch (error) {
        alert('An error occurred while fetching movie data: ' + error.message);
    }
}

async fetchMovies(searchQuery, page = 1) {
    // 쿼리 기반으로 영화 목록 불러오는 기능을 여기다 짜시면 됩니다!
}

updateUI(data, page) {
    // UI 업데이트
}
}

fetch.js

https://github.com/diddntjd99/SpartaMovie/blob/9ab174581e6474031b558eea1152226dd0fbafda/fetch.js#L6-L7

위의 코드처럼 API 키를 코드 내에 포함시키면 안되는 것을 일단 인지해주시길 바랍니다!
제가 MovieSearcher 클래스 코드 예시에도 썼지만 API 키와 같은 핵심 데이터는 환경 변수로 관리하는 것이 좋으니 꼭 인지해주세요.
자세한 것은 dotenv를 검색해서 미리 공부해보시면 좋습니다.

https://github.com/diddntjd99/SpartaMovie/blob/9ab174581e6474031b558eea1152226dd0fbafda/fetch.js#L23-L25

이 부분은 단순히 네트워크 상태가 좋지 않아서 발생한 에러라고 단언할 수 있을까요?
해당 API 엔드포인트 명세에 에러 상황에 대해서 명시가 되어있다면 그것을 반영해주시면 좋을 것 같습니다!

위의 코드들 외엔 딱히 특이사항 없습니다! 고생 많으셨습니다! :)

localStorage 질문에 대한 답변을 해드리자면 다음과 같습니다!

localStorage를 사용하여 영화 리뷰를 저장할 때, 각 영화의 고유 ID를 기반으로 데이터를 구조화하는 것이 중요해요. 예를 들어, 각 영화 ID에 대해 리뷰어 정보와 리뷰 내용을 배열로 저장할 수 있어요.

{
  "movieId123": [
    {
      "reviewer": "르탄이1",
      "content": "정말 재미있는 영화였습니다.",
      "timestamp": 1625190000000
    },
    {
      "reviewer": "르탄이2",
      "content": "별로였어요.",
      "timestamp": 1625190040000
    }
  ],
  "movieId456": [
    {
      "reviewer": "르탄이3",
      "content": "최고의 영화입니다!",
      "timestamp": 1625190005000
    }
  ]
}

점점 아마 감을 찾게 되실 것입니다! 화이팅!

diddntjd99 / SpartaMovie

과제 코드 리뷰 #2

main.js

fetch.js