17,600원
openuriz2026-03-101782696프론트강의를 진행중인데 서버를 따로 설치할 수가 없어서 파이어베이스로 수업을 진행하고자 합니다. 다른건 예전에 써봤는데 이미지 업로드는 유로 버전으로 바뀐걸로 알고있어요. 그럼 이런 경우 이미지 업로드는 어떻게 처리할 수 있나요? 일반 학원이다보니 학생들에게 유료 결재를 하게 할 수 없어서요
- mihyun Lee2022-12-09708733
수고하십니다 수강전 한가지 궁금한게있는데요, 리액트와 파이어베이스 연동해서 사용중 signInWithRedirect를 통해 iOS에서 「google로 로그인하기」하면 구글로 redirect 되지않고 다시 로그인화면으로 돌아와버리는데,(브라우저 크롬에서는 잘됨, 사파리에서는 안됨) 강사님 강의의 [Auth 활용[구글 Social 계정 로그인] 강좌]부분을 시청하면 해결할수있는 힌트를 얻을수 있을까요?
David2022-12-09227321signInWithRedirect 말고 signInWithPopup를 사용해보시는것도 방법입니다. 경우에 따라 화면을 replace하면 안되고 로그인에 관련된 팝업을 띄어야지만 되는 구조(앱,웹앱)이 있어서요. googlelogIn({ dispatch }, payload) { const provider = new firebase.auth.GoogleAuthProvider(); provider.addScope("https://www.googleapis.com/auth/plus.login"); provider.setCustomParameters({ prompt: "select_account" }); firebase .auth() .signInWithPopup(provider) .then(function (result) { }) .catch(function (err) { alert(err.message); }); },
- 김진형2022-01-06388335
강의하시는 파이어베이스버전이 어떻게 되나요?
David2022-01-061585098.10 버젼 이하 대 입니다. 새소식에 최근에 공지드린 글이 있는데 참고하시면 도움이 되실것 같습니다~
- Rechel2021-07-23263782
안녕하세요 Vue로 웹을 하고 있는데요 강의가 vue포함 미포함으로 firebase 강의가 두개더라구요. 어떤 걸 들어야 좋을지 고민이 되어서요ㅎㅎㅎ vue는 프로젝트 만들어서 운영하고 있습니다. firebase에 대한 내용이 어디가 더 자세한지 궁금합니다.
David2021-07-23124988네 안녕하세요 커리큘럼을 보시면 이해가 쉽지 않으실까 합니다. 부연 설명을 드리자면 '요즘 누가 유료로 웹서비스 구축하나, Firebase의 모든 것 - JavaScript" -> 이 강좌는 firebase를 처음 접하시는 분들이 가장 쉽게 사용할수 있게 하기 위해 javascript 랑 같이 설명을 드린거라 보시면 될듯 합니다 "요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Vue.js" -> 이 강좌는 javascript 를 강좌를 들으시고 firebase 사용 언어가 javascript 가 아니라 이제 Vue.js 로 하고 싶을때 들으시는게 좋지 않을까 합니다. ^^
- 맥기2021-05-26220768
안녕하세요. 파이어베이스로 CRUD 작업을 구글 데이터베이스 말고 외부 데이터베이스 아마존 mysql 로 연결해서 CRUD 작업을 할 수 있을까요?
David2021-05-27112626Cloud function에서 mysql접속할수 있는 모듈 설치하고 구현하실수 있읍니다
- 최정은2021-03-24178630
안녕하세요. DB파트는 어느정도 다루고 있나요? 어떻게 정렬하면 깔끔하고 정보를 불러올 때 편한지 같은 이야기를 다루는지 궁금합니다.
David2021-03-24100852네 안녕하세요 본 강의는 DB 파트의 단순 CRUD (create,read,update,delete) 에 대한 방법 및 실습으로만 구성되어 있습니다
- chl93382021-03-05165155
안녕하세요 앱에서 사용할 백엔드를 파이어베이스로 구축하고싶은데, 게시판or인스타처럼 사진을 올리거나 장바구니 기능을 구현하는걸 파이어베이스 서버로 구축할수 있는건가요?
David2021-03-0597224네.. 백엔드로 하시는 거라면 백엔드 단을 cloud function 으로 만드셔서 구축 하시면 될것 같습니다. 그런데 저희 강의는 백엔드가 아닌 프론트엔드 단에서 제어 하는걸 설명하는 강의라서요. 참고 부탁드리겠습니다.
- 빠스단2021-02-22158038
안녕하세요 강사님 제가 파이어베이스를 통해서 만든 웹사이트를 그러니까 firebasedeploy까지 다했는데요. 이후에 커스텀 도메인 등록하려고하는 과정에서 호스팅서버(블루호스트)에 연결하고싶은데 알려주실 수 있을까요? 이전에 유튜브에 올리렸던부분 보고 이렇게 찾아왔습니당 멘토링 신청하려고 보니 따로문의할곳이없어서 이곳에올리게됐네요.
David2021-02-2295448안녕하세요 우선 해당 내용은 맨 마지막 강의에 커스텀 도메인 연결 하는 방법을 부록으로 영상을 추가 했습니다. 그부분 참고해주셔두 되구요 그리고 해당 영상에도 언급은 했는데 일반 대중적인 호스팅업체(후이즈,가비아, AWS) 외에는 약간에 제약이 있어서 그부분이 해당 호스팅 등록 하는 곳에서 제공을 하는지 확인해 보셔야 될것 같습니다. 영상에 있는걸 글로 말씀 드리자면 Firebase > Hosting > 커스텀 도메인 연결 버튼을 클릭 하시면 화면에서 호스팅 업체에 넣어달라는 코드가 나옵니다. 우선 TXT 레코드는 해당 호스팅 업체 > 도메인 > 네임서버 고급설정 (-> 아마 이 이름은 호스팅 업체마다 다를듯 합니다) 에 추가해주시면 되구요 *.mydomain.com | TXT 레코드 | googlesite-verif~~~~~~ 추가한 후 다음 화면을 넘어가 면 A 레코드 추가 해달라는 내용이 뜹니다. 근데 여기서 어떤 호스팅 업체는 *.mydomain.com | A 레코드 | 151.101.1.195 -> 요렇게 도메인당 한개만 들어갈수 있게 제약이 걸려 있는데가 많아서요. 그런 제약이 없으면 화면에서 추가 해달라는 정보를 A 레코드에 추가 하시고 파이어 베이스 호스팅 화면에 추가 완료 를 하시면 대략 2~3 시간 후에 도메인 연결이 됩니다. (특이한 이슈가 없다면요 ) *.mydomain.com | A 레코드 | 151.101.1.195 *.mydomain.com | A 레코드 | 151.101.65.195
- 빠스단2021-02-20156821
안녕하세요 아직 수강전에 있는데 이강의를 들으면 혹시 파이어베이스로 웹사이트를 배포하고나서 리액트네이티브 웹뷰방식을 이용해서 모바일 앱을 배포하시는건가요? 웹페이지를 모바일앱으로 사용가능하게 하는법도 들어있나요?
David2021-02-2095091아니에 그렇지는 않습니다. 웹페이지를 모바일로 하려면 PWA 를 활용하면 되지만 JavaScript로 보다는 보통 React, Vue를 이용해서 하곤 해서요.. 현재 이강의 후 들을수 있는 Vue + Firebase 강의를 아래와 같은 커리큘럼으로 준비중에 있습니다 ^^ [Git 뽀게기] (feat. 가장 쉽게 이해하는 Git 에 모든건) Github desktop 설치 Git 계정 생성 Repository 생성 Clon Repository Branch 생성 협업시 필요한 Pull Request 방법 Github desktop 활용한 Commit/Revoke 방법 디스코드 메신저에 웹훅 연동 [Vue 개발 환경 셋업] yarn 설치 템플릿을 활용한 빌드 Firebase Hosting 에 배포 해보기 [Vue에 대한 이해] (feat. 예제로 따라하는.) Vue 에 대한 초간단 이해 Vuex 에 대한 초간단 이해 [서비스 만들어 보기] 회원가입 화면 구축 DB Insert/Update/Delete/Query 실습 물리적 파일 업로드/다운로드 관리 실습 Service Workter 연동 방법 PWA를 활용한 나의 웹서비스, 앱형태로 저장해보기 (IOS, Android)
안녕하세요. Firebase에서 이미지 업로드를 일반적인 방식으로 사용하려면 Firebase Storage에 파일을 업로드해야 합니다. 이 경우 보통 아래와 같은 코드로 이미지를 Storage에 업로드하게 되는데요. async function uploadImage(filename, file, path) { const storageRef = ref( storage, `${path}/${filename}` ); const metadata = { cacheControl: "public, max-age=31536000", contentType: file.type || "application/octet-stream" }; try { await uploadBytes(storageRef, file, metadata); const url = await getDownloadURL(storageRef); return url; } catch (error) { console.error(error); throw error; } } 다만 말씀하신것처럼 Firebase Storage를 사용하려면 해당 Firebase 프로젝트의 요금제를 Blaze 요금제(사용한 만큼 과금되는 요금제)로 업그레이드해야 합니다. 그래서 무료 플랜(Spark) 상태에서는 사용이 제한될 수 있습니다. 대안으로는 만약 이미지 크기가 크지 않은 경우라면, Storage를 사용하지 않고 이미지를 Base64 문자열로 변환하여 Firestore에 직접 저장하는 방법도 있습니다. 예를 들어 아래와 같이 이미지 데이터를 문자열로 변환한 뒤 Firestore 컬럼 값으로 저장할 수 있습니다. 그러면 무료 요금제에서도 사용이 가능하십니다. 단, Firestore는 하나의 문서(document) 크기 제한이 있기 때문에 이미지 데이터가 너무 크면 저장 시 오류가 발생할 수 있습니다. 따라서 이 방법은 해상도가 큰 이미지 보다는 일반 이미지로만 사용하는 것이 좋을것 같습니다. function fileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); reader.readAsDataURL(file); }); } const file = event.target.files[0]; //파일을 base64 문장으로 변환 const base64Image = await fileToBase64(file); ... import { doc, setDoc } from "firebase/firestore"; async function saveImage(db, base64Image) { await setDoc(doc(db, "images", "sample"), { image: base64Image, createdAt: new Date() }); }