[TIL] 230828

Nextjs

추천목록에서 무시하기를 했을 경우 필터링

봤던 목록들과 추천 무시하기를 수행한 목록들을 제외하고 추천목록에서 보여주게 만들었다.

// 1. 사용자 정보 조회
  const { data: userId } = await supabase.from('users').select('id').eq('username', username);
  const { data: ignoreList } = await supabase
    .from('ignored_movies')
    .select('ignored_movies')
    .eq('userid', userId![0]?.id);
  const { data: watched } = await supabase.from('users').select('watched_movies').eq('id', userId![0]?.id);

  // 2. ignoreList와 watched 목록에서 영화 ID 추출
  const ignoredMovieIds = ignoreList![0]?.ignored_movies || [];
  const watchedMovieIds = watched![0]?.watched_movies || [];

  // 3. 필터링하여 제외된 영화들 반환
  const ignoredList = Array.from(new Set([...ignoredMovieIds, ...watchedMovieIds])).map((id) => id.toString());

ignoredList를 props로 내려서 특정 영화 id를 제외하고 필터링하게 만들어줬다!

const results = data[0].results;
      const filteredResults = results.filter((movie) => !ignoredList.includes(movie.id.toString()));
      setDataToProject([...dataToProject, ...filteredResults]);

무한 스크롤에서 매개변수로 ignoredList가 필요한데, js의 꼭 모든 매개변수를 넣을 필요가 없게 만들거나, 컴포넌트를 더 독립적으로 리팩토링 할 필요가 있을 것 같다.

기능 동작 수행 시 동작하지 않음

supabase에서 policy를 설정해줬어야 하는데 깜빡하고 안해줘서 불러오기가 되지 않았다.

정책을 로그인한 사람만 가능하도록 설정했는데, 상태 코드가 204로 계속 떠서 생각해봤더니 기존에 사용하던 supabase코드는 createClient를 사용했다.
다른 분의 코드를 살펴보니 createServerComponentClient에 cookie를 가져와서 사용하셨다.
하지만, 해당 버튼은 clientcomponent였다.
const supabase = createClientComponentClient<Database>(); 로 지정해주니, 동작이 잘 되었다. clientcomponent에서는 자동으로 불러와서 로그인 id를 판별하는 것 같았다.

기술면접

var, let, const의 차이에 대해 알려주세요.

• 답변
  var 는 재선언 가능, 재할당이 가능합니다. 하지만, 옛날 버전에서 사용하던 것이기 때문에 사용하지 않는 것이 좋습니다. const는 재선언과 재할당이 불가능 합니다. let은 재선언이 불가능 하지만, 재할당이 가능합니다. 재할당을 할 경우 let을 다시 붙일 필요가 없습니다.
  

Async/Await와 Promise의 차이

• 답변
  promise는 비동기 처리에 사용되는 객체인데 내용이 실행되었지만, 결과를 반환하지 않은 객체입니다. pending, fulfilled, rejected 3가지 상태를 가지고 있습니다. async/await은 callback함수나 promise의 단점인 콜백지옥, then 지옥을 방지하기 위해 나온 비동기 처리 문법입니다. await으로 promise의 반환 값을 받을 수 있습니다.

하루종일 문서를 여러번 읽어보고 시도해보면서 나름 동작이 이해가 되는 것 같았다. 작업속도를 높여서 이번주 내에 모든 기능을 완성해보자!