Latest posts
Firebase 배우기 33 – 댓글 기능 (댓글 쓰기, 댓글 읽기, 삭제, 수정) 구현하기
댓글 기능을 추가하면서 문득 앞선 글( https://blog.naver.com/mythee1/223531843633)에서 소개한 파이어 베이스를 이용해 만들었던 다음과 같은 제품 정보 상세 보기 페이지에 해당 제품에 대한 댓글 기능을 추가하면 좋겠다는 생각이 들었다. 다른 사람들의 웹페이지를 보더라도, 특정 제품이나 특정 기사, 특정 주제에 대해서는 사용자마다 자신만의 의견을 댓글로 남기는 경우가 많고, 또한 댓글을 통해서 다른 사람들의 생각을 알 수도…
Firebase 배우기 32 – 버튼으로 이동하는 상품별(아이템별) 상세 페이지 만들기
시작하면서 앞선 글( https://blog.naver.com/mythee1/223493415455)에서 파이어 베이스에 등록된 자료를 가져와 표시하는 방법을 소개한 바 있었고, 이러한 기본 방법에 – 정렬 버튼을 이용하여 문서들이 보이는 순서를 변경하는 기능 – 페이지 단위의 분할 표시인 pagination 적용 – 그리고 여러 개의 사진들을 커로젤(Carousel)방식으로 표시하는 기능을 반영하는 방법과, 이러한 기능들이 반영된 코드를 다음 글에서 소개한 바 있었다.…
Firebase 배우기 31 – 하나의 DB 레코드(문서)에 여러 개의 사진 파일을 가져와 커로젤 (Carousel) 방식으로 표시하기
앞선 글에서 파이어 베이스의 컬렉션 문서에 여러 개의 사진 파일을 등록하는 방법을 소개했었다. https://blog.naver.com/mythee1/223531049562 Firebase 배우기 30 – 하나의 DB 레코드(문서)에 여러 개의 사진 파일을 업로드하는 방법 시작하면서 앞선 글에서, Firebase에 사진 파일들을 등록하는 방법과, 이렇게 Firebase에 등록된 자료들… blog.naver.com 이렇게 다수의 사진 파일들을 파이어 베이스에 업로드하게 되면, 실제 파일 내용은 storage 부분에 저장되고,…
Firebase 배우기 30 – 하나의 DB 레코드(문서)에 여러 개의 사진 파일을 업로드하는 방법
시작하면서 앞선 글에서, Firebase에 사진 파일들을 등록하는 방법과, 이렇게 Firebase에 등록된 자료들을 읽어와 표시하는 방법을 소개한 바 있었다. 자료를 등록하는 방법 https://blog.naver.com/mythee1/223493076303 자료를 가져오는 방법 https://blog.naver.com/mythee1/223493415455 그리고 이렇게 자료를 읽어올 때 특정 필드 기준으로 정렬하는 방법도 별도의 글에서 소개한 바 있었다. https://blog.naver.com/mythee1/223507794742 Firebase 배우기 18 – 데이터를 읽어 표시할 때, 다양한 기준으로 정렬할…
Firebase 배우기 29 – Firebase에서 게시판 만들기 (4) – 글 제목을 클릭해 상세 읽기로 이동하기와 포맷 개선
앞선 글에서 firebase에서 간단한 게시판을 만드는 과정을 소개한 바 있었다.(https://blog.naver.com/mythee1/223499829728) . 그리고, 이렇게 만든 게시판의 화면을 일정한 레코드 단위로 분할해 표시하는 Pagination 기법을 적용하는 과정(https://blog.naver.com/mythee1/223510496924)과 문제점을 소개했으며, 기존 게시글의 수정과 삭제 기능을 구현하는 부분에 대해서도 (https://blog.naver.com/mythee1/223510579210) 글에서 자세히 소개했었다. Firebase 배우기 22 – 파이어베이스에서 게시판 만들기 (3) – 삭제 (Delete)와 수정 (Edit) 기능 추가하기…
Firebase 배우기 28 – Timestamp와 날자, 시간 표시 방법
FIrebase에서 날짜나 시간 데이터를 처리하는 가장 일반적인 방법은 Timestamp라는 것을 이용하는 것인데, UTC 기준 1970년 1월 1일 자정을 기준으로 현재까지의 초수를 값으로 하는 시간 표시 방법으로, 컴퓨터(Unix system)에서 흔하게 접하게 된다. firebase에서 DB에 현재의 일자나 시간을 기록하는 방법으로는 1/1000초 단위로 저장되는 Date( ) 함수나, firebase.firestore.FieldValue.serverTimestamp( ) 함수를 사용하면 된다. 그런데, 컴퓨터 내에…
Firebase 배우기 27 – Enter키 입력으로 HTML 버튼 선택을 대체하기
Firebase에서 다음과 같이 로그인 처리등을 하다보면 버튼을 마우스로 선택하도록 코드를 만드는 경우가 매우 많다. 위의 코드 동작은 다음과 같은 HTML 코드에서 해당 버튼의 이름을 지정하고, 클릭할 수 있게 설정한 상태에서, 실제 해당 버튼이 눌려지면 다음과 같은 button Handler에 의해서 미리 정해진 동작을 하도록 되어 있기 때문이다. 그런데 사용자 입장에서는 해당 웹페이지를 사용하기 위해…
Firebase 배우기 26 – Firebase로 만든 웹서비스에 추가 도메인(Domain) 연결하기
이전 글을 통해 로컬 PC에서 작성한 웹서비스를 웹서버에 대한 고민 없이도 Firebase의 hosting 서비스를 이용해 아주 간단하고 쉽게 배포하는 방법을 소개했었다. 웹서버에 대한 처리는 Firebase에서 알아서 해주기에, 사용자는 그저 firebase deploy 명령만으로 웹페이지를 인터넷에 올려 웹페이지를 운영하는 것이 가능했다. 그리고 이렇게 생성된 웹페이지 주소를 배포 시 다음과 같이 생성되는 URL 안내 메시지를 통해 확인하거나,…
Firebase 배우기 25 – Firebase의 Hosting 서비스로, 별도 웹서버 없이 간단히 웹서비스 배포(Deploy) 하기
Firebase 사용에 대한 이전 글들을 통해 DB인 컬렉션에 자료를 등록하는 페이지, 자료를 읽어서 가져오는 페이지, 키워드 검색, 삭제 및 수정, 게시판, 로그인, 가입 등에 대한 여러 페이지를 만들었고, Navbar를 이용해 메뉴바를 추가하는 방법까지 소개했었다. 만들어진 페이지들의 몇몇 예는 다음과 같은데, 이렇게 만들어진 웹페이지들을 인터넷을 통해 외부에서도, 그리고 다른 사용자들도 접속할 수 있는 웹서비스로 사용하려면,…
Firebase 배우기 24 – 부트스트랩 Navbar로 웹페이지에 간단하게 메뉴바 구현하기
앞의 글들을 통해서, Firebase의 Database를 활용하기 위하여 데이터를 쓰고, 읽고, 수정하는 등의 기능을 수행하는 여러 페이지와 게시판 운영을 위한 페이지, 그리고 누구나 접속 시 만나게 되는 Landing Page를 만드는 과정을 소개했다. 구슬이 서 말이라도, 꿰어야 보배라는 말이 있듯이, 이러한 각각의 웹페이지들을 하나의 시스템처럼 연결해 주려면 이들 페이지 간 이동을 선택할 수 있는 메뉴바 구성이…
