프로젝트 > OTT 업데이트

https://web-ott-front-m09fpvc47fc6ed1f.sel4.cloudtype.app/

 

https://app.cloudtype.io/@hjw1191/ott:main

react(클라우드타입 연결) & node.js( 클라우드타입)  & mongodb  (드라마 데이터) & API - 유튜브 ,tmbd, tunefind ,vibe

front 와 backend 를 같이 배포가 쉬운게 클라우드 타입(https://app.cloudtype.io/)

백엔터를 먼저 빌드 > 주소복사 > env & 하드코딩 > host 코드로 되어있는것을 백엔터 주소로 바꿈

fetch('https://port-0-ott-m09fpvc47fc6ed1f.sel4.cloudtype.app/api/dramas')

(-- 서버올릴때 backend 서브 경로를 자세히 잡아서 빌드해야함)

 

node.js (설정)

name: ott
app: node@20
options:
  env:
    - name: NODE_ENV
      value: production
  ports: "8080"
  install: npm install
  build: echo 'No build step necessary'
  start: node server.js
  buildenv: []
context:
  git:
    url: https://github.com/hjw1191/OTT.git
    branch: main
    path: backend
  preset: node

 

react(설정)

name: ott-front
app: web
options:
  nodeversion: "20"
  spa: true
  buildenv: []
  rewrites: []
context:
  git:
    url: https://github.com/hjw1191/OTT.git
    branch: main
    path: front
  preset: react

 

수정된 내용)

1.link 를 타이핑 기능과 디자인이 단조로움 > 폰트 다운 > 커스텀 질감 표현이 안됨 >

(폰트 주소) https://fontmeme.com/ktype/skyfall-done-font/#previewtool   

하나씩 이미지로 저장해서 나타나고, 커서를 대면 커짐.

 

2. 메인화면이 너무 단조로움> 드라마 페이지도 단조로움 > 둘이 합치고 , 동영상도 추가

(드라마를 누르면 관련 정보와 ost , vibe api연동)

 

3. 파이어베이스로 로그인(구글)과 회원가입 구현> 로그인이 된 상태면 > link 를 누르면 영화 페이지로 이동 > 장르 마다 분류 기능,검색 >인기영상과 트렌트 영상 분류, 밑으로 내릴 수록 영화 목록 생성( tmbd ), top 기능

분류( 장르를 누를때 마다 중복 오류 > 초기화를 시키고, 다시 업로드되게)

 

4. 메인 페이지에서 드라마(몽고티비와 연결) 하드코딩 > 서버주소와 연결한 슬라이드 구현 > 드라마를 누르면 서버주소)와 연결한 해당하는 id를 불러와서 제목 정보, 이미지, vibe api 연동이 나옴.

 

5.영화 이미지를 누르면 관련 내용과 ost, 예고편 버튼 ( tmbd, 유튜브,  tunefind ) 이 있고, 모달창으로 ost와 예고편이 구현.

 

6. 로그인 기능 (파이어베이스) 쓰면 편하다.

https://console.firebase.google.com/project/sdfsdf-df9e6/authentication/users?hl=ko

 

7.코드는 클라우드 ai가 휠씬 잘 나온다. 파일을 업로드하고 명령할것!

 

알게된 내용 )

1. html 파일을 front와 backend 파일로 나누어서 연동, 서버 배포, 깃 푸시

2.깃허브 > 전체 파일올리고, front의 페이지 수정, front의 전체 폴더 올려서 깃허브 푸시. 

(https://github.com/hjw1191/OTT)

3. 처음 구현해본 web 사이트, ai 도움과 구글의 도움으로 구현해봄.

코드를 하나하나 다 짜진 못했지만, api 기능과 여러 css적인 기능(버전 오류> 단조롭게 만듬, 폰트의문제 등) , react와 nodj.s의 서버 연동, api 연동,(로컬저장로 저장해서, 그에 맞는 내용이 나오는기능), 분류하는 방법 등..

고질적인 깃푸시 문제로 수십번의 연습으로 깃허브 , 등 어떻게 돌아가는지 알게됨

 

기타> ai가 만든 영상 https://smilegate.ai/2024/05/20/ai%EB%A1%9C-1%EB%B6%84%EC%A7%9C%EB%A6%AC-%EC%98%81%ED%99%94-%EC%98%88%EA%B3%A0%ED%8E%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-stable-video-chatgpt-midjourney/