[React] 클론코딩 NETFLIX

고정원·2021년 4월 10일
1

🙌🏻Team
총 4인 : 프론트엔드(2인) + 백엔드(2인)

구성 : 스프링 + 리액트

🌏웹사이트 링크
: http://netflixclonecoding.s3-website.ap-northeast-2.amazonaws.com/

🔍설명
실제로 프론트와 서버간에 API를 요청하고 응답받은 데이터를 활용해 넷플릭스 메인페이지에 출력해 보았다. 프론트에서는 카테고리 별로 api를 요청하기 위해 axios라이브러리를 사용했다. 스프링으로 구현한 DB에서 받아 올 수 없는 데이터는 TMDB의 오픈api를 활용해서 컨텐츠를 구성했다. 컨텐츠를 클릭했을때 상세내용이 모달로 뜨도록 구현해 보았다. 리액트와 스프링을 연동하여 배포까지 작업해 보았다.

⁎⁎TMDB(TheMovieDB) 사이트에서 영화,TV 등과 같은 여러가지 컨텐츠 정보를 제공한다. Open API를 통해 정보를 제공받을 수 있다.

♥데모영상 유튜브 링크
: https://youtu.be/ELCoz25chQg

🤪썸네일
-비로그인 랜딩페이지

-메인페이지

-상세페이지

🚀Stack
🎮 back-end
Spring
ubuntu, aws 💎 frot-end
React
JavaScript
JSX
CSS
Styled Component
aws, s3

✨After Projects
로그인/회원가입
내가 찜한 컨텐츠(컨텐츠 찜하기)
컨텐츠 좋아요, 싫어요

profile
해결문제에 대해 즐겁게 대화 할 수 있는 프론트엔드 개발자

0개의 댓글