PROJECT9 [AWS] S3, CloudFront를 통한 React 프로젝트 배포 (+ GitHub Actions) gh-page로 배포했던 개인 프로젝트를 SAA 공부하면서 실습 겸 AWS 서비스에 배포했다.프론트엔드 단독 프로젝트이기 때문에 간단하게 S3 + CloudFront 조합으로 배포했고,GitHub Actions를 활용해서 CI/CD도 구축해 봤다. 🛠️ AWS S3, CloudFront 배포 과정1. S3 버킷 생성 및 업로드1-1. 버킷 생성 시 퍼블릭 읽기 허용 설정 1-2. 생성된 버킷에 build 폴더 내 파일 업로드📌 중요! build 폴더 자체가 아니라 폴더 내 파일만 업로드 할 것. 1-3. S3 정적 웹사이트 호스팅 설정S3버킷 → 속성 → 정적 웹사이트 호스팅 [편집] 그럼 하단에 아래와 같이 사이트 엔드포인트가 생성되고, 해당 URL로 들어가면 프로젝트 화면이 뿅 + 이슈) gh-.. 2025. 4. 4. [React] 넷플릭스 클론 프로젝트 [3] - 구현 과정 및 트러블 슈팅 1. YouTubePlayer 컴포넌트동영상의 상태가 변경될 때마다 현재 상태를 store에 저장ex) playerState: { id: ' mck3JCl2uwQ ', state: 1, desc: 'PLAYING', error: null } 동영상 컨트롤 버튼은 투명하게 처리하여 해당 컴포넌트를 import 하는 컴포넌트에서 제어더보기코드)import React, { useEffect, useRef } from "react";import { useMediaStore } from "stores/mediaStore"; import styled from "styled-components";import YouTube from "react-youtube";export const YouTubePlayer = Rea.. 2025. 1. 22. [React] 넷플릭스 클론 프로젝트 [2] - 기술 및 도구 1. TMDB API프로젝트에 필요한 모든 데이터는 TMDB에서 제공하는 데이터로 활용했다.(콘텐츠 정보, 콘텐츠 이미지, 콘텐츠 로고, 유튜브 동영상 키, 추천 콘텐츠 등등) TMDB API을 사용하기 위해선 Api Key 또는 Access Token을 사용해야 한다.(API Key와 Token 발급받는 과정은 생략) 예시 코드) 영화 리스트 가져오기 const API_KEY = process.env.REACT_APP_MOVIE_API_KEY;const API_TOKEN = process.env.REACT_APP_MOVIE_API_TOKENconst BASE_URL = process.env.REACT_APP_MOVIE_BASE_FETCH// 💡 Api Key 사용 시 쿼리파라미터에 api_key={발.. 2025. 1. 22. [React] 넷플릭스 클론 프로젝트 [1] - 들어가며 들어가며Vuejs로 프론트엔드 경험을 쌓고 이직을 준비하며 React 학습의 필요성을 크게 깨달았다.인프런, 유튜브 등 무료 인강을 수강하며 React의 문법과 기초 지식을 습득하였고,개인 프로젝트를 통해 보다 더 심도 있게 React를 다뤄보기로 했다.프로젝트 주제로 뭘 할지 꽤 고민을 하며 이것저것 찾아보았으나일단 React 개발 공부가 목적이었기 때문에1. 화면 기획까진 신경 쓰고 싶지 않았고...2. 백엔드 구현도 패스하고 싶었다.. TMDB Open API를 활용하면 딱! 이겠다 싶어 넷플릭스 클론 코딩 프로젝트로 결정했다.참고 ) https://developer.themoviedb.org/reference/intro/getting-started 최대한 넷플릭스 UI/UX와 유사하게 구현하고자 .. 2025. 1. 20. [Spring] 스프링 프로젝트 - 웹 커뮤니티 'WANDERIZM' 스프링 프로젝트 주제 여행 정보 공유 웹 애플리케이션 제작 국내를 포함한 각 국가의 교통, 숙소, 맛집 등의 정보를 공유하고 블로그 형식으로 각자의 여행 후기를 업로드 할 수 있는 사이트 제작 주제 선정 이유 코로나로 인하여 장기간 해외여행 금지로 내외국인들의 여행 욕구가 커짐으로써 위드 코로나와 함께 해외여행 수요가 급증할 것으로 예상 현재 여행 정보 공유를 목적으로 하는 웹 플랫폼의 공급이 수요만큼 활발하지 않다고 생각되어 기획 결정 목표 Spring Framwork와 Mybatis Framwork 사용 MVC 패턴을 기반으로 2-Laryered 아키텍처로 구현 Ajax를 활용한 비동기 방식으로 데이터 처리 Git을 활용한 형상 관리 경험 Spring Boot로 마이그레이션 주요 기능 CKEditor.. 2021. 12. 8. [JAVA] 웹 프로젝트 - 영화 리뷰 웹 사이트 'Film-E' 프로젝트 주제 (팀 프로젝트로 진행)영화 정보를 제공 하는 영화 리뷰 웹 사이트 제작http://film-e.pe.kr Film-E | Main film-e.pe.kr주제 선정 이유With Corona로 전환을 앞두고, 영화관을 찾는 고객의 증가가 예상.- 따라서 다양한 영화 정보를 얻기 위한 사용자들의 니즈가 늘어나게 될 것으로 예측- 영화에 관한 다양한 시각들을 공유해외에는 로튼토마토, IMDB 같은 영화 리뷰를 보여주는 전문적인 사이트가 존재.- 국내 : 전문 영화 리뷰 플랫폼의 부재- 해외 : 언어적인 문제와 대한민국 정서에 특화된 디자인 구현 가능- Film-E (영화리뷰) 프로그램 기획기생충, 미나리, 오징어게임 등 전세계적으로 OTT 플랫폼 서비스를 통한 K영화,드라마에 대한 해외의 관심 증.. 2021. 10. 20. 이전 1 2 다음
