사이트 주소:https://oneday-ten.web.app/
깃헙 리포지토리:https://github.com/woominKO/Today_ten
주요기능:
내 노래 취향을 많은 사람들에게 알리기 위해 만들기 시작했다.
woomin422@gmail.com으로 로그인 되야만 노래를 올릴 수 있다. 노래는 youtube url형태로 입력받아서 표 형태로 노래 동영상 10곡을 쭉 업로드 한다. 또한 노래는 삭제도 가능하며 업로드도 가능하다.
기술스택: HTMl,CSS,JS,Firebase
작동로직:(4/27까지 이 글이 써지기 시작한것은 조금 지났으므로 내가 구현하고자 하는것들을 일부 구현했다.)
[요약]
이 코드는 Firebase Authentication을 사용하여 Google 로그인을 구현하고, 사용자 인증 정보를 사용하여 UI 동작을 제어하며, 유효한 유튜브 링크를 통해 동적으로 iframe 요소를 생성하는 작동 로직을 가지고 있다.
[자세한 로직]
먼저 initializeApp() 함수를 사용하여 Firebase 앱을 초기화하고, getAuth() 함수를 사용하여 인증 객체를 가져온다. 그런 다음 new GoogleAuthProvider()를 통해 구글 로그인 인증 공급자를 만들어서 signInWithPopup() 함수를 호출하여 로그인을 수행한다. 사용자가 로그인을 수행하면 then() 함수가 호출되고, 로그인 결과에 대한 정보가 인자로 전달된다.
이 정보를 사용하여, credential.accessToken를 사용하여 사용자의 인증 토큰을 가져온다. 또한, result.user를 사용하여 사용자의 정보를 가져옵니다. 그리고 이 사용자 정보에서 이메일을 가져와서 이메일이 특정 조건을 만족하는지 확인하고, 액세스를 허용할지 말지 결정한다. 이메일이 특정 조건을 만족하지 않는 경우, 사용자는 로그아웃 처리된다.
onAuthStateChanged() 함수는 사용자의 인증 상태가 변경될 때마다 호출된다. 사용자가 로그인한 경우, UI를 업데이트하여 로그아웃 버튼과 곡 추가 기능을 활성화하고, 로그인하지 않은 경우, 로그인 버튼과 곡 추가 기능을 비활성화환다.
create() 함수는 사용자가 유효한 유튜브 공유 링크를 입력할 때마다 동적으로 iframe 요소를 생성한다. querySelector() 함수를 사용하여 입력된 값을 가져온 후, includes() 메소드를 사용하여 유튜브 링크가 올바른지 확인한다. 유튜브 링크가 올바른 경우, 해당 링크에서 유튜브 동영상을 가져와 iframe 요소로 추가한다. 유효한 링크가 아닌 경우, 사용자에게 알림 창을 표시한다.
따라서 이 코드는 Firebase Authentication을 사용하여 Google 로그인을 구현하고, 사용자 인증 정보를 사용하여 UI 동작을 제어하며, 유효한 유튜브 링크를 통해 동적으로 iframe 요소를 생성하는 작동 로직을 가지고 있다.
[로그인 로그아웃 로직에 대한 추가설명]
이 코드에서는 signInWithPopup() 함수와 signOut() 함수를 사용하여 로그인과 로그아웃을 구현한다.
먼저, signInWithPopup(auth, provider) 함수는 Google 로그인 공급자(provider)를 사용하여 팝업창을 띄우고 사용자가 Google 계정으로 로그인하도록 유도합니다. 사용자가 로그인을 완료하면, 로그인 정보가 Promise 형태로 반환된다. then() 함수를 사용하여 Promise가 처리된 후에 실행될 로직을 정의한다.
로그인 정보에서 credential.accessToken를 사용하여 사용자의 인증 토큰을 가져온다. 또한, result.user를 사용하여 사용자의 정보를 가져온다. 그리고 이 사용자 정보에서 이메일을 가져와서 이메일이 특정 조건을 만족하는지 확인하고, 액세스를 허용할지 말지 결정한다. 이메일이 특정 조건을 만족하지 않는 경우, signOut() 함수를 호출하여 사용자를 로그아웃 처리한다.
signOut() 함수는 현재 인증된 사용자를 로그아웃 처리한다. 사용자가 로그아웃하면, then() 함수가 호출되고, 로그아웃 처리가 성공적으로 완료된 경우에는 alert() 함수를 사용하여 메시지를 표시한다. 로그아웃 처리 중 오류가 발생한 경우에는 catch() 함수가 호출되고, 오류 메시지가 출력된다.
한계:
파이어베이스 공식문서를 전부 이해할 수 없어서 gpt의 힘을 빌렸다. admin로그인 기능은 거의 gpt가 했다. 자괴감이 들었다. 앞으로는 구글만을 이용해서 코딩을 해야겠다. 그래야 실력이 느니까.. 이것을 다 만든 후에는 내 사이트를 다시 클론코딩해서 기본 파이어베이스 문법과 자바스크립트 이벤트문법을 잘 이해하게 할 것이다.
추가하고 싶은 기능:
1.+버튼 누르고 입력폼에 유튜브 링크 입력하면 유튜브 동영상 박스가 동적으로 html에 생성되게 하기 (구현됨)
2.firestore에 내가 올린 동영상 지우고 올리기 기능
3.사이트에 날짜 표시하기
