본문 바로가기

💡웹 프로젝트/(풀스택)YOUTUBE - 클론코딩

(6)

프로젝트 소개 [SHTUBE : YOUTUBE 클론코딩] SHTUBE : youtube clone site 시연 동영상 > www.youtube.com/watch?v=slHIeCxyuPU github 바로가기 > github.com/seunghyun1003/youtube 본 프로젝트는 YOUTUBE클론코딩을 통해 전반적인 웹 개발 공부를 하기 위한 목적으로 제작하였습니다. 1. 프로젝트 특징 프레임워크를 이용하지 않고 순수 JavaScript로 구현하였습니다. 전체 웹 개발을 개인으로 진행하였습니다. 2. 구현 기능 반응형 웹 다크 모드 동영상 게시물 CRUD 게시물 검색 동영상 별 댓글, 좋아요, 보관함 기능 계정 정보관리 3. 사용한 언어&프레임워크 언어 프레임워크 Front-End javascript no framework Back-End python D..

다크 모드 구현 다크 모드, 라이트 모드 토글 기능을 구현하였습니다. 참고 사이트 > A Complete Guide to Dark Mode on the Web "토글 테마" 웹 사이트의 테마를 결정하는 경우는 아래 3가지의 경우가 있다. 운영체제 수준의 다크 모드 사용자의 테마 설정 저장 위 두가지 경우가 아니면 라이트 모드 코드 설명 localStorage의 값을 불러와 그 값이 "dark"로 설정된 경우 스타일 시트 연결 href 속성값을 dark-theme.css파일로 변경한다. "dark"가 아닌 경우는 스타일 시트 연결 href 속성값을 light-theme.css파일로 변경한다. "토글 버튼" 클릭시 ToggleTheme함수 호출 ToggleTheme() 함수 : 사용자가 시스템 설정에서 선택한 테마에 따라 ..

동영상파일 수정, 삭제 구현 firebase의 cloud-firestore에서 파일을 삭제하는 기능과 동영상 파일을 url 공유를 통해 공유하는 기능을 구현하였습니다. "데이터 삭제" Cloud Firestore에서 데이터 삭제 - Firebase공식 사이트 참고 게시물 코드 설명 ※ 저번 게시물에서 저장된 파일 리스트를 보여주는 함수 였던 renderFile함수에서 "삭제 버튼"에 관련된 코드를 추가해주었다. 리스트 내에서 파일명 옆에 생성된 삭제 버튼을 클릭하면 removeChild()메서드를 이용해 element를 삭제하고, delete()메서드를 이용해 firestore내에서 문서를 삭제한다. 결과

Firebase의 Firestore와 Storage를 이용해 파일 업로드, 파일 정보 가져오기 firebase의 authAuthentication을 통해 로그인한 사용자만 cloud-firestore에 파일을 저장하는 기능을 구현하였습니다. Cloud Firestore 이해하기 > Firebase 공식 사이트 참고 게시물 "데이터 추가" Cloud Firestore에 데이터 추가 - Firebase 공식 사이트 참고 게시물 웹에서 Storage로 파일 업로드 - Firebase 공식 사이트 참고 게시물 코드 설명 "파일 저장 버튼"을 클릭하면 인증 제공업체(google)에 현재 로그인한 사용자의 정보를 가져온다. 로그인된 사용자면 firestore, storage에 파일을 추가할 수 있는 addFile함수를 호출하고, 로그인되지 않은 사용자라면 로그인을 할 수 있는 팝업창이 뜨도록 한다. addF..

Firebase을 이용해 Authentication, Hosting 하기 firebase의 기존 자바스크립트 프로젝트를 추가하고, 프로젝트에 간단히 구글로 로그인하거나 구글로 부터 사용자 정보를 제공받을 수 있도록 도와주는 기능을 구현하였다. "자바스크립트 프로젝트에 Firebase추가" Firebase공식 사이트 참고 게시물 파이어베이스를 이용해 서버 이용해 프로젝트를 웹사이트에서 확인하려면 터미널에 firebase serve 입력 "Firebase의 Authentication로 구글 로그인 구현" Firebase공식 사이트 참고 게시물 1. 구글로 로그인, 로그아웃 1) 코드 설명 firebase.auth().signInWithPopup(provider); // 구글 로그인 팝업 창 실행 firebase.auth().signOut(); //구글 계정 로그아웃 (fireba..

프론트 엔드 개발 모바일, 태블릿, PC버전의 반응형 웹사이트 iframe태그를 이용해 유튜브 영상 가져오기 - 동영상도 반응형으로! 다크모드,라이트모드로 바꿀 수 있는 토글버튼 슬라이드 메뉴 1. 모바일, 태블릿, PC버전의 반응형 웹사이트 2. iframe태그를 이용해 유튜브 영상 가져오기 3. 다크모드,라이트모드로 바꿀 수 있는 토글버튼 4. 슬라이드 메뉴

이전 1 다음

티스토리툴바