유튜브 api를 활용한 팀 프로젝트

📢 프로젝트 소개

• 프로젝트 명 : reactube
• 프로젝트 일정 : 2024.02.23 - 2024.02.28
• 깃 허브 링크 : 바로가기
• 배포 링크 : 바로가기
• 협업툴 : notion, slack, figma, github
• 기술스택
  • redux rtk
  • react query
  • supabase DB / auth
  • youtube api
  • resend api

 

✏️ 프로젝트 설명

유튜브 API를 활용한 리액트 추천 영상을 공유하는 커뮤니티 프로젝트입니다.

 

💻 프로젝트 구현 기능

• 로그인/회원가입 (supabase auth), 가입 확인 메일(resend api)
• 추천 영상 게시물 crud (supabase DB)
• 댓글 crud (supabase DB)
• 등록한 추천 영상 자체 검색 기능 (supabase DB)
• 유튜브 api를 활용한 검색 기능
• 이미지 렌더링 최적화(Intersection Observer)

 

😀 담당 구현 기능

• 등록한 게시물에 대한 검색 기능 (supabase DB)
• 메인 페이지, 자체 검색 페이지, 유튜브 api를 활용한 검색 페이지 이미지 렌더링 최적화
• ui 스타일링 작업

 

⭐ 프로젝트 과정

1. 기획

2. 설계

content

필드명	타입	설명
id	uuid	게시글 id
title	text	게시글 제목
author	text	작성자
timeString	text	작성일
content	text	게시글 내용
urlString	text	유튜브 영상 url
videoId	text	유튜브 영상 id
userId	text	유저 uuid

 

comments

필드명	타입	설명
id	uuid	댓글 id
nickname	text	유저 닉네임
comment	text	댓글 내용
created_at	text	작성일
videoId	text	게시글 id uuid
userId	text	유저 id uuid

 

3. 개발

supabase

기존에는 데이터 관련해서 json-server, firebase를 주로 사용해 왔는데, 이번에는 기획 단계부터 supabase로 결정하고 프로젝트를 시작하게 됐다.

처음 사용해 봐서 쉽진 않았지만 sql문과 비슷해서 조금은 괜찮았다.(하지만 설정이 어려움...)

 

sql처럼 from에 테이블 명을 넣고, where 없이 like에 % 와 검색할 단어를 넣었다. 

그리고 order에 ascendig:false로 해서 작성일 내림차순인 최신순으로 데이터를 조회했다. 

코드 일부

//데이터 조회
useEffect(() => {
const fetchData = async () => {
  try {
    const { data, error } = await client
      .from('content')
      .select('*')
      .like('title', `%${searchKeyword}%`)
      .order('timeString', { ascending: false });
    if (error) {
      throw error;
    }
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error.message);
    alert('검색 중 에러가 발생하였습니다. 잠시 후 다시 시도해주세요.');
  }
};

fetchData();
}, [searchKeyword]);

 

 

이미지 렌더링 최적화

이 부분은 다른 글에서 다뤘지만, 정말 쉽지 않았다... 바로가기

React.Lazy를 적용해보려고도 했었는데,,,, 잘 되지 않았고... lazy load 관련 라이브러리를 설치해서 하는 방법도 있다고 하는 내용도 봤는데... react 버전과 맞지 않아서 설치가 되지 않았다...(라이브러리 이름 까먹음)

다행히 intersection observer를 활용해 해결할 수 있었다.

 

🔥 배운 점 / 느낀 점

팀원들과 git push 하거나 pull 하고 나서 바로바로 테스트하는 방식으로 협업하니 충돌이 거의 발생하지 않았고, 발생해도 빠르게 처리할 수 있었다. 

또한, 이번에 supabase를 사용하면서 sql 공부도 해야겠다고 느꼈다. 

 

❕ 아쉬운 점

이번 프로젝트에서 더 많은 부분을 담당하지 못한 것이 아쉽다. 이미지 렌더링에 너무 많은 시간을 사용해서 여유가 없었다.

react query를 활용해보고 싶었는데 활용하지 못한 점도 아쉬움으로 남는다.

 

이번에 처음으로 시연 영상도 맡아서 준비했는데 미흡한 것 같아서 아쉽다. 다음에 맡으면 시연하면서 설명할 수 있도록 제대로 준비해야겠다.

 

Airbnb ESLint

규칙을 제대로 지키면서 코드를 작성했어야 했는데 이 부분도 제대로 챙기지 못했다.