Latest posts

  • Firebase 배우기 43 – 간단하게 만들었지만, 편리한 파이어스토어 Database 필드 관리 toolbox

    Firebase 배우기 43 – 간단하게 만들었지만,  편리한 파이어스토어 Database 필드 관리 toolbox

    파이어베이스를 이용하여 파이어스토어 데이터베이스에 이런저런 데이터를 저장하다 보면, 미처 생각하지 못했던 필드를 추가하거나, 기존에 지정해 두었던 필드의 이름을 변경해야 하는 일들이 생기곤 한다. 또한 문자열로 저장되어 있지만, 데이터 유형을 숫자로 변경하거나, 또는 그 반대의 경우들도 많이 생기곤 한다. ​ 나 역시 웹서비스를 하나씩 만들다 보니, 생각이 진전됨에 따라, 기존에 만들어둔 컬렉션에 미처 생각하지 못했던 필드를…

    Read more

  • Firebase 배우기 42 – 파이어베이스 컬렉션 자료로 웹에서 그래프 그리기

    Firebase 배우기 42 – 파이어베이스 컬렉션 자료로 웹에서 그래프 그리기

    여러 가지 종류의 데이타를 파이어베이스에 컬렉션 형태로 저장하다 보면, 경향성을 살펴보기 위해서는 숫자보다는 그래프화하여 데이타를 검토하는 것이 더욱 효율적인 경우가 매우 많다. ​ 이러한 경우에 가장 흔한 것 중의 하나는 환율 동향이나, 다음과 같은 주가지수 같은 것인데, 파이어베이스 자체로는 그래프 기능을 지원하지 않지만, 파이어베이스를 Chart Library와 함께 사용하면, 파이어스토어에 저장된 데이타로 웹상에서 그래프를 쉽게 만들어…

    Read more

  • Firebase 배우기 41 – 가입자의 탈퇴 처리 구현 방법

    Firebase 배우기 41 – 가입자의 탈퇴 처리 구현 방법

    파이어베이스 회원가입 및 로그인, 패스워드 변경 파이어베이스를 사용 시 이메일과 패스워드를 이용하여, 사용자의 회원가입과, 로그인, 패스워드 변경 등을 처리하는 과정을 다음 각각의 글로 자세히 소개한 바 있었다. ​ 회원가입 : https://blog.naver.com/mythee1/223495997534 로그인 처리 : https://blog.naver.com/mythee1/223496032686 패스워드 변경 : https://blog.naver.com/mythee1/223552724165 Firebase 배우기 40 – 가입자의 로그인 패스워드 변경 처리하기 회원가입과 로그인 처리 앞선 2개의 글에서, 파이어베이스로…

    Read more

  • Firebase 배우기 40 – 가입자의 로그인 패스워드 변경 처리하기

    Firebase 배우기 40 – 가입자의 로그인 패스워드 변경 처리하기

    회원가입과 로그인 처리 앞선 2개의 글에서, 파이어베이스로 웹서비스 시 사용자가 email 정보와 임의의 패스워드를 이용해 계정을 생성하는 방법으로 회원가입을 처리하는 방법( https://blog.naver.com/mythee1/223495997534)과 Firebase 배우기 7 – 웹서비스 사용자 가입 처리 Firebase에서는 서비스 가입자에 대한 가입자 등록과 관련된 기능을 쉽게 구현할 수 있도록 firebase-auth… blog.naver.com 이렇게 가입한 사용자의 로그인 과정을 처리(https://blog.naver.com/mythee1/223496032686)하는 방법을 소개한 바 있었다. Firebase…

    Read more

  • Firebase 배우기 39 – 파이어베이스에 OTT비슷한 동영상 라이브러리 만들기 – 동영상 업로드 및 선택적 재생 구현하기

    Firebase 배우기 39 – 파이어베이스에 OTT비슷한 동영상 라이브러리 만들기 – 동영상 업로드 및 선택적 재생 구현하기

    앞선 글들에서 파이어 베이스로 간단한 웹서비스를 만들다 보니, 특정 제품이나 페이지에 연계해서 동영상들을 파이어베이스에 업로드하는 기능과, 필요할 때마다 이렇게 파이어베이스에 업로드된 여러의 동영상들 중에서 원하는 것을 선택해 재생할 수 있으면 좋을 것 같았다. ​ 이렇게 한다면 특정 상품에 연계된 동영상을 저장 및 재생할 수도 있어, 상품을 소개하는데 좋을 것 같기도 했고, 또한 같은 방식을 동영상…

    Read more

  • Firebase 배우기 38 – Firebase 보안규칙을 규칙 파일로 설정하기

    Firebase 배우기 38 – Firebase 보안규칙을 규칙 파일로 설정하기

    Firebase로 웹서비스를 만들어 배포(deploy)를 하다 보면, 파이어 베이스의 보안규칙도 함께 갱신되는데, 만일 파이어 베이스 초기설정 시 보안규칙을 사용자가 별도로 설정해 주지 않았다면, 기본값으로 초기화되게 된다. ​ 이 때문에, DB 등의 자료를 저장하는 Firestore는 다음과 같은 형태로 보안규칙이 초기화되고, ​ 사진 파일 등을 저장하는 storage는 다음과 같은 방식으로 보안규칙이 초기화되는 때문에 ​ 정상적으로 작동하던 웹서비스가 새롭게…

    Read more

  • Firebase 배우기 37 – Firebase로 게시판에 댓글 기능 추가하기

    Firebase 배우기 37 – Firebase로 게시판에 댓글 기능 추가하기

    게시판 만들기 basics 앞선 4개의 글을 통해 파이어베이스를 이용해, 게시판 기능을 구현하는 방법을 소개한 바 있었다. 게시판을 구현하는 과정의 각각의 가능 부분별로 다음 페이지에 나누어 소개했었다. ​ 기본 게시판 생성 https://blog.naver.com/mythee1/223499829728 삭제 편집 기능 https://blog.naver.com/mythee1/223510579210 페이지 분할표시 https://blog.naver.com/mythee1/223510496924 제목에 링크 적용 및 포맷 개선 https://blog.naver.com/mythee1/223520566018 ​ ​ 결과적으로 다음과 같은 게시판 글 목록을 먼저 페이지…

    Read more

  • Firebase 배우기 36 – HTML 출력 시 화면 여백을 container 적용과 style 구문의 padding 값으로 조절하기

    Firebase 배우기 36 – HTML 출력 시 화면 여백을 container 적용과 style 구문의 padding 값으로 조절하기

    파이어 베이스를 이용하여 웹서비스를 만들다 보면, HTML을 이용하여 여러 가지 화면 출력을 하게 되는데 매 상황별로, 화면에서 여백을 조절할 필요가 있는데, 나는 화면의 좌우측 여백을 다음과 같은 방법으로 조절한다. ​ ​ 예를 들어 다음과 같은 간단한 로그인 화면을 만드는 경우라면, 다음과 같은 HTML을 사용하면, ​ 다음과 같은 로그인 입력 화면을 표시할 수 있는데, 위와 같이…

    Read more

  • Firebase 배우기 35 – Firebase에서 만든 앨범 기능으로 간단한 쿠폰북 페이지 구현하기

    Firebase 배우기 35 – Firebase에서 만든 앨범 기능으로 간단한 쿠폰북 페이지 구현하기

    파이어베이스로 간단한 앨범 기능 구현하기 바로 앞의 글에서 파이어베이스의 스토리지 기능과, URL 정보를 파이어 스토어 Database에 저장하는 아주 간단한 기능으로, 초보적인 사진 앨범 기능을 만드는 것을 소개한 바 있었다. https://blog.naver.com/mythee1/223535102853 Firebase 배우기 34 – Firebase로 앨범 기능 구현하기 앨범 페이지를 만들어볼까? 파이어베이스로 간단한 상품 소개 웹서비스를 만들면서, 문득 여러 상품 사진들… blog.naver.com ​ ​ 여러…

    Read more

  • Firebase 배우기 34 – Firebase로 앨범 기능 구현하기

    Firebase 배우기 34 – Firebase로 앨범 기능 구현하기

    앨범 페이지를 만들어볼까? 파이어베이스로 간단한 상품 소개 웹서비스를 만들면서, 문득 여러 상품 사진들을 쭉 나열해서 살펴볼 수 있는 앨범 같은 기능이 있으면 좋겠다는 생각이 들었다. 전체 상품(또는 상점) 등의 사진만을 나열하는 것도 나름 나쁘지 않겠다는 생각이 들었기 때문이다. ​ 물론 이렇게 작은 앨범들 중 특정 사진을 클릭하면 다음과 같이 확대해서 보여줄 필요도 있을듯했다. 이렇게 해야…

    Read more