<aside> 💡 프로젝트 'Yourtube' 에서 구현한 기능들을 보여주는 페이지입니다.

1. 구글 계정을 사용한 로그인 2. 유튜브 좋아요 데이터 렌더링 및 검색 세션 3. 로그아웃 위와 같은 순서로 기능 시연을 보실 수 있습니다.

</aside>

1. 구글 계정을 사용한 로그인

사용자는 구글에게 'Yourtube가 사용자의 계정을 사용하여 유튜브 API를 가져와도 된다' 는 메세지를 보냅니다. 구글은 이를 확인하여 Yourtube에게 Access token을 발급하고 이를 바탕으로 유튜브 API 데이터를 SPA에 렌더링합니다.

2. 유튜브 좋아요 데이터 렌더링 및 검색

로그인에 성공할 경우 프론트엔드는 서버에 유튜브 좋아요 리스트를 가져오는 요청(Get)을 보냅니다. 서버는 유튜브 API에 데이터 요청이 성공했기에 좋아요 리스트를 보냅니다. 이를 React.js로 작성한 VideoList.js에서 형식에 맞춰 렌더링합니다.

검색을 할 시, 검색창에서 입력한 input값을 기준으로 필터링 요청을 서버에 전달합니다. 서버는 input값을 기준으로 필터링된 데이터를 전송하고 이를 VideoList.js에서 렌더링합니다.

3. 로그아웃

로그아웃을 할 시, 프론트엔드는 서버에 로그아웃 요청(Post)을 보냅니다. 서버는 요청이 오면 세션과 토큰을 삭제합니다. 이후 React.js로 작성한 Logout.js는 VideoList.js에서 Login.js로 화면을 다시 렌더링합니다.