netflix clone 작업
사실 어제 끝날 줄 알았는데 Mongo DB에서 어려움을 겪어 해결 못함 상태이다.
강의는 MERN stack 이라서 mongo DB도 포함이 된다.
나는 mongo DB 쪽 지식이 전혀 없는 상태인데
강의에는 mongo DB쪽을 초보자를 위해 다루지 않았다..
이미 몽고 DB를 사용할 줄 안다는 가정하에 진행되었음.
문제
mongo DB를 사용하는 방법을 검색해서 나온 유튜브나 블로그를 보며 따라해봤는데 compass를 사용하는데 connect를 하는 부분에서 자꾸 에러가 났다. 게다가 compass에 관한 내용도 별로 없었다.
대부분 다른 사람들은 저 에러를
윈도우 --> 작업관리자 --> 서비스 에서 MongoDB부분을 찾아서
사용중지를 풀어주어서 해결했다.
나는 서비스에 Mongo DB가 없었다.
몽고DB나 백엔드 쪽에 지식이 없어서 그런지 어디부터 문제인지 잘 찾지 못했다. 사실 몽고DB를 제대로 설치한건지도 잘 모르겠다.
이 프로젝트에서 mongo DB를 사용하는 이유는
좋아하는 영화목록에 영화를 추가하는 api를 만들기 위해서이다.
내가 이 프로젝트를 고른 이유도 이 부분을 연습해보고 싶어서였는데
mongo DB에서 막혔다.
결과적으로..
에러를 해결하지 못했다. 다른 사람들은 저 부분에서 connect를 누르면 바로 넘어가지던데 왜 나는 안넘어가고 에러가 나는 걸까...
모르니까 짜증나고 답답하다.
완성을 앞두고 하기 싫다는 생각이 들었다.
고민하다가 내가 좋아하는 목록을 리덕스 저장소에 저장해서 가져오는 방법도 있지 않을까 하는 생각이 들어 chat GPT를 참고해가면서 그 부분을 만들었다.
사용자에 따라 좋아하는 영화를 추가하고 제거하는 것이라
userSlice에 추가하고 제거하는 부분을 넣어줬다.
영화를 추가하고 제거하는 것은 별로 문제가 되지 않았지만
좋아하는 영화와 아닌 영화를 구분해서 아이콘을 바꿔주는 부분에서 어려움을 겪었다.
해결
여러가지 방식을 시도해봤는데..삽질이었고
영화를 추가해줄 때 prepare를 이용해 영화 데이터에 fav를 추가해주고
컴포넌트에서 걸러내볼까 하는 생각이 들어서 아래와 같은 코드로 fav을 추가하는 코드까지는 작성했는데 컴포넌트에서 불러오는 과정이 효율적이지 않았다.
게다가 removeFavMovie를 할 때는 오류가 났다..
addFavMovie:{
reducer (state, action) {
console.log("favMovie", action.payload);
state.favoriteMovies.push(action.payload);
},
prepare(movie) {
return {
payload: {
...movie, fav: true
},
};
},
},이 부분을 지우고 각각의 영화를 나타내주는 Card에서 isLiked를 props로 전달하는 것이 제일 좋을 것 같아 Card컴포넌트의 부모에서 좋아하는영화 목록을 가져와 영화 데이터의 id와 좋아하는 영화 데이터를 비교해 true false를 전달하고 Card컴포넌트에서 isLiked 값에 따라 버튼을 변경해주는 방법으로 해결했다.
const UserListedMovies = () => {
const favoriteMovies = useSelector((state) => state.user.favoriteMovies);
return (
<>
<Container>
<h3 className="title">좋아하는 영화 목록</h3>
<Wrap className="flex ">
{favoriteMovies.map((movie, i) => (
<Card
movieData={movie}
i={i}
key={movie.id}
isLiked={favoriteMovies.some((m) => m.id === movie.id)}
/>
))}
</Wrap>
</Container>
</>
);
};
마치며
강의를 처음 선택했을 때 기대했던 바와는 달랐다.
나는 효율적인 코드를 짜는 방법이나 폴더정리, 코드를 짜는 부분에 있어서 내가 몰랐던 팁들을 배울 수 있을 거라고 기대했는데 새로운 것을 얻기 보다는 내가 비효율적이라고 느끼는 부분이나 의문을 느끼는 부분들을 바꿔가야 했다. 새로운 것을 배우지는 못했지만 그러는 과정에서 복습도 많이 되고 공부가 많이 된 것은 사실이다.
그리고 chat GPT가 있어서 정말 다행이라고 매 순간 생각했다.
chat GPT를 사용해서 명쾌한 답을 얻었다 라고는 할 수 없지만
내가 어떻게 바꾸고 싶은데 내가 생각한 방식이 괜찮은 방식인지 효율적인지 비효율적인지 물어보고 알 수 있어서 정말 도움이 됐다.
