Latest posts
Firebase 배우기 23 – Template를 이용해 Landing Page 쉽고 빠르게 만들기
앞의 여러 글들에서 Firebase를 이용해, 자체적인 서버 없이 구글에서 제공하는 Firebase 내의 Firestore 서비스를 이용해 DB인 컬렉션을 만들고, 이 컬렉션에 데이터를 DB 형태로 저장하고, 불러오고, 삭제, 편집하는 기능에 해당되는 각각의 웹페이지를 만드는 과정을 소개한 바 있었다. 그런데 이렇게 만든 여러 페이지들의 기능을 사용자의 권한(가입 여부, 로그인 상태 등) 메뉴선택을 고려하여, 적절한 권한이 부여된 페이지를…
Firebase 배우기 22 – 파이어베이스에서 게시판 만들기 (3) – 삭제 (Delete)와 수정 (Edit) 기능 추가하기
파이어 베이스로 게시판 만들기 기초 이전 글(https://blog.naver.com/mythee1/223499829728)에서 파이어 베이스를 이용하여 간단한 게시판을 만드는 방법을 소개했었고, Firebase 배우기 12 – Firebase에서 게시판 만들기 (1) Firebase의 Cloud DB 솔루션인 Firestore는 그 자체가 Database인데, 이를 이용하면 게시판을 만들 … blog.naver.com 이렇게 만든 게시판에 페이지 분할에 대해서도 별도의 추가글(https://blog.naver.com/mythee1/223510496924)에서 소개한 바 있었다. 다만 이렇게 소개한 것은 가장 기본적인…
Firebase 배우기 21 – 파이어베이스에서 게시판 만들기 (2) – Pagination 적용하기
이전 글에서 Firebase의 Firestore Database를 리용하여 간단한 게시판 기능을 구현하는 것을 소개한 바 있었다. https://blog.naver.com/mythee1/223499829728 Firebase 배우기 12 – Firebase에서 게시판 만들기 (1) Firebase의 Cloud DB 솔루션인 Firestore는 그 자체가 Database인데, 이를 이용하면 게시판을 만들 … blog.naver.com 이렇게 만들었던 게시판 역시 글의 수가 많아지는 경우, 적절한 분량 단위로 페이지를 나눌수 있도록 Pagination을 적용하였다. 또한…
Firebase 배우기 20 – 파이어 베이스 문서를 표시할 때 페이지 단위로 분할하여 출력하는 Pagination 기법 적용하기
페이지 만들기 – Pagination Firestore Database에 있는 컬렉션 문서들을 불러와 화면에 표시하면서, 여러 가지 필드 중에 선택한 필드를 기준으로 오름차순 또는 내림차순으로 정렬하여 순서대로 표시하는 방법을 소개한 바 있었다. https://blog.naver.com/mythee1/223507794742 Firebase 배우기 18 – 데이터를 읽어 표시할 때, 다양한 기준으로 정렬할 수 있도록 여러가지 정렬 버튼 추가하기 앞선 다음 글에서, Firebase의 DB 데이터를 특정…
Firebase 배우기 19 – Card Component로 DB 데이타를 표시할 때, 줄 간격 및 상단 여백 조절 방법
Firebase DB에 기록된 컬렉션 문서들을 읽어와 웹페이지에 게시하는 경우, 포맷 등의 목적으로 Card Component 방식으로 표시하는 경우가 매우 많다. 비슷한 성격의 데이터들을 반복해서 표시하는데 그만큼 Card Component가 일정한 간격 유지, 표시 형식의 통일성 유지 등의 측면에서 유리하기 때문일듯하다. 그런데, Card Component의 기본 설정을 그대로 사용하다 보면, 간혹 필드값들을 표시하는 데이터 상단의 여백이나, 줄 사이…
Firebase 배우기 18 – 데이터를 읽어 표시할 때, 다양한 기준으로 정렬할 수 있도록 여러가지 정렬 버튼 추가하기
앞선 다음 글에서, Firebase의 DB 데이터를 특정 필드를 기준으로 오름차순 또는 내림차순으로 정렬하여 불러오는 방법을 소개했었다. https://blog.naver.com/mythee1/223497585071 Firebase 배우기 10 – Firestore DB 등록 자료를 특정 필드 기준으로 정렬하여 읽어오기 FIrestore Database에 컬렉션으로 등록한 자료를 읽어와 웹페이지에 표시하는 것을 이전 글에서 소개한 … blog.naver.com 그런데 이렇게 하면, 한 가지 아쉬운 점이 있다. DB의 데이터를…
HTML의 문자 체계와 기호 문자 – UTF8/Unicode, 특수문자
HTML Version HTML은 HyperText Markup Language의 약자로 웹페이지를 만드는 데 사용되는 언어로, W3C(World Wide Web Consortium – https://www.w3.org/standards/about/)이란 기관에서 표준을 제정하고 관리하는 업무를 담당하고 있는데, W3C는 HTML 외에도 웹을 위한 CSS, DOM, SVG, XHTML, XML 등의 웹 표준도 함께 관리한다. HTML에도 버전이 있는데, 현재 웹페이지 제작에 사용되는 버전은 2014년에 발표된 HTML5 (<!DOCTYPE html>)가 사용되고…
Firebase 배우기 17 – Log-Out 페이지 만들기
Firebase를 이용하여 웹서비스를 만드는 경우, 사용자의 가입을 처리하고 로그인 상태에 따라 차별화된 페이지와 메뉴를 보여주는 것이 필요한데, 서비스 가입 처리에 대해서는 https://blog.naver.com/mythee1/223495997534 글에서, Firebase 배우기 7 – 서비스 가입 처리 Firebase에서는 서비스 가입자에 대한 가입자 등록과 관련된 기능을 쉽게 구현할 수 있도록 firebase-auth… blog.naver.com 그리고, 사용자의 로그인 처리에 대해서는 https://blog.naver.com/mythee1/223496032686 글에서 소개한 바 있었다.…
Firebase 배우기 16 – 인트로 비디오 추가하기
특정 상점이나, 조직 등의 웹 페이지를 만들다 보면, 간혹 소개나 홍보용 동영상을 자동으로 재생하고 싶은 경우가 있는데, Firebase를 이용하여 웹서비스 호스팅을 하려는 경우에도 다음과 같은 간단한 한 줄의 명령으로 intro 비디오의 재생이 가능하다. 이렇게 video 태그에 controls 설정을 적용하면, 다음과 같이 비디오 화면 하부에 재생 및 중단 스위치 버튼이 추가되어 표시되며, 이를 통해…
Firebase 배우기 15 – 접속 정보를 별도 파일로 분리하여 보안 Risk는 줄이고, 코드 가독성은 높이기
Firebase를 사용하려면, 각 프로젝트에 연결하기 위해 다음과 같은 접속 설정 정보와, 초기화를 위한 initialization 명령을 반드시 코드 내에 추가해야만 한다. 그런데, 이러한 접속 정보를 매 웹페이지의 코드마다 그대로 노출하는 것은 여러 가지 단점이 있다. 무엇보다 접속 정보를 그대로 노출하게 됨에 따라 보안 문제가 있을 수 있고, 해당 코드를 공개할 때마다 접속 정보를…
