$$config title: Netflix Clone Coding 기술 설명서 keywords: - IntelliJ - React - Spring-Boot - DaisyUI - Tailwind - Docker - Ubuntu - VScode - Xammp - Putty - Aws - GitHub $$ # 개요 - react로 프론트를 제작하고 spring-boot로 백엔드를 구현하여 Netflix를 clone coding을 하였습니다. - 실제 Neflix 사이트와 유사하게 만들었으며 백엔드 구조는 할 수 있는 기술 내로 제작하였습니다. ## 원격 저장소 [Netflix-front](https://github.com/BaeSangUn/netflix-front) [Netflix-backend](https://github.com/project-ootd/netflix-db) ## 배포된 서버 [Netflix-Clone](http://beedue.site:3000) # 사용한 프로그램 및 사이트 ### 파일 업로드 - GitHub ### 개발 환경 - IntelliJ - VScode - Xammp - Putty - Aws ### 기술 스택 - React - Spring-Boot - DaisyUI - Tailwind - Docker - Ubuntu # 구현한 기능 - 로그인 로그아웃 - 검색 - 카카오 페이 결제 - 이미지 호버시 확대 및 영상 재생 - 영상 재생 - 찜 - 컨텐츠 종류 별로 나열 - 프로필 수정 ## 요구 사항 #### 회원가입 - 회원 가입을 할때에 비밀번호를 1자리로도 회원가입이 가능하다는 것을 알고 비밀번호의 길이가 8자 이상일때 가입할 수 있도록 제한을 주었다. #### 결제 유저와 비결제 유저의 접근 제한 - user의 데이터 값에 LastPaymentDate라는 컬름을 새로 만들어서 그 안의 값은 처음엔 null 값으로 만들어지며 그 값이 null일 경우에 결제 페이지로 이동 하도록 만들었으며 새로운 컬럼은 결제시에 값이 들어가도록 백엔드 구조를 짜 놓았다. #### 프로필 추가 삭제 및 수정 - 넷플릭스를 사용하면 최고 요금제로 4인의 프로필을 만들 수 있으며 그 프로필을 만들어서 이용이 가능하도록 만들었으며 각자 별명도 다 다르게 설정이 되도록 만들었다. #### 호버 시켰을때 영상 재생 또는 사진 확대 - 마우스를 가져다 대면 랭킹 순위 안에 있는 컨텐츠들은 준비해놓은 영상들이 재생이되며 다른 컨텐츠들은 영상재생은 안돼지만 마우스를 올렸을때 확대가 되며 재생, 찜하기, 상세정보를볼 수 있는 모달 버튼을 클릭해서 이용이 가능 하도록 만들었다. #### 검색창 - 검색페이지로 넘어가는게 아니라 검색창에 입력을 하면 자연스럽게 페이지가 이동이 되는 것을 똑같이 표현 하였으며 한글자 한글자 입력을 할때마다 해당하는 컨텐츠들이 나온다. #### 내가찜한 컨텐츠 페이지 - 해당하는 컨텐츠의 호버시켰을때 누르는 찜하기 버튼이나 모달 버튼에서 누르는 찜하기 버튼들로 값을 받아와서 해당하는 유저의 아이디값과 해당하는 컨텐츠의 값을 가져와서 찜목록에 넣어주고 해당하는 값들만 가져오게 만들었다. #### 카카오페이 결제 - 카카오페이 API를 사용해서 만들었으며 결제를 해야지만 고유의 값을 받아 올 수 있도록 만들었다. #### 컨텐츠 종류별 정렬 - section 엘리먼트의 값이 변경이 되면 해당하는 컨턴츠의 값을 백엔드로 보내서 그 보낸 값에 해당하는 DB의 아이템들을 가지고 오게 하였다. #### 해당하는 컨텐츠의 영상 재생 - 해당하는 컨텐츠의 아이디 값을 받아와서 영상이 재생되도록 만들었음 # 기능 상세 설명 ### 회원 - 회원가입 - 로그인 , 로그아웃 - 카카오페이 결제 - 프로필 수정 및 추가, 삭제 - 동영상 시청 가능 - 내가 찜한 컨텐츠 사용가능 ### 검색 - 입력한 키워드가 들어간 모든 컨텐츠들을 불러옴 - 자음, 모음만 입력해도 해당하는 컨텐츠들을 불러옴 ### 애니메이션 작업 - 컨텐츠에 마우스를 올리면 작품의 간단한 상세정보 노출 - 펼쳐보기 버튼을 누르면 작품에 대한 설명과 총 몇부작인지 알 수 있는 상세 정보들이 나와있음 - 슬라이드를 이용하여 오른쪽 왼쪽 화살표를 누르면 컨텐츠가 바뀌도록 만듦 - 찜하기 버튼이 누르면 바로바로 활성화가 되도록 만듦 # 주요 폴더 및 파일 ### Front Foloder ``` - compononts - Styles ``` ### Front Files ``` - Allcontenst - ChoiceProfile - First - KakaoInfo - Modal - Search - MyList - RankingSlide - SlideImg - SlideVideo ``` ### Back-End ``` - auth - jwt - JwtAuthenticationFilter - JwtAuthorizaiongFilter - JwtProperties - ResponseDto - PrincipalDetails - PrincipalDetailsService - Category - controller - CategoryController - repository - CategoryRepository - CategoryRepositoryCustom - CategoryRepositoryImpl - domain - Category - dto - CategoryDto - service - CategoryService - Config - AppConfig - CorsConfig - SecurityConfig - Contents - controller - ContentsController - dao - ContentsRepository - domain - NetflixContentsDetail - NetflixContents - dto - NetflixDto - NetflixDetailDto - service - ContentsService - kakao - controller - SampleController - dao - ContentsRepository - domain - ReadyResponseVO - service - KakaoPay - ReadyResponese - likelist - controller - LikeListController - repository - LikeListRepository - LikeListRepositoryCustom - LikeListRepositoryImpl - domain - LikeList - dto - LikeList Dto - service - LikeLis Service - order - Controller - OrderController - dao - OrderRepository - domain - PayOrder - service - OrderService - user - controller - UserController - domain - ProfileImg - ProfileName - User - dto - ProfileImgDto - ProfileNameDto - UserDto - ProfileUserDto - service - ProfileNameService - UserService - NetflixApplication ``` # ERD ## 기술설명 ### 메인 화면 ![Main](https://i.imgur.com/cwBnyVq.jpg) - 메인 화면에서는 실제 넷플릭스와 동일하게 영상 및 회원가입 로그인 언어변경 등을 프론트에서 구축 하였습니다. #### 소스코드 ##### Front ```html import React from "react"; import logo from "../img/logo.png"; import "../styles/First.css"; import Footer from "./Footer"; import { useState } from "react"; const First = () => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onClick = () => { sessionStorage.setItem("regEmail", value); }; return (

{/*

*/}

로그인

영화와 시리즈를

무제한으로.

다양한 디바이스에서 시청하세요. 언제든 해지하실 수 있습니다.

시청할 준비가 되셨나요? 멤버십을 등록하거나 재시작하려면 이메일 주소를 입력하세요.

시작하기 >{" "}

TV로 즐기세요.

스마트 TV, PlayStation, Xbox, Chromecast, Apple TV, 블루레이 플레이어 등 다양한 디바이스에서 시청하세요.

기묘한 이야기

저장 중 ...

즐겨 보는 콘텐츠를 저장해 오프라인으로 시청하세요.

간편하게 저장하고 빈틈없이 즐겨보세요.

다양한 디바이스에서 시청하세요.

각종 영화와 시리즈를 스마트폰, 태블릿, 노트북, TV에서 무제한으로 스트리밍하세요. 추가 요금이 전혀 없습니다.

어린이 전용 프로필을 만들어 보세요.

자기만의 공간에서 좋아하는 캐릭터와 즐기는 신나는 모험. 자녀에게 이 특별한 경험을 선물하세요. 넷플릭스 회원이라면 무료입니다.

); }; export default First; ``` ### 회원가입 화면 ![RegForm](https://i.imgur.com/4eXNVG9.png) - 회원가입 화면에서는 실제 넷플릭스와 동일하게 이메일이 아니면 가입이 불가능하게 백엔드에서 제한을 주었습니다. - 데이터베이스에서 동일한 이메일이 없으면 가입이 완료가 되고 동일한 이메일이 있다면 중복된 이메일로 확인하여 회원가입 실패가 나오도록 하였습니다. #### 소스코드 ##### Front ```html import React, { useState } from "react"; import "../styles/RegForm.css"; import axios from "axios"; import { BACKEND_URL } from "../utils"; import { useNavigate } from "react-router-dom"; import IntroHeader from "./IntroHeader"; import IntroFooter from "./IntroFooter"; import { useEffect } from "react"; const RegForm = () => { const [useremail, setUseremail] = useState(""); const [password, setPassword] = useState(""); const navigate = useNavigate(); const onNav = () => { navigate(`/login`); }; useEffect(() => { setUseremail(sessionStorage.getItem("regEmail")); }, []); const onClick = () => { sessionStorage.removeItem("regEmail"); }; return (

1/3단계

비밀번호를 설정해 멤버십을 시작하세요.

몇 단계만 더 거치면 넷플릭스 가입 완료 !
복잡한 단계는 모두 없앴습니다.

{ e.preventDefault(); if (!useremail || !password) { alert("입력값이 없습니다."); } else if (password.length < 6) { alert("비밀번호는 6글자 이상이어야합니다."); } else { try { const data = await axios({ url: `${BACKEND_URL}/api/v1/join`, method: "POST", data: { useremail, password, }, }); setUseremail(""); setPassword(""); alert("회원가입 성공"); onNav(); } catch (e) { alert("중복된 아이디 입니다."); } } }} > { setUseremail(e.target.value); }} style={{ textTransform: "lowercase" }} /> { setPassword(e.target.value); }} style={{ textTransform: "lowercase" }} />

예, 저는 개인정보 처리방침에 따른 개인정보 수집 및 활용에 동의합니다.

예, 넷플릭스 특별 할인 알림 이메일을 보내주세요. (선택 사항)

); }; export default RegForm; ``` #### Back-End - UserContller ```java @PostMapping("/join") public String setUser(@RequestBody User user) { userService.join(user); ProfileImg profileImg = profileNameService.findById(String.valueOf(1)); profileNameService.setNickName(user, user.getUseremail(), profileImg); return "회원가입 완료"; } ``` - UserService ```java public User join(User user) { user.setPassword(passwordEncoder.encode(user.getPassword())); user.setRoles("ROLE_USER"); userRepository.save(user); return user; } ``` ### 로그인 화면 ![Login](https://i.imgur.com/v7z62M3.jpg) - 회원가입 후 로그인 화면으로 전환이 되게 만들었습니다. - 데이터 베이스에 이메일과 비밀번호가 존재 하지 않거나 비밀번호가 다르다면 로그인 실패라는 메세지가 나오도록 설정 하였습니다. #### 소스코드 ##### Front ```html import React, { useEffect, useState } from "react"; import "../styles/Login.css"; import logo from "../img/logo.png"; import axios from "axios"; import { BACKEND_URL } from "../utils"; import { useNavigate } from "react-router-dom"; import { useRecoilState } from "recoil"; import { userState } from "../recoil"; import { Buffer } from "buffer"; import { authenticationState } from "../recoil/store"; const Login = () => { const [useremail, setUseremail] = useState(""); const [password, setPassword] = useState(""); const [userId, setUserId] = useState(""); const [authenticated, setAuthenticated] = useRecoilState(authenticationState); const navigate = useNavigate(); const choiceprofile = () => { navigate(`/choiceprofile`); }; const payinfo = () => { navigate(`/payinfo`); }; const [user, setUser] = useRecoilState(userState); return (

{ e.preventDefault(); if (!useremail || !password) { alert("입력값이 없습니다."); } else { try { const data = await axios({ url: `${BACKEND_URL}/api/v1/login`, method: "POST", data: { useremail, password, }, }); if (data.headers.authorization) { const payload = JSON.parse( Buffer.from( data.headers.authorization.split(" ")[1].split(".")[1], "base64" ).toString("ascii") ); setUser(payload); setUserId(payload.username); sessionStorage.setItem("email", payload.username); sessionStorage.setItem("userId", payload.userId); } setUseremail(""); setPassword(""); alert("로그인 성공"); setAuthenticated(true); const payChk = await axios({ url: `${BACKEND_URL}/api/v1/getLastPayDate`, method: "POST", headers: { Authorization: data.headers.authorization, }, data: { useremail, }, }); sessionStorage.setItem( "userToken", data.headers.authorization ); if (payChk.data.lastPaymentDate) { choiceprofile(); } else { payinfo(); } } catch (e) { alert("로그인 실패"); } } }} > { setUseremail(e.target.value); }} style={{ textTransform: "lowercase" }} /> { setPassword(e.target.value); }} style={{ textTransform: "lowercase" }} />

로그인 정보 저장

도움이 필요하신가요?

Netflix 회원이 아닌가요? 지금 가입하세요.

이 페이지는 Google reCAPTCHA의 보호를 받아 사용자가 로봇이 아님을 확인합니다. 자세히 알아보기.

질문이 있으신가요? 문의 전화: 010-1234-1234

넷플릭스 대한민국

넷플릭스서비시스코리아 유한회사 통신판매업신고번호: 제2018-서울종로-0426호 전화번호: 080-001-9587
대표: 레지널드 숀 톰프슨
이메일 주소: korea@netflix.com 주소: 대한민국 서울특별시 종로구 우정국로 26, 센트로폴리스 A동 20층 우편번호 03161
사업자등록번호: 165-87-00119
클라우드 호스팅: Amazon Web Services Inc.
공정거래위원회 웹사이트

); }; export default Login; ``` ##### Back-End - UserController ### 결제 화면 ![PayInfo](https://i.imgur.com/FsobRzX.png) - 로그인 이후 결제가 되지 않은 계정이라면 결제 페이지로 이동이 되고 아래의 결제하기 버튼을 눌러서 카카오페이 API를 이용한 결제페이지로 이동 됩니다. #### 소스코드 ``` ``` ### 카카오 페이 결제 화면 ![카카오페이 결제 전](https://i.imgur.com/0PpLop8.png) - 결제 전에는 카카오페이 API를 이용해서 QR코드나 카카오톡으로 결제 메세지를 보내는 것을 구현 하였습니다. ![카카오페이 결제 후](https://i.imgur.com/qfzB95y.png) - 결제가 성공이 된다고 하면 API의 설정에서 다음 페이지로 넘어갈 수 있도록 백엔드에서 설정을 하여 페이지 이동이 되도록 구현 하였습니다. #### 소스코드 ``` ``` ### 프로필 선택 화면 ![ChoiceProfile](https://i.imgur.com/6I2jOqG.png) - 결제가 되어있는 계정이라면 바로 프로필을 고를 수 있는 페이지로 이동하게 됩니다. #### 소스코드 ``` ``` ### 프로필 수정 페이지 ![ChoiceProfile-Setting](https://i.imgur.com/n1ILyll.png) - 프로필 수정 박스를 눌러 들어와지는 수정 페이지의 첫 페이지 입니다. ![ChoiceProfile-Change](https://i.imgur.com/B0nAqHm.png) - 이름과 프로필 사진들을 수정 할 수 있는 페이지 입니다. #### 소스코드 ``` ``` ### 컨텐츠 메인화면 ![Contents-Main](https://i.imgur.com/PNuYQDV.jpg) - 결제가 되어있는 계정으로 접속을 할 시 볼 수 있는 컨텐츠 메인입니다. 실제 넷플릭스와 동일하게 만들었으며 재생 버튼 등 영상 무한 재생 등 저희가 만들기 시작한 날짜의 기준으로 완성을 하였습니다. #### 소스코드 ``` ``` ### 컨텐츠 호버 박스 ![Contents-box-hover](https://i.imgur.com/sFGOzUv.jpg) - 각각의 컨텐츠에 마우스를 올리면 사진처럼 영상이나 사진이 커지면서 재생이 됩니다. 그 안에서 재생 버튼과 찜하기 버튼과 상세보기 버튼을 제작하였습니다. #### 소스코드 ``` ``` ### 모달 박스 (컨텐츠 상세 보기) ![모달 박스](https://i.imgur.com/8l3rkC9.png) - 해당 하는 컨텐츠의 데이터 값을 데이터 베이스로 보내서 각각 회차의 알맞는 줄거리 등 정보들을 확인 할 수 있습니다. #### 소스코드 ``` ``` ### 내가 찜한 컨텐츠 ![찜목록](https://i.imgur.com/0ARsszN.png) - 위의 모달 컨텐츠 호버박스의 `+`버튼을 눌러서 `✔️` 모양으로 바뀌면 찜한 컨텐츠로 그 컨텐츠가 이동이 되고 찜한 컨텐츠 내에서 한번 더 눌러서 취소를 한다고 하면 그 자리에서 바로 사라지도록 만들었습니다. #### 소스코드 ``` ``` ### 검색 페이지 ![서치 페이지](https://i.imgur.com/mgxu9jK.jpg) - 자음 모음 하나하나 키워드로 백엔드로 보내서 데이터베이스에 유사한 컨텐츠들을 검색을 하여 컨텐츠들이 불러와 지도록 만들었고 해당하는 컨텐츠는 화면 나오도록 만들었습니다. #### 소스코드 ``` ```

영화와 시리즈를 무제한으로.